How Web Designers Create Images for Retina Display Devices

Special statement: This article is translated based on Chris Spooner's English article "How to Create Retina Graphics for your Web Designs". The entire translation contains our own understanding and thoughts. If the translation is not good or wrong, please point it out to colleagues and friends. Apple has released more products to suit Retina displays. So far, we know that Apple devices that support Retina screen technology include "iPhone", "iPod", "iPad" and "Macbook Pro". These devices can present users with more delicate, smooth and high-quality image effects, improving the user's visual experience. As a web designer, how do you create these Retina-friendly images for your website? This is what we are going to learn today.

Initially I didn't expect to use larger images to accommodate the huge images on Retina screens, since it is a brand new technology after all. But then I spent some time doing a statistics and realized that Apple's devices accounted for a lot of mobile market share, most of these devices are "iPhone", "iPod" and "iPad", and these devices all support Retina screen technology. Most users of 13- and 15-inch Retina displays surf the Internet through Chrome, Firefox, Safari, and IE. If you need to support Opera, you are catering to a niche audience. (My own website statistics show this situation)

You might think that Retina images only need to be saved with a high resolution (PPI), but this is not the case. All you need to do is save the image at twice the size for Retina displays, so if you save an image at 200x200 pixels (css pixels), you need to save it at 400x400 pixels. These oversized images appear at the same size as the original image, helping to create a smooth and crisp look on Retina screens.

Sounds easy enough, but how do you get the image to double its size?

Design Logos and Icons Using Illustrator

Vector graphics are the perfect solution for creating Retina graphics. If you have a logo or icon as an EPS or Ai file, when you export or copy the image to Photoshop, the vector image can be scaled to any size. The pasted element can be used as a Smart Object which will retain its vector paths, so it can be doubled up and exported as a special image suitable for Retina.

Using Photoshop's vector features

Photoshop is a pixel graphics application, but that doesn't mean it doesn't have the ability to create vector graphics. Each graphic tool can create a vector layer, not just a pixel layer, so all layer style effects are still scalable. If you multiply everything by 2, almost all effects will be scaled up to exactly twice the size.

Enlarging your pixel image

One rule is that as designers we don’t want to scale up an image lightly, but if you want to go back and add Retina images to a site you’ve designed, you don’t want to have to manually recreate every image. Normally expanding an image will result in a blurry and jagged look, but there is a little option in Photoshop for images with a menu option called "Neares Neighbor" that will just barely help you avoid the blurry look and lots of jagged edges so that the image is usable. It will not load until the element has loaded, but it provides a timely replacement.

Design at 200%, then scale down?

You might be thinking, why can’t I just create a web layout page at double the size so I can scale down the elements to create the icons I need. This is feasible in traditional print design theory, but not in web design. Because web design works on a pixel basis to create perfect shapes and lines. Even if we expand the image at a certain ratio and then export it through Photoshop software, the exported image will be blurry in appearance, especially for small icons.

Once you have created a copy of the standard image that is twice the pixel size of the standard image, you can use different methods to load them into your page. Here is a quick way to name files. Put standard images and Retina screen images in the same folder, and name the Retina images by adding " @2x " to the end of the regular image file name. For example, if the regular image file name is "snarf.jpg", we would name the image "[email protected]" on the Retina screen.

Simple javascript method

HTML img tag

Translator's sign language: This is my first time translating a front-end technology blog post. The entire translation was carried out in accordance with the original text, and I added a little personal understanding of the technology during the translation process. If there are any mistakes in the translation, please point them out to me. Thanks!