For a sharp picture on a desktop you need a much larger image than on a mobile phone. If you just add images for the desktop size, your mobile users will end up downloading large images, wasting their bandwidth and slowing your site down. With responsive images, you can offer a set of images at different sizes and quality (and even content), and the browser will decide which is the best to show to the user.

You can do this by using the srcset and sizes attribute on an <img> element, or by using the <picture> element and adding <source> elements to it. With this, you can vary the size of images you send, the pixel density (so mobile phones with sharper screens get sharper images), the type of image (you can send a webp to browsers that support it, and a jpg to browsers that don't) or even do art direction, where on smaller screens you zoom in to a specific part of the image.

A really good overview of how to apply these techniques can be found on MDN: responsive images on MDN.

The responsive design glossary explains the many terms used in responsive design and development. It's a practical reference for anyone getting started with responsive design and development.

Get an overview of all responsive design terms

It's time to stop resizing your browser.

Create and test truly responsive websites and apps faster than ever before.

Learn more
Polypane screenshot
By using our site you agree to our privacy policy and disclaimer