I have a site where I want some full-width images (they'll be cropped vertically, for a parallax look). I want to I've read a bunch of articles on srcset and sizes and tried a few things, but I can't figure out (a) whether I need to use "sizes" at all, and (b) especially without sizes, how the browser will choose which image to load.
For concreteness, here's an image spec:
<img src="/images/full/2c8n.jpg" srcset="
/images/320/2c8n.jpg 320w,
/images/640/2c8n.jpg 640w,
/images/1024/2c8n.jpg 1024w,
/images/full/2c8n.jpg">
This is in a full-width container div so the image should go edge to edge.
I'd like it to load the smallest one on mobile and the largest one (the /images/full one) on big desktops, but that doesn't seem to be happening. I've seen that it's possible to use x style as well, but I'm not sure how I'd choose which image to use with each scale factor, if that's even the right way to do it. Any idea what I'm doing wrong and what's the proper way to do this?
The documentation is pretty unclear about the sizes attribute. What I've been able to determine is that it only affects what size to render the image, and NOT image selection. So, sizes="(max-width: 500px) 50vw, 100vw" tells the browser:
if the viewport is up to 500px wide, render the image at 50% of the viewport (50vw)
if the viewport is 501px or larger, render the image at 100% of the viewport (100vw)
For the srcset attribute, the browser takes a look at your list of images, guesses at what size the slot is it should fill and then chooses the next size up. So, edge to edge as per your requirement, this is how it would choose which file to use:
Viewport width up to 319px -> /images/320/2c8n.jpg
VW 320px to 639px -> /images/640/2c8n.jpg
VW 640 to 1023 -> /images/1024/2c8n.jpg
VW 1024 and larger -> /images/full/2c8n.jpg
I've also read, but haven't verified yet, that it uses the first image it finds that fits the requirements between the src and srcset tags. The order of the attributes may make a difference. Again, read but not verified.
Related
I have an image that gets displayed in various sizes on my website:
The website is responsive and the apparent image size is often the size of the browser, with some exceptions when the browser is very wide. So, the image's width can vary between 200 and over 1000 pixels.
We want the image to be displayed in native resolution on high-resolution devices (Retina).
So, our image is present in three resolutions, let's call them i1.png, i2.png and i3.png.
What I would like to do is just this:
<img src="i1.png" srcset="i1.png 420w, i2.png 840w, i3.png 1260w" />
In my opinion, the browser should have enough information to figure out which image it needs.
On a standard-resolution device (no retina screen), it just takes the width of the <img /> element and then loads the image that has a width higher or equal to the width of the element. E.g. if the image element is 600px wide, then it will load i2.png.
On a retina device, it would just multiply the width of the <img /> element with the device-pixel ratio. E.g. on a "2x" device, it would load i3.png for a 600px image, because 2 x 600 = 1200, so it would need the image with a width of 1260px.
It seems the browser indeed does something like that, but in some cases it would load the 840px image even though the 420px image would be enough.
What factors does the browser use to determine the size of the image to load?
Is it using CSS rules to determine the image's apparent width?
Or does it ignore CSS and just look at width and height attributes on the <img />, if present?
What if some parts of CSS are not yet loaded?
Crucial point: I do not want to use the sizes attribute, because I would need media queries for all possible combinations of device-pixel ratios and browser window widths. This should not be necessary, because as I said, the browser should have enough information.
I checked the Mozilla Docs about the topic, but they say that if sizes is omitted, then we need to use 2x descriptors (instead of 420w descriptors) in the srcset attribute. This is useless for my scenario: the goal is to have the browser find out which image to load, not just based on device-pixel ratio, but also based on responsiveness.
Seems that the browser does not respect any CSS to decide which image to load. After all, it is not clear which CSS files have already been loaded when the image starts loading.
Instead, it treats each image as if it was stretched to the full page width. If the screen is non-retina and 600px wide, it would load the next-higher image size (840px in the above example), regardless of the actual size that the image would occupy on the screen.
For retina screens, it would just multiply the required image width by the device-pixel ratio.
Tested using Google Chrome in Incognito mode and reloading the page with "empty cache and hard reload" each time.
I have the following html responsive image:
<img class="content-img" src="/app/uploads/2018/07/1400x750.png"
srcset="/app/uploads/2018/07/1400x750.png 1400w,
/app/uploads/2018/07/1400x750-768x411.png 768w,
/app/uploads/2018/07/1400x750-1280x686.png 1280w,
/app/uploads/2018/07/1400x750-520x279.png 520w,
/app/uploads/2018/07/1400x750-420x225.png 420w,
/app/uploads/2018/07/1400x750-340x182.png 340w,
/app/uploads/2018/07/1400x750-600x321.png 600w"
sizes="(max-width: 666px) 100vw, (max-width: 1399px) 38vw, 535px"
>
Expected Behaviour:
1. Viewport Widths 0px - 666px:
Browser should take the full viewport pixel width e.g. 450px, and select the smallest src from the srcset where width is greater than 450px, in this case '/app/uploads/2018/07/1400x750-520x279.png'
2. Viewport Widths 667px - 1399px:
Browser should take 38% of the viewport width e.g. 380px # 1000px viewport, and select the smallest src from the srcset where width is greater than 380px, in this case '/app/uploads/2018/07/1400x750-420x225.png'
3. Viewport Widths 1400+ px:
Browser should take the default of 535px and select the smallest src from the srcset where width is greater than 535px, in this case '/app/uploads/2018/07/1400x750-600x321.png'
Actual Behaviour:
Testing in Google Chrome, using dev tools inspect element on the img for all of the above examples, the resulting "CurrentSrc" in each case is:
/app/uploads/2018/07/1400x750-520x279.png (CORRECT)
/app/uploads/2018/07/1400x750-1280x686.png (INCORRECT (expecting 420px width)
/app/uploads/2018/07/1400x750.png (INCORRECT (expecting 600px width)
I'm left scratching my head, other similar questions all seem to boil this down to a Google Chrome caching issue, but I've been careful to eliminate that issue when testing and I still don't get the src images I expect.
I'm only 90% sure I've written the correct "sizes" attribute for the behaviour I want. Note that the logic is slightly complex due to lining up with responsive CSS breakpoints and trying to load sensible image widths in context.
Some clarification on how the srcset and sizes attributes define the way the browser should choose which image to display (see Responsive images for more details).
First, the browser checks the sizes attribute to find the first media condition that applies to the current device width. So, for the breakpoints you specified, the browser should display the selected image at full viewport width for devices up to 666px wide, then at 38% of viewport width for devices between 667px and 1399px wide, and lastly at a fixed 535px width for devices greater than 1399px wide.
Second, the browser checks the srcset attribute to find the image that most closely matches the image slot size as determined by the sizes attribute (as described above).
So for the breakpoints you specified, expect the following:
1) For devices up to 666px wide, the browser should select the image width that is closest to the device width (not the smallest image that is greater than the device width).
Examples:
On a 450px wide device, the browser should select the 420w image.
On a 599px wide device, the browser should select the 600w image.
2) For devices between 667px and 1399px wide, the browser should select the image width that is closest to 38% of the device width.
Examples:
On a 1000px wide device, the browser should select either the 340w image or the 420w image (not sure how it chooses when you split the difference since the image slot size determined by the media query is 380px)
On a 1366px wide device, the browser should select the 520w image (since the slot size determined by the media query is 519px)
3) For devices over 1399px wide, the browser should select the 520w image (since the slot size determine by the media query is a fixed 535px).
NOTE: Retina and other high-res displays change the math a bit, resulting in the browser more or less doubling the width of image that it chooses in each of the above examples (see Responsive images: if you're just changing resolutions, use srcset).
A couple potential gotchas to double check. Make sure you have <meta name="viewport" content="width=device-width"> in the head so the devices you test on are forced to adopt their real width when loading the page. Also make sure you don't have conflicting css or js interfering with the display of your image.
If you have avoided the gotchas, your code otherwise looks fine and the similar snippet below gives the expected results for me, though you do have to be careful about caching when testing as you already noticed (slightly different organization might help you more quickly scan which images should be chosen under different circumstances). Below is a snippet using placeholder images that show their widths which may help your testing.
<img srcset="https://via.placeholder.com/340x182 340w,
https://via.placeholder.com/420x225 420w,
https://via.placeholder.com/520x279 520w,
https://via.placeholder.com/600x321 600w,
https://via.placeholder.com/768x411 768w,
https://via.placeholder.com/1280x686 1280w,
https://via.placeholder.com/1400x750 1400w"
sizes="(max-width: 666px) 100vw,
(max-width: 1399px) 38vw,
535px"
src="https://via.placeholder.com/340x182"
alt="placeholder image">
I have noticed that order matters when it comes to srcset.
For some reason from the biggest image to the smallest one worked, whilst the contrary did not.
I am not entirely sure whether it's an actual thing or not, but I am leaving this out here with the hope it may help someone.
Example that did work:
<img srcset="{{block.settings.slide-image | img_url:'1250x' }} 1227w
{{block.settings.slide-image | img_url:'1100x' }} 1079w,
{{block.settings.slide-image | img_url:'956x' }} 936w,
{{block.settings.slide-image | img_url:'795x' }} 775w,
{{block.settings.slide-image | img_url:'620x' }} 600w,
{{block.settings.slide-image | img_url:'520x' }} 500w,
{{block.settings.slide-image | img_url:'456x' }} 436w"
src="{{block.settings.slide-image | img_url:'456x' }}" />
Example that did not work:
<img srcset="{{block.settings.slide-image | img_url:'456x' }} 436w,
{{block.settings.slide-image | img_url:'520x' }} 500w,
{{block.settings.slide-image | img_url:'620x' }} 600w,
{{block.settings.slide-image | img_url:'795x' }} 775w,
{{block.settings.slide-image | img_url:'956x' }} 936w,
{{block.settings.slide-image | img_url:'1100x' }} 1079w,
{{block.settings.slide-image | img_url:'1250x' }} 1227w"
src="{{block.settings.slide-image | img_url:'456x' }}" />
The Missing Ingredient To Understanding What The Browser Is Thinking: devicePixelRatio
The reason this is a source of so much confusion, is that at first glance, we seem to think that all the calculations should be done on the basis of pixels.
Let's walk through the thought process / algorithm of the browser:
How big is the screen? It's a mobile phone: 390px.
How much space does the image occupy? 100vw (100% of the viewport)
If we only factored in this much, we would say: "Okay, use the 400px or 500px image. That should cover it."
But, there is another aspect. Nowadays, phones don't have such low resolutions. They are packed with pixels! This packing is expressed in: devicePixelRatio (can be checked with JS with window.devicePixelRatio)
If you factor that in, you have to ask another question. What is the total number of pixels to be covered:
Phone Width In Pixels x devicePixelRatio
So, that is many more pixels. And that is why the browser chooses the larger image.
Great article which clearly explains all this with images and samples: srcset not working? 😩 Getting Wrong Images? Let’s Find Out Why!
What's Going On In The Above Case?
Well, we cannot tell because we don't know what device this code is running on. Or what the device pixel ratio is. Once that is known, I am sure that things will immediately make sense.
I have read about this problem quite often so far and it also occurs for my own projects. Here is an introduction of what I have found out so far about the srcset and the sizes attribte.
There are two different possibilities on how to use the srcset-attribute (source w3c: http://w3c.github.io/html/semantics-embedded-content.html#device-pixel-ratio):
Device-pixel-ratio-based selection when the rendered size of the image is fixed
This is a simple and reliable way to use srcset. You simply say: If the device-pixel ratio of the target devicer is bigger than x, display this image with the following higher resolution.
The x descriptor is not appropriate when the rendered size of the
image depends on the viewport width (viewport-based selection), but
can be used together with art direction.
Example:
<img src="/uploads/100-marie-lloyd.jpg"
srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
alt="" width="100" height="150">
Viewport-based selection
This method allows you to display different image sizes depending on the size of your viewport. This is the method you are primarily using within your example.
The srcset and sizes attributes can be used, using the w descriptor,
to provide multiple images that only vary in their size (the smaller
image is a scaled-down version of the bigger image).
Simple example:
<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
src="wolf-400.jpg" alt="The rad wolf"></h1>
One step further: Using the sizes attribute
The default for Viewport-based selection and srcset is, that the image always has 100% width (100vw). The sizes attribute is giving the great possibility to tell the browser, how the width of an image is at a certain screen width.
The sizes attribute sets up the layout breakpoints at 30em and 50em,
and declares the image sizes between these breakpoints to be 100vw,
50vw, or calc(33vw - 100px). These sizes do not necessarily have to
match up exactly with the actual image width as specified in the CSS.
The user agent will pick a width from the sizes attribute, using the
first item with a (the part in parentheses) that
evaluates to true, or using the last item (calc(33vw - 100px)) if they
all evaluate to false.
Example:
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
Here is the challange where I would be really glad if someone could enlighten me
Can I rely on srcset that a Client always load the correct image? Or is the actually loaded image also depending on processing power and internet connection speed as some people stated? I had complaints about retina devices which load lower resolution images.
How can I use both: Device-pixel-ratio-based and viewport-based selection together? Because for each possible size in sizes, I may want to define a retina image with 200% size as well as a non-retina image.
And furthermore: Does it make sense to use different images within srcset for different viewport sizes or is this a misuse of the srcset attribute? If it is possible to combine device-pixel-ratio-based and viewport-based selection, this should also be possible.
Can I rely on srcset that a Client always load the correct image?
The answer is NO. Moreso, you can never know the dimension of the image the user will upload unless you want to check that with a Javascript code and then restrict the user to upload the right dimension. But that will not be too user friendly.
Again, You might want to implement an algorithm to always resize the image to the particular size you want without distorting the quality, so you don't have to pass different imageurl to the srcset and just use the src attr. This can be an advantage to users with slow internet connection.
Does it make sense to use different images within srcset for different viewport sizes or is this a misuse of the srcset attribute?
The point is how many device Viewport do you want to handle in all. If you specify different image sizes and dimension for different view port, you might not able to target all at once especially when a new device is available that you didn't handle as at the time you were developing.
I have a web page design where the layout size and image sizes are based on em's. For example:
<html style="width:50em; font-size:16pt">
<body>
<p>Lorem ipsum
<img src="..." style="float:right; width:20em">
</p>
</body>
</html>
Because the image size is specified in em's, it is always in lockstep with the text size. Unfortunately, we don't know how many CSS pixels wide an image is. We also don't know how many device pixels wide an image is, which depends on the size of an em, the magnification, etc.
The <img> srcset and sizes attributes appear to be nearly the solution I want. But I'm not sure if it applies to my situation here. I can generate multiple asset sizes, e.g. 320×240, 480×360, 640×480, etc.
I want the web browser to look at the content box for the <img> element, calculate how many device pixels wide it is, and download the most appropriate image from a list of alternatives. How can I do this?
Note: I did read about the srcset x syntax, but it doesn't seem to be the right tool.
Srcset is definitely a great way to approach this. You basically have a number of images you save out for multiple sizes, usually you'll want to have the image be the same width of the element if possible. Then you set the image that you want to use for each screen width.
<img src="image.jpg" alt="Name"
srcset="
/img-2400.jpg 2400w,
/img-1800.jpg 1800w,
/img-1200.jpg 1200w,
/img-900.jpg 900w,
/img-600.jpg 600w,
/img-400.jpg 400w"
sizes = "(min-width: 2400px) 900px,
(min-width: 1800px) 600px,
(min-width: 1200px) 500px,
(min-width: 900px) 500px,
(min-width: 600px) 600px,
400px" />
So /img-2400.jpg 2400w would use /img-2400.jpg when the screen is closest to 2400px wide.
In the sizes attribute, you can also specify if what the image size will be at certain screen sizes as it may not always be 100% of the width of the browser.
So (min-width: 2400px) 900px is telling the browser that when the window is at least 2400px wide, the image will be 900px wide on the screen. So that should be telling the browser to then grab /img-900.jpg when the window is 2400px wide since that image is set to 900w which is the closest to 900px (its exact).
You can still approximately calculate this if you are using em, by multiplying the em you are using by 16 (this may vary depending on browser settings or settings you impose in your css). So if you set your width of an image in css to be 20em, thats 16 * 20 = 320px.
When these are used in combination, modern browsers should be able to detect the best image to grab dependent on the screen size. See browser compatability for srcset here: https://caniuse.com/#search=srcset
Based on Eric Portis's article, this solves the problem:
<img style="width:20em" sizes="20em"
src="pic-1000.png"
srcset="
pic-150.png 150w,
pic-220.png 220w,
pic-330.png 330w,
pic-470.png 470w,
pic-680.png 680w,
pic-1000.png 1000w">
After the web page is loaded, if the most appropriate image changes for some reason (e.g. using zoom to change the device pixel ratio), then Firefox will always change the image to the most appropriate one at the moment. By contrast, Chrome seems to change the image if the new one is bigger, but won't change to a small image unless you reload the page - the image resolution is sticky upwards.
I want to know how could I start using the HTML srcset img attribute in my mobile apps. Or Is there any other jQuery plugin which helps me to solve image resolution problem.
<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" />
In short, Srcset is a new attribute which allows you to specify different kind of images for different screen-sizes/orientation/display-types. The usage is really simple, you just provide a lot of different images separating them with a comma like this: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. Here is an example: srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"
This is a longer answer which explains things in more details.
Difference between srcset and picture. Both srcset and picture does approximately the same things, but there is a subtle difference: picture dictates what image the browser should use, whereas srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. The support for srcset is pretty good and almost all current browsers more or less support it. Situation with a picture element is a little bit worse.
Descriptors are just a way to show what kind of image is hidden behind the resource. There are various kinds of descriptors:
density descriptor. srcset="image.jpg, image-2X.jpg 2x"
The display density values—the 1x, 2x, etc.—are referred to as display density descriptors. If a display density descriptor isn’t provided, it is assumed to be 1x. Good variant to target retina displays.
width descriptor. srcset="image-240.jpg 240w, image-640.jpg 640w". I am sure this is self explanatory. The only problem is that by itself width descriptor is not really helpful. Why? read here
size descriptor, which only makes sense if you use width descriptor. srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">. The instructions for the browser would look like this: (max-width: 480px) 100vw — if the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport width. (max-width: 900px) 33vw — if the viewport is 480 pixels wide or smaller, this rule will never be reached because of the previous media condition. And 254px is when there is no media condition listed, the length is assumed to be a default value used when none of the other media conditions are met.
Just for completeness will add here that there is an image-set() attribute for a background image in CSS and some other helpful link here
Here is a detailed guide on srcset along with code samples.
srcset allows you to define a list of different image resources along with size information so that browser can pick the most appropriate image based on the actual device’s resolution.
Each comma-separated item in srcset has:
Image URL, e.g. http://ik.imagekit.io/demo/default-image.jpg or relative path /demo/default-image.jpg
An empty space
The actual width of the image or display density:
Either using display density descriptor, for example, 1.5x, 2x etc.
Or, using width descriptors, for example, 450w. This is the width of the image in pixels.
Using display density descriptor
The syntax for display density descriptors is straightforward. srcset provides a comma-separated list of image resources along with display density it should be used, for example1x, 2x etc.
<img src="image.jpg"
srcset="image.jpg,
image_2x.jpg 2x"
/>
Live demo - https://imagekitio.github.io/responsive-images-guide/srcset-density.html.
Using width descriptor
The syntax is similar to the display density descriptor, but instead of display density values, we provide the actual width of the image.
<img src="image.jpg"
srcset="small.jpg 300w,
medium.jpg 600w,
large.jpg 900w"
/>
This lets the browser pick the best image
Using width descriptor allows the browser to pick the best candidate from srcset based on the actual width needed to render that image on that particular display at runtime.
Note that display pixel density is also taken into account by the browser while calculating the required width. 😎
For example, assuming an image takes up the whole viewport width - On a 300px wide screen with DPR 2, the browser will pick medium.jpg because it needs a 300x2=600px wide image. On a 300px wide screen with DPR value 3, the browser will select large.jpg because it needs a 300x3=900px wide image.
Demo - srcset with width descriptor
Let see this in action with a live demo - https://imagekitio.github.io/responsive-images-guide/srcset-width.html.
Here is a good article on the srcset attribute and how to use it. srcet allows you to declare a set of images to be displayed on different viewport sizes. You just have to save and image at different resolutions e.g. banner-phone-HD.jpeg would be the highest resolution.
Exmaple:
<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">
The above would serve banner-phone.jpeg to devices with viewport width under 640px, banner-phone-HD.jpeg to small screen high DPI devices, banner-HD.jpeg to high DPI devices with screens greater than 640px, and banner.jpeg to everything else.
There are also other methods like CSS media queries you can use to produce the same effect.
I am not aware of any JQuery plugins which would help with this.