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 - CSS Tutorial
From the course: Responsive Images
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.