Complete Guide to Responsive Images!

A Short Intro to High-Density Screens

A Pixel is Not a Pixel

We tend to think that in mobile devices, the loaded images should be smaller since the devices’ width is smaller. But that isn’t always true.

The Display Density Descriptor Method

<img src="cat-200px.jpg" alt="sugar free cat" width="200"
srcset="cat-200px.jpg 1x,
cat-400px.jpg 2x,
cat-600px.jpg 3x,
cat-800px.jpg 4x">

The Width Descriptor Method and the Size Attribute

sizes="(max-width: 399px) 50vw,
(min-width: 400px) and (max-width: 900px) calc(30vw - 40px),
100vw">
<img src="cat.jpg" alt="cat on a watermelon" 
srcset="cat-200px.jpg 200w,
cat-400px.jpg 400w,
cat-600px.jpg 600w"
sizes="(max-width:800px) 30vw, 600px">

<Picture> Element

<picture> Art Direction Method

Art Direction Method — different image according the viewport width of the screen.
The source element inside the picture targets a specific image
<picture>
<source media="(min-width:600px) and (max-width:1200px)"
srcset="images/sinai-medium-screen.jpg">
<source media="(min-width:1201px)"
srcset="images/sinai-large-screen.jpg">
<img src="images/sinai-small-screen.jpg" alt="Unicorn Pool Float">
</picture>

<picture> for Image Types Method

many of Image types
In the past, SVG didn’t work in older versions of IE, and thus, situations with 3 image types occurred.
<picture>
<source type="image/svg+xml" srcset="logo.svg">
<source type="image/webp" srcset="logo.webp">
<img src="logo.png" alt="investing.com">
</picture>

Responsive Images in CSS

The image-set function

background-image: image-set( url("bg.png") 1x,
url("bg-2x.png") 2x );
background-image: url("bg.png"); /* IE / Edge / Firefox *//* Chrome & Opera */
background-image: -webkit-image-set( url("bg.png") 1x,
url("bg-2x.png") 2x);
background-image: image-set( url("bg.png") 1x,
url("bg-2x.png") 2x);

Density Media Queries

Future Features for Responsive Images

background-image: image('myimage.webp#xywh=0,20,40,60');
.help::before {
content: image("try.webp", "try.svg", "try.gif");
}

Final Words

Resources

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store