问题
I have following snap-points: 480px
, 900px
, 1800px
, 2400px
.
and this markup:
<img
sizes="(max-width: 2400px) 100vw, 2400px"
srcset="
boat-480.jpg 480w,
boat-900.jpg 900w,
boat-1800.jpg 1800w,
boat-2400.jpg 2400w"
src="boat-2400.jpg"
alt="This is a boat">
How should I get responsive images to work?
回答1:
1. Basics
Device-pixel ratio
Device-pixel ratio is the number of device pixels per CSS pixel which is related to:
- Pixel density of the device (number of physical pixels per inch)
- Zoom level of the browser So, greater Pixel density and/or higher Zoom level results in higher Device-pixel ratio.
srcset
attribute & x
descriptor
On <img>
tag, the x
descriptor in the srcset
attribute is used to define the device-pixel ratio. So in:
<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
- for a device-pixel ratio of 1, the image image-1x.jpg will be used.
- for a device-pixel ratio of 2, the image image-2x.jpg will be used.
- for a device-pixel ratio of 3, the image image-3x.jpg will be used.
- for the fallback the
src
attribute (image.jpg) will be used.
srcset
attribute & w
descriptor
If you want a different image on a larger or smaller viewport, the w
descriptor in srcset
and a new attribute (sizes
) comes into play:
<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
This mentions that the width of the first image is 200px
, second image is 400px
, and third image is 600px
. Also, if the user’s screen is 150 CSS pixels
wide, this equates to the following in terms of x
descriptors:
<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">
sizes
attribute
The actual implementation where you’d want a different size image (different height, width) on different screen sizes is accomplished by using sizes
attribute along with the w
descriptor of srcset
attribute.
<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
If the browser width is 500 CSS pixels
, the image will be displayed 250px
wide (because of 50vw
). Now, this is equivalent to specifying:
<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">
So, for a 1.5x
display, image-2x.jpg
will be downloaded by a browser, since it gives a device-pixel ratio of 1.6x
(which is most suitable for a 1.5x
display).
2. Answering your question
You have mentioned that you have emulated a 480px CSS width screen.
Because you have set sizes
to 100vw
, that is equivalent to specifying:
<img src="boat-2400.jpg" srcset="
boat-480.jpg 1x,
boat-900.jpg 1.88x,
boat-1800.jpg 3.75x,
boat-2400.jpg 5x">
There is chance you have 3x
display, and thus the browser downloads boat-1800.jpg
file.
Questions
Oddly, when I tested this on Chrome on iOS the browser actually downloaded boat-2400.jpg which is even more worrying.
That would be due to the higher Device-pixel ratio of your iOS device, which is likely to be something near 5.
Have I missed something here?
I dont think so.
I imagine I don't need the sizes attribute because I have the image set to 100vw in all views
The value of sizes
is 100vw
by default. But if you want to use w
descriptor and want to have something other than 100vw
for your sizes
, you need sizes
attribute.
来源:https://stackoverflow.com/questions/35099471/how-to-use-srcset-and-sizes-for-responsive-images