Blog

How to Create Images That will Display Perfectly on Retina Screens

March 7th, 2017

Neville Greenwood

Frustration is born from fuzzy visuals on your iPhone, particularly when you’ve spent so much time ensuring your website is perfect. You used high-quality images, but now they’re not displaying correctly. Why?

Devices being introduced now days, particularly Apple, use advanced display technology which can sometimes affect the ability of an image display. But there are techniques to use so that the images you use on your website are optimised and will be displayed perfectly on any iPhone. There is such a thing referred to as Retina Display, and you’ll be shown how to create image assets that will display perfectly on Retina screens.

Who/What is Retina Display?

It was Apple who came up with the term ‘Retina Display’ which is now a brand name used to describe the screens of their newest devices. These new screens are extremely clear and viewable. Retina screens do not display pixels that are visible to the naked eye but deliver text and images as sharply as possible. Due to its variance in size, Retina Display is not a standard screen. A good example is a watch screen compared with a tablet and how close to the eyes a typical user would have the screen to enable readability. Pixel density equates to the number of pixels a display can fit into a fixed distance. Not the same as resolution which is the number of pixels across the entire height and width of a device, the screen of 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. The Designer’s Guide to DPI will impart more information. So for the best quality image display on retina display devices, working with higher resolution images ensures that the image will be displayed at a pixel density appropriate for the later screens.

Using Photoshop to Create Retina Display Images

While you’re working with images that are double the resolution, you’ll probably find you have to zoom in to see the fine detail. Extremely large images files tend to bring a lot of challenges with them when it comes to storage and performance. Many designers have had to resort to multiple layer creation and groups then turning them on and off while using the comps feature in Photoshop. Or they’ve worked on the original resolution exporting the required sizes using an action like recognise.it.

With both methods, you cannot see multiple images at the same time. You must switch between them or export and then rework them. Time consuming at it’s best. But now Adobe has a function that makes these actions easy and instantaneous. You have the ability to have a multitude of canvases on your screen using the artboard feature. From there you’re able to produce multiple image sizes using Generate.

How does it work for retina displays?

Generate an Artboard with the Artboard tool which is found in Photoshop CC 2015, is concealable by using the Move tool. Either click on the tool in the menu or use Shift+V to switch between Move and Artboard. Now to create an artboard, click and drag in an area and the artboard is displayed in the Layers panel under a default filename Artboard 1.

Setting Up An Artboard

Add layers to your artboard, and they’ll be nested in layer groups that will enable you to produce layer structure. Whilst adding your shapes and type, have them appropriately positioned before introducing your next step.

Make a Duplicate of Your Artboard

Duplicate your first artboard using the contextual menu. Right-click on Artboard 1 (the default file) in the Layers panel then select Duplicate Artboard. A mirror image of what you’ve created is produced; thus the same artboard; same size and position with the same layer structure are displayed.

Now Position Artboards

Having the advantage of seeing all your images is being able to position your artboards as required. You can move them in several ways.

Use the Properties panel that is displayed when an artboard is selected. Enter the X and Y coordinates for the top left corner of the artboard.

Drag the selected artboard to any position inside Photoshop. The artboard will automatically align multiple artboards, and their positions will lock in at the previous spacing.

Use the arrow keys on your keyboard to move a selected artboard. An arrow key by itself will nudge the board by one pixel. Shift+Arrow will move it by ten pixels.

Resize Your Artboards

You have the option to resize your boards if you require.

Resize them by clicking on the handles that appear when you select an artboard.

The Options panel below the File menu lets you choose preset sizes, set custom widths or heights, or switch between portrait and landscape orientation.

To change sizes, select the artboard, then the Properties panel that is displayed. Change the size and access the preset sizes.

Set Up the Generate Tool

Having created your artboards, you have the ability to export them, the layers and or groups via Generate 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

Rename Your Artboards: Based on the options you set in the name of the layer group, your work is saved as you work.

You can set your options by:

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 are 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. Your scale is set by adding either the percentage or pixels (width by height) before the image name (e.g. 100% header-main.png8).

Multiple images. By using a comma or a plus sign, you can separate image names when you export multiple images from the same artboard. So long as each image name is unique, for example, 100% header-main.png8, 200% header-main.png8, each image can have its own options.

If you require standard images for all of your artboards, using the Generate tool gives you the ability to create a default setting to apply to each one. By adding an empty layer at the top of your document, you create this setting 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.

Adding several options lets, you create the images you need for retina displays. For example, default 100% end/@1x, 200% end/@2x, 300% end/@3x. Now you can add extensions to any boards you want to export by using the default option.

How to Optimise Your Retina Display Image Assets

Always consider file size when you’re creating your website images; they have to load into your visitor’s browser. Slow loading images are a frustration and irrespective of the gorgeous website you’ve created, if it’s a slow download, it won’t be seen. Visitors don’t have the time to wait.Optimise your website images by ensuring you are using the applicable options when saving your files in Photoshop. Save your images as JPEG format which is preferred for photographs with many colours. It uses compression to reduce the file size. And the PNG format works best for screenshots and design images such as icons and buttons, however, it’s file sizes are larger.WordPress offers some assistance in optimising as it produces additional image sizes when uploaded to your WordPress site. It ensures the appropriate size image; thumbnails, for example, would be used in listings of multiple posts. Additionally, there are image optimisation plugins to assist optimisation as the images are uploaded.

Winding it Up

You need to consider all the options of preparation for using high-resolution images on your website. Consider download speed as a main for the finished product and all that work that went into will drift through the ether without anyone enjoying the scenery. Think about pixelation viewed on newer retina displays. It is easier to create retina display images in Photoshop one thoughtful step at a time. Without rushing and using each step as detailed above, you will save yourself the heartache of seeing an out of focus image on a display screen.

Recapping the easy steps:

Create your artboards. Set up the Generate Tool to assist in export. Duplicate and position them correctly.

If required, resize your artboards before introducing images.

Set up your files as default then rename them as necessary with Generate.

All the techniques above are designed to assist you to create images that are optimised for display on newer device screens. It’s the step to successful images that you just know are going to look the way you expect them to be displayed on all and new device screens. If you had discovered another click-able action while creating your new and absolutely beautiful website that is a joy to view on a retina screen, we’d love to hear from you by subscribing to the comments section below.