In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutio

Responsive images - Learn web development | MDN

submited by

Style Pass

2021-06-11 12:00:09

In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across different devices. Responsive images are just one part of responsive design, a future CSS topic for you to learn.

Let's examine a typical scenario. A typical website may contain a header image and some content images below the header. The header image will likely span the whole of the width of the header, and the content image will fit somewhere inside the content column. Here's a simple example:

This works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on Github.) We won't discuss the CSS much in this lesson, except to say that:

However, issues arise when you start to view the site on a narrow screen device. The header below looks ok, but it's starting to take up a lot of the screen height for a mobile device. And at this size, it is difficult to see the people within the first content image.