How to Create Retina Display Image Assets for Better Looking Websites

You’ve invested a lot of time into making your new website perfect, so why does it look so fuzzy when you view it on your iPhone? You made sure to use beautiful high quality images but they don’t seem to be displaying correctly at all. Cue panic!

Many people don’t realize that newer devices – especially those from Apple – use advanced display technology that affects how images are displayed. Fortunately, there are some tricks you can use to make sure your images are optimized to ensure your website looks perfect on devices like your iPhone.

This article will introduce the topic of retina display and how it impacts your website images, then show you how to create image assets that will display well on retina screens.

Retina Display Images Explained

Device screens have continued to improve in quality over the last several years, and Apple in particular have been working on making their screens extremely clear and viewable – in fact, ‘Retina Display’ is a brand name from Apple used to describe the screens of their newer devices.

Retina screens aim to display text and images as sharp as possible, with no pixels visible to the naked eye. The challenge for designers is that retina displays is not a standard – it varies depending on the size of the device’s display (for example, a watch screen compared to a tablet), and how close a typical user would be to the screen.

When talking about retina displays we have to think about pixel density, which is the number of pixels a display can fit into a fixed distance. This is not the same as resolution, which is the number of pixels across the entire height and width of a device. A smaller screen (such as an iPhone) with the same resolution as a larger one (such as an iPad) would have a greater pixel density.

Dividing the physical width of the display by the number of pixels displayed horizontally gives us the pixels per inch (ppi, also called dpi for dots per inch). ‘High DPI’ is used to refer to any device that has over 200 pixels per inch. This includes all retina display devices from Apple, and some devices from other manufacturers. For a more in depth explanation, check out this article on the Designer’s Guide to DPI.

Traditionally, web graphics were optimized at 72dpi. An image at that density displayed on any high DPI device (especially a retina display) will be displayed in one of two ways:

1. As a fraction of the size if shown at the device’s DPI.
2. Shown at the original dimensions with extra pixels guessed (interpolated) and filled in reducing the quality of the image.

Images not optimized for retina displays will show pixelation like the image on the left.

This means that for the best quality image display on retina display devices, you need to be working with higher resolution images. This ensures that the image can be displayed at a pixel density appropriate for these newer screens. Let’s take a look at how you can do that within your Photoshop.

How to Use Photoshop to Create Retina Display Images

Working with images at double or quadruple the resolution means you may need to zoom in to be able to see any fine detail, but extremely large image files can create performance issues and file storage challenges.

The solution for most designers has been to either create multiple layers and groups, turning them on and off as needed using the comps feature of Photoshop, or to work at the the original resolution and export the sizes they need (using an action like retinize.it).

The challenge with both of these methods is that you cannot see multiple images at the same time. If you need to view the differences in the images at the necessary sizes, you have to switch between them or export and then rework.

Fortunately for us Photoshop lovers, Adobe has added functionality that makes creating multiple images even easier. Now you can create multiple canvases side by side using the artboard feature, and create multiple image sizes using Generate. Let’s see how this works to create images for retina displays.

1. Create Your First Artboard

The new Artboard tool, introduced in Photoshop CC 2015, can be found hidden behind the Move tool. You can either click on the tool in the menu, or use Shift+V to switch between Move and Artboard:

To create an artboard, click and drag an area. The new artboard will be displayed in the Layers panel with a default name of Artboard 1.

2. Set Up Your Artboard

You can add any layers you need to your artboard, and they will be nested similar to layer groups – enabling you to create an appropriate layer structure. We would suggest adding your various assets, such as shapes and type, so that they’re positioned as you need them before moving on to the next step.

3. Duplicate Your Artboard

Once your first artboard is set up to suit your needs, you can duplicate it using the contextual menu. Right-click on Artboard 1 in the Layers panel and select Duplicate Artboard. This creates another artboard of the same size and position, containing the exact same layer structure with all the included assets:

Duplicating your artboard gives you a pixel perfect copy of the layout.

4. Position Your Artboards

The big advantage of using artboards is being able to see all of your images at the same time. To do this, just position your artboards as needed. There are several ways to move an artboard:

1. Use the Properties panel that displays when an artboard is selected to enter the X and Y coordinates for the top left corner of the artboard.
2. Drag the selected artboard to any position inside Photoshop. The artboard is smart guide enabled, so you can automatically align multiple artboards and their positions will lock to the previous spacing.
3. Use your keyboard arrow keys to move a selected artboard. An arrow key by itself will nudge the board by one pixel, while holding Shift+Arrow will move it by ten pixels.

5. Resize Your Artboards (If Needed)

If you need to adjust the size of your artboards, you again have multiple options:

1. Resize them using the handles that appear when you select an artboard.
2. Use the Options panel just below the File menu to choose preset sizes, set custom widths or heights, or switch between portrait and landscape orientation.
3. Use the Properties panel that displays when an artboard is selected to change the size and access the preset sizes.

You can choose a preset size for your artboard using the Properties tab.

6. Create Your Art

You can now work with your artboards, replacing image assets and making changes as needed. Assuming your original setup went well, you’ll now have pixel perfect images with all assets in the right place.

7. Set Up the Generate Tool

Generate enables you to export artboards, layers, or groups by using a special naming syntax. It acts as a Save for Web shortcut. To ensure Generate is turned on for your PSD go to File > Generate > Image Assets:

8. Rename Your Artboards

Generate works by saving image assets as you work based on options you set in the name of the layer group – or in this case, your artboard. There are a few options you can set:

• File format. Add an extension ( such as -opt.jpg, .gif or .png) to save the relevant file – for example, header-main.png. The image assets will be saved in the same folder as the PSD file, but with an -assets suffix.
• File compression. After the extension, you can add a figure denoting the level compression used. For opt.jpg you can use percentages, and for .png use 8, 24, or 32 for the respective bit formats – for example, header-main.png8.
• Output scale. You can set the scale of the output by adding either the percentage, or pixels (width by height) before the image name (e.g. 100% header-main.png8).
• Multiple images. You can export multiple images from the same artboard by using either a comma or a plus sign to separate the image names. Each image can thus have its own options so long as each image name is unique – for example, 100% header-main.png8, 200% header-main.png8.

Combining these options enables you to consistently create complex image assets from your artboards:

If standard images are needed for all of your artboards, the Generate tool enables you to create a default setting to apply to each one. To create this setting, add an empty layer at the top of your document with the following options:

• Default keyword: The name must start with this to let Generate know to use it as the default.
• Output scale: As before, set the scale of the output with a percentage or pixels (width by height).
• Folder/suffix: Set the folder name where images should be saved, and a suffix to add to the filenames.

By adding multiple options, you can automatically create the images you need for retina displays – for example, default 100% end/@1x, 200% end/@2x, 300% end/@3x. You can then add extensions to any boards you want exported using the default option.

If you use other design tools such as Sketch, they have their own export mechanisms – but if you are a Photoshop fan, this workflow will drastically cut the amount of time it takes you to create the multiple images needed for retina displays.

How to Optimize Your Retina Display Image Assets

File size is always a major consideration when creating images for your website. Images have to be loaded into your visitor’s browsers, so the larger the file sizes the slower your site will load. A beautiful website that takes forever to load will likely not be seen by your visitors as they won’t want to wait.

You can start optimizing your website images by making sure you are using the relevant options when saving your files in Photoshop. As we covered in the workflow above, you’ll be saving your images as either JPEG or PNG files. The JPEG format is better for photographs with many colors as it uses compression to reduce the file size. The PNG format works best for screenshots and design images such as icons and buttons, but it uses lossless compression so the file sizes are higher.

WordPress also offers you some assistance in optimizing, by creating multiple image sizes when you upload images to your WordPress site. This helps to ensure that you use an appropriate size image – for example, thumbnails would be used in listings of multiple posts. Additionally, there are image optimization plugins to help optimize any images as they are uploaded.

Conclusion

It’s all very well selecting amazing, high-resolution images for your website, but if you haven’t prepared them correctly before uploading, they could look unexpectedly pixelated when viewed on newer retina display devices.

Creating retina display images in Photoshop is a piece of cake – let’s recap the steps:

1. Create your artboards, taking care to setup, duplicate and position them correctly.
2. Resize your artboards if needed, before creating the images in question.
3. Setup the Generate tool to assist in exporting your images.
4. Rename your artboards within Generate, setting them up as default options if necessary.

The tips shared above should help you understand how to create images that are optimized for display on newer device screens – enabling you to create beautiful images that look the way you expect on all screens.

If you have some experience working with retina display image assets, we would love to hear your tips and tricks for creating and optimizing them by subscribing to the comments section below!

Article thumbnail image by Blablo101 / Drawn Keeper / shutterstock.com