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.
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:
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.
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.
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.
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.
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:
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:
If you need to adjust the size of your artboards, you again have multiple options:
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.
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:
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:
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:
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.
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.
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:
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
The post How to Create Retina Display Image Assets for Better Looking Websites appeared first on Elegant Themes Blog.