retina-images.md

layout	title	desc	markbot_submit	hide_show_for_marks	extra_tutorials	goal	fork	steps
lesson	Retina images	A quick look at exporting retina ready images using the compressive JPG technique.	true	true	title url Background & retina images slide deck /courses/web-dev-3/background-retina-images/ title url Using images using-images title url Responsive & retina images responsive-retina-images title url highlight Images cheat sheet images-cheat-sheet true	before We’re going to explore how to export images so they’re clear on retina screens. The technique we’re going to look at is called “Compressive JPGs”—essentially we make them double the width and scale them down while significantly reducing the quality.	url https://github.com/ltw-webdev-3/retina-images/fork	title before folders after Project setup To get started on this project we need to download a few PSDs to use on the website. ### [Download these PSDs.](https://assets.learntheweb.courses/web-dev-3/retina-images-download.zip) After downloading the PSDs and cloning the repo you should have a folder structure like this: label type retina-images-lesson folder label type indent prod folder 1 label indent bee-butt.psd 2 label indent bee-face.psd 2 label type indent notes retina-images folder 1 This is the cloned GitHub repo label type indent images folder 2 label indent placeholder-3by2.svg 3 label indent placeholder-3by1.svg 3 label type indent fade notes css folder 2 true We’re not going to touch the CSS label indent fade grid.css 3 true label indent fade main.css 3 true label indent fade modules.css 3 true label indent fade type.css 3 true label indent index.html 2 *Notice how the PSD files are not inside our Git repository, they’re in a folder beside the Git repository named `prod`.* **Creative Suite documents never go inside your Git repository!** title before Determine the image width So first, open up the `index.html` into your browser—you should see two placeholder images.  We need to determine the maximum width the images will ever be. *But we first have to pick a maximum size we want to view the site at.* Since we’re using an `xl` size media query, `90em`, in most of our websites let’s use that as the upper limit. **So resize the window so it’s exactly `1440px`.** Use the developer tools to measure the widths of each image—you should get these sizes:  title before multi_code Calculate the retina width Now that we know the maximum width our images will display at we take that width and double it: code 480 × 2 = 960 960 × 2 = 1920 code_before code So the formula for compressive JPGs is: (maximum width in browser) × 2 = (image dimensions in Photoshop) title before Resize the images With the correct dimensions we can now resize the images so they match the retina width we want.  - Resize the `bee-face` to `1920px`, with a resolution of `72` - Resize the `bee-butt` to `960px`, with a resolution of `72` title before Save for Web With the images properly sized we’re now going to export them properly with “Save for Web”. The important part of exporting when making compressive JPGs is to make the **quality really low**, 20% low. Since the images will be scaled down by the browser the quality degradation won’t be noticeable.  title before Smush the images Because performance is probably the most important design consideration for The Web we need to make sure the images are as small as possible. Drop ’em into ImageOptim and remove all the extra cruft from the JPGs so they can be as small as possible.  title before code_lang code_file code lines Point to the new images Finally we’ll point our HTML to the new images. html index.html ⋮ <div class="grid"> <div class="unit xs-1 s-1 m-1-3"> <div class="embed embed-3by2"> <img class="embed-item" src="images/bee-butt.jpg" alt=""> </div> </div> <div class="unit xs-1 s-1 m-2-3"> <div class="embed embed-3by1"> <img class="embed-item" src="images/bee-face.jpg" alt=""> </div> </div> </div> ⋮ num fade 2-4 true num fade 6-9 true num fade 11-13 true