Skip to contentSkip to footer

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

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane UI