Menu
should I write this
srcset="small.jpg 1x 500w, medium.jpg 2x 1000w, large.jpg 3x 1500w"
or this
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
are the two expression the same?
239
If you are loading a fixed-width image that will take up almost full viewport width, then use srcset along with width descriptors. However, in the below cases using srcset alone won’t be sufficient: When you are loading flexible images i.e. when the size of your image changes based on the size of the viewport.
sizes - To define the size of the image element. It could be a fixed size like 225px or relative to the viewport. You can use CSS media conditions here to provide different size values based on the viewport width. Before you provide different image sources in srcset, you need to understand what all sizes do you need based on the layout.
On a device, with DPR (device pixel ratio) 2, a 2x wide image with low-quality (50) will look better than a 1x wide image with high-quality (90). Despite being similar in terms of file-size, the 2x image will give a sharper appearance. You can learn more about this technique. 2. Loading the right image - Art direction
In general - for an image to look perfect, you want to avoid both downscaling and upscaling. You can always go with only @2x or @3x images and add other scales only if you see visual problems. Using higher resolution won't improve downscaling.
Your first code block is incorrect, see this MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-srcset
A srcset attribute can contain either width descriptors(w) or pixel density descriptors (ex. 2x), but not a combination of both.
The second code block is correct.
Side note: the browser will automatically take into account the device's pixel density when choosing which of the three images to download.
87
answered Nov 15 '22 08:11
It looks like the latter of the two (based on this article): https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
CSS-Tricks are usually pretty good at updating their content, in case things changes. I can see that his article are from 2014, which is old, but now crazy-old.
But if it was me, then I would try both, use Google Chrome, use the 'Toggle Device Toolbar' (Google that, if you don't know what it is), and then inspect the elements to see if it works as you want it to work.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
