Responsive image using the srcset attribute
suggest changeUsing srcset with sizes
<img sizes="(min-width: 1200px) 580px,
(min-width: 640px) 48vw,
98vw"
srcset="img/hello-300.jpg 300w,
img/hello-600.jpg 600w,
img/hello-900.jpg 900w,
img/hello-1200.jpg 1200w"
src="img/hello-900.jpg" alt="hello">
sizes
are like media queries, describing how much space the image takes of the viewport.
- if viewport is larger than 1200px, image is exactly 580px (for example our content is centered in container which is max 1200px wide. Image takes half of it minus margins).
- if viewport is between 640px and 1200px, image takes 48% of viewport (for example image scales with our page and takes half of viewport width minus margins).
- if viewport is any other size , in our case less than 640px, image takes 98% of viewport (for example image scales with our page and takes full width of viewport minus margins). Media condition must be omitted for last item.
srcset
is just telling the browser what images we have available, and what are their sizes.
img/hello-300.jpg
is 300px wide,img/hello-600.jpg
is 600px wide,img/hello-900.jpg
is 900px wide,img/hello-1200.jpg
is 1200px wide
src
is always mandatory image source. In case of using with srcset
, src
will serve fallback image in case browser is not supporting srcset
.
Using srcset without sizes
<img src="img/hello-300.jpg" alt="hello"
srcset="img/hello-300.jpg 1x,
img/hello-600.jpg 2x,
img/hello-1200.jpg 3x">
srcset
provides list of available images, with device-pixel ratio x
descriptor.
- if device-pixel ratio is 1, use
img/hello-300.jpg
- if device-pixel ratio is 2, use
img/hello-600.jpg
- if device-pixel ratio is 3, use
img/hello-1200.jpg
src
is always mandatory image source. In case of using with srcset
, src
will serve fallback image in case browser is not supporting srcset
.
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents