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 <picture> element

Preparing images for <picture> element - CSS Tutorial

From the course: Responsive Images

Start my 1-month free trial

Preparing images for <picture> element

- Based on mockups and experimentation in the browser, you should be able to figure out roughly what kind of layouts and also what image sizes you're going to be tarketing with your picture elements. Once that's done, you can start creating preliminary images that you'll be using as you build out the page. And here it's important to remember that as you build it out, unless you have an actual set in stone design and layout already, you might have to regenerate these images later to get the exact right sizes. In the Exercise Files for this movie, 04_03, you'll find a folder called art that has the art direction example in it and within that folder, you'll find the images folder and here you see how I've handled the different images. You can see I have three different images, the elemonkey-square, elemonkey-tall, and elemonkey-wide and that I've created two versions of each of the images. One for 1x screens and one for 2x screens, and have named the one for 2x screens 2x. Now when you…

Contents