From the course: Responsive Images
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Preparing images for responsive display - CSS Tutorial
From the course: Responsive Images
Preparing images for responsive display
- Before writing responsive images markup, we have to prepare the images themselves for responsive display. Because remember, we're no longer working with individual image files, but rather, an array of different-sized versions of the same images that are then served up to the browser, and it's the browser that will decide which of these image files are gonna be used. This means we have to make some decisions about how we're gonna split up these images, and what sizes we are going to serve up. Consider this example. We have a standard, responsive web design where the widest the image can possibly be on the screen is 1200 pixels. If you go down to smaller screens, like say, a tablet, you might have an 800 pixel wide display. And on a cell phone, the display may be as small as 480 pixels. Now we have to decide how many image files we're gonna serve up, and also where we're gonna make those splits, so how big are each of those images gonna be. But there's an additional challenge here…
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.