What the specification says about cases when the same path (or probably the same sized images) appear with different pixel density descriptors?
The following example renders differently in desktop (Windows) Firefox 82.0b2 and Chrome 85.0.4183.121. The image appears natively scaled in FF and half the size in Chrome
<html><head></head>
<body>
<img src="testpicture.jpg" srcset="testpicture.jpg 2x">
</body>
</html>
The reason I'm asking is because a commercial CMS I use very often uses such output. In order to encourage them to avoid this I need a clarification. In this CMS the rendered content works mostly properly in FF, but in Chrome the rendering is sometimes unexpectedly scaled or some image content not appears at all (probably relating to cache availability of different sizes).
Update: This is very likely a chromium issue when the browser due to internal logic related to caching chooses a wrong variant. But until it finally fixed, I'd rather not post my own answer
The srcset attribute is a feature that enable responsive images. Specifically srcset gives the browser a hint what resolution images are available. In your case there is only on definition which hints at one image (testpicture.jpg) which has double (2x) resolution. But since there is only one definition, the srcset attribute won't do nothing and could be omited.
A full example would look like this:
<img src="/files/16864/clock-demo-200px.png"
alt="Clock"
srcset="/files/16864/clock-demo-200px.png 200w,
/files/16797/clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw">
Check out the MDN documentation for the image element and their guide on responsive image for further details.
Related
I don't know if this is the expected behaviour with the srcset attribute. But for some reason, it's not working for me.
So, I'm testing on windows and mac, srcset differentiates them by the pixel density. So 1x means lower (Windows) and 2x means higher (Mac)
But for some reason, even in Windows, it's showing the 2x image instead of 1x. This happens only for those images which have already been used in the page.
somewhere in the same file
<img src="already_used_image.jpg" >
<img
srcset="already_used_image.jpg 2x, normal_image.jpg 1x"
src="fallback_image.jpg"
>
I have checked the docs but couldn't find relevant info regarding this particular case.
I am trying to change/art direct an image based on device and screen sizes — not just change the resolution of the image.
I am using the <picture> element, and it is working fine when I resize browsers on my desktop, but is not working on mobile devices.
The code currently reads:
<picture>
<source media="(min-width: 950px)" srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home.png">
<img src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
</picture>
I understand that <picture> is not supported on all platforms, so I also tried srcset, as follows:
<img srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png 500w,
http://phillipsperfections.com/images/PhillipsPerfections_Home.png 950w"
sizes="100vw”
src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
I want the image to always be 100% width, and to switch to a different image when viewing below 950px.
I am referencing code from here http://alistapart.com/article/using-responsive-images-now#section3, but am I missing something? Can someone point me in the right direction?
My working site is http://phillipsperfections.com/. You should be able to view source for all of the code.
Thanks so much!
Because the two versions contain different visual content, you are indeed “art-directing”, and should use the <picture> element (and not srcset) to switch between the two versions of your image.
(If the two versions were identical, scaled-up-and-down versions of each other, srcset would be the way to go).
Your <picture> markup looks correct; what mobile browser are you not seeing the expected version in? <picture> support is actually pretty good these days; here’s a current support matrix.
If you need the art direction to work in older browsers, you’ll need to use Picturefill — and inspecting your site, it looks like you are! But with some extra quotes which are preventing the script from loading:
<script src="“http://phillipsperfections.com/js/picturefill.js"" async=""></script>
If you change that to:
<script src="http://phillipsperfections.com/js/picturefill.js" async></script>
Do you see the desired behavior in the mobile browser that wasn’t showing it to you before?
As far as I can tell, the srcset and sizes attributes focus more on applying a suitably scaled image for the device’s size and resolution.
There appears to be no facility to use these attributes to select an alternative image based on the screen size, such as one cropped or oriented differently.
Is this a correct understanding of the situation? Does that mean we will have to wait for the picture element to be widely supported for this task?
You are correct that srcset and sizes are only there to provide different resolution alternatives to the "same" image - there's no guaranty which resource will be picked.
If you want to provide cropped or proportionally different alternatives that are guarantied to match your responsive breakpoints, then <picture> is what you're looking for.
As far as support goes, <picture> is fully supported in Chrome and Firefox, soon to be supported in MS Edge, and not yet supported in Safari 9.
In the mean time, you could use picturefill to add that support to non-supporting browsers.
Personally, I have used the w-descriptors and srcset to display a variety of images based on the width of the available space.
It might seem rather crude but it works for me - I edit the image so that it becomes "art-directed" for a number of common breakpoints - turning it into effectively a number of different images.
Then, based on the size of the agent's screen, the browser will almost always choose the image which I have previously determined to be the most suitable.
For my approach, I did not use size, picture or any other property.
A code as simple as this appears to work:
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />
Let's say I have an image with actual size of 200x200 pixels. I insert it into a HTML page like this:
<img src="some.jpg" width="50" height="50">
Suppose there's no CSS styling for this image.
Will it be displayed consistently across all browsers and devices like a 50x50 image? Are there any exceptions?
This style is supported among all of the major browsers (IE, Firefox, Opera, Safari, and Chrome)
Keep in mind that when doing this, the user is still forced to download the full size image before it is rendered in the size you specified! If it is a particularly large image, it may be wise to downscale it with an image editor before you upload it.
The user is still receiving the original file but the browser is altering it through its respective rendering methods.
The only exceptions to this rule, and this isn't necessarily due to browser rendering but may be helpful to keep in mind, is that HTML 5 no longer allows for you to adjust by percentage -- you can only adjust by pixels (as you already are)
I'm seeing a lot of inconsistencies with srcset attribute on img tags (responsive images) in Chrome 40.0.2214.91
Before I updated to Chrome v40 (I was on ~39), srcset attribute worked fine and would swap the image upon browser resize. Now, sometimes, the smaller version of the image will display if I have the browser set to the desired width then refresh the page. Other times it will not work whatsoever.
Testing jsbin:
http://jsbin.com/hulaconake/1/edit?html,output
Image tag I have:
<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">
I'm also testing this in another env with non-Placehold.it images, and using Picturefill.js http://scottjehl.github.io/picturefill/
I'm not having any issues in FF or Safari (both using picturefill).
iOS Chrome has similar problems.
Is my syntax wrong? Is there something going on I don't know about?
It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.
In case you want to use different images or same image with different crops, use the picture element.
Responsive images can be technically differentiated between 2 types.
srcset with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
density descriptor (x) (for static image sizes, Retina vs. normal resolution)
width descriptor (w) and the corresponding sizes attribute (for flexible, responsive / adaptive images (automatically also includes Retina optimization)
and the picture element with its source[media] children (gives the author control about what srcset should be chosen by the browser depending on specific media queries)
So img[srcset] is for resolution switching and picture is for different images reacting to your design