Hey, everyone! This is Jason and in this tutorial, as part of our series on Blogging Tips, I’ll show you how to create retina ready photos, save them for the web, and then how to import your photos within your blog posts.
The term Retina Ready refers to large, high-resolution photos that are optimized to look their best on the newest phones, tablets, and desktop monitors. The retina screens on these new devices are putting out amazing levels of detail, and new versions are only getting better.
We spend hours preparing a beautiful meal, styling it for the photo shoot, taking pictures, and then editing them on the computer. After all that hard work, you don’t want your content looking outdated or unprofessional right? Of course not, we want our food photography looking excellent. Thankfully the solution is easy!
I first became aware of buzzwords like Retina-Friendly or Retina-Ready when I got my new iPhone. Tech companies such as Apple and Samsung were promoting screen resolution sizes with 2x the pixel density. I couldn’t believe that my new little phone had a higher quality display than my 27″ iMac monitor. When you compare content on a standard screen, you’ll notice that same content appears a little blurry and not as sharp on a retina display.
How to Create Retina-Ready Photos
The most important thing when you’re creating retina ready photos is the actual dimensions of the picture. You want to create photos that are double the standard width.
In our case, Jessica’s content area displays photos at 600px wide by 900px high. All you have to do is multiply the dimensions by two. For example, we have to create photos at 1200px wide by 1800px high to make them retina ready.
Our Content Area
Double the Photo Width
The key here is to start with a larger sized picture and size it to 1200px wide. We do not want to begin with a 600px wide photo and scale them up in Photoshop or Lightroom.
Saving For Web
Since we are creating a photo twice as big, we need to make sure we save a web version with an appropriate file size so that it won’t slow the loading of your blog. It’s important to get into the habit of Saving for Web within Photoshop or Lightroom.
Here are just a few things to keep in mind having to do with the file type, width, and the quality of the photo.
File Type: You want to save your photo as a JPEG. If you’re working with a logo or computer generated graphic those tend to be saved as PNG.
Width: As we covered above, double the width of your photo. In our case, we’re going to use 1200px wide. Check your viewable content area as your photo width may vary.
Quality: When saving your photo you can reduce the image quality to shrink the file size, and if done correctly your photos will still look excellent on a Retina screen.
Let’s cover the basics of saving for web using the two most popular file editing programs…
Saving For Web using Photoshop
When you’ve finished processing and setting the width of your photo, it’s time to save it. On a Mac, the shortcut is CMD+OPTION+SHIFT+S, and on a PC it’s CTRL+ALT+SHIFT+S. Learning these shortcuts will save you a bunch of time.
When the Save for Web dialog box appears, we’ll first want to make sure JPEG is set. Then we want to adjust the image quality until we get the smallest file size with the highest visual quality. I’ve found that a quality setting of between 30 – 50 will result in a file size between 160k to 185k, which I believe to be the sweet spot.
When you’ve got the photo where you want it, hit the Save button.
Saving For Web using Lightroom
The workflow in Lightroom allows you to easily save one or multiple photos at the same time. Just select the number of photos you want to save, and then from the Library Module, click Export. You will be prompted with the following dialog box.
Under File Settings, be sure to set the image format as JPEG, I personally like to use the Limit File Size To option, in which I usually enter in a file size between 160k-185k.
Under Image Sizing, select the option Width & Height from the Resize to fit pulldown. Enter in the dimensions you would like your files to be saved, remembering to double the dimensions for Retina.
Under Output Sharpening, choose Screen as we intend to use these photos for web only. The amount you wish to sharpen is optional based on your personal preference.
If you find yourself editing several photos, I highly recommend setting up a Preset with the above information, this will save you a lot of time in the future.
When you’re ready, all you have to do is hit the Export button.
How to Use Your Retina-Ready Photos Within Your Blog Post
The last part of this process has to do with uploading your new double-width photos to your blog. Upload your photos as you would normally do.
Insert a picture into a blog post at Full Size, in our case at 1200px wide by 1800px high. Then click the Edit icon on the photo. On the Image Details dialog box that appears, under the Size option, select Custom Size, then fill in the dimensions to fit the parameters of your blog’s content area. For Jessica’s blog, we set this to 600px wide by 900px high. Then hit Update and that’s it!
We’re creating a new photo with 2x the resolution and fitting it into the standard content area.
As content creators, it’s important for our photos to both look awesome and load quickly. Now that you know how to do it, you will begin to see how clear and sharp your photos look on Retina displays. Think of it as going from Standard Definition to High Definition Television, once you make the switch, you’ll never want to go back.
Should you go back and update all your previous recipe posts? Well, ideally yes, but depending on how many posts you have that could be a massive undertaking. If you’re feeling ambitious, you can start with updating the photos for your 10 most popular recipes.
One of major plus side to doubling your photo dimension size is that you’re going to notice that your newer file sizes are smaller than your existing 1x photos. Going Retina-Ready is a win-win, higher quality photos that will load faster, jackpot!
Just for the record, this manual solution is not the only way to create retina ready photos. The choice is yours on how you want to implement this strategy as there are WordPress plugins and CSS code snippets that could be used to automatically handle this. I personally prefer fewer plugins and fewer lines of code.
Have you started to make your content retina-ready?