From the course: Responsive Images

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

How responsive images work

How responsive images work - CSS Tutorial

From the course: Responsive Images

Start my 1-month free trial

How responsive images work

- In an ideal world, when you visit a web page your browser should be able to download only the content it needs and nothing else. That's what responsive images are trying to achieve. In a previous movie, I gave the example of a page with a full-bleed featured image. Now, let's look at how using responsive images would change that situation. In simple terms, responsive images work by providing the browser with options in the form of a list of different image files of different sizes. The browser figures out how big the area where the image suppose to be displayed is, and then picks the appropriate image file from the list. In our example, we would provide the browser with responsive image markup and three image options. A large image for big or high-resolution displays, a medium image for medium displays, and a small image for small mobile devices. When the page is visited by device, the browser figures out how big the space for the image is, and then pulls down the most suitable…

Contents