Menu
I have two images, one is 1000 x 800 px ("large"), and one is 200 x 200 px ("small"). I want to use srcset / sizes / picturefill to display the small image when the screen is less than or equal to 500 CSS pixels wide, and the large image otherwise.
Here's a straw-man proposal: http://jsfiddle.net/ghhjfo4z/1/embedded/result/
<img srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w, http://i.imgur.com/BgLoqRx.jpg 500w">
This works fine on my 1x pixel density display. But when I switch over to my 2x pixel density retina display, suddenly the small image is only displayed when the viewport is less than or equal to 250 CSS pixels wide.
Is there any way to make the browser use the small image on my 2x pixel density display when the viewport is less than or equal to 500px?
Basically I want to disregard the pixel density of the device, and use srcset and/or sizes to only choose an image based on CSS pixel width of a viewport.
683
The srcset attribute on an <img> tag specifies multiple image resources (URLs) for the img element. Together with the sizes attribute they create responsive images that adjust according to browser conditions.
The srcset attribute allows you to specify a list of image file URLs, along with size descriptions. Yo ualso need to still use the src attribute to identify a “default” image source, to be used in browsers that don't support srcset .
The sizes attribute IS strictly required if there is a srcset attribute with a width descriptor. From the spec: "If the srcset attribute has any image candidate strings using a width descriptor, the sizes attribute must also be present". See html.spec.whatwg.org/multipage/…
You would use the srcset attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage ( ...
The srcset Attribute. On regular resolution displays, the 1x variant of the srcset will be used [1x image]. On displays with 2 device pixels per CSS pixel, the 2x variant of the srcset will be used [2x image]. Similarly, there is a 3x image, and a 4x image.
Why is srcset important for SEO? Srcset is important for SEO because it allows browsers to load the optimal image size based on the device's characteristics. Larger images have larger file sizes. There's no point in loading, for example, a 2400-pixel wide, 20 MB image on a simple mobile phone.
Just for completion: I found the following solution working for me:
<img
srcset="http://i.imgur.com/hw9O9Ia.jpg 1000w,
http://i.imgur.com/BgLoqRx.jpg 500w"
sizes="(-webkit-min-device-pixel-ratio: 2) 50vw,
(min-resolution: 192dpi) 50vw,
(min-resolution: 2dppx) 50vw,
(-webkit-min-device-pixel-ratio: 3) 33.33vw,
(min-resolution: 288dpi) 33.33vw,
(min-resolution: 3dppx) 33.33vw" />
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
