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

Preparing images for responsive display - CSS Tutorial

From the course: Responsive Images

Start my 1-month free trial

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…

Contents