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 - CSS Tutorial
From the course: Responsive Images
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…
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.