A quick look at exporting retina ready images using the compressive JPG technique.
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.
This is what it should look like when it’s done:
Start the lesson by forking and cloning the retina-images repository.
Fork & clone the “retina-images” repo.
The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.
This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.
To get started on this project we need to download a few PSDs to use on the website.
After downloading the PSDs and cloning the repo you should have a folder structure like this:
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!
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:
Now that we know the maximum width our images will display at we take that width and double it:
480 × 2 = 960
960 × 2 = 1920
So the formula for compressive JPGs is:
(maximum width in browser) × 2 = (image dimensions in Photoshop)
With the correct dimensions we can now resize the images so they match the retina width we want.
bee-face to 1920px, with a resolution of 72bee-butt to 960px, with a resolution of 72With 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.
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.
Finally we’ll point our HTML to the new images.
⋮
<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>
⋮
Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).
After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.