Optimize Your Images for iOS with Retinize It – A Photoshop Action
One of the common frustrations in a web designer’s routine is the repetitive task of image slicing and ensuring web compatibility. With more gadgets supporting high-definition displays, designers now have to produce two sets of images: one for regular resolution and another for high-definition resolution, adding to the workload.
If you face this issue, Retinize It might be the tool you need.
Retinize It is a Photoshop action created by Artiom Dashinsky. This free plugin efficiently slices and scales images for HD screens, potentially saving you hours, if not days, of work.
Convert PSD to CSS Codes Easily With CSS3Ps
Photoshop isn't only the popular choice for photo editing, it's also a good choice for designing a website.... Read more
How to Use Retinize It
To get started, download the plugin from Retinize.it and double-click the file to add it to Photoshop.
In Photoshop, go to the Windows > Actions panel. You will see two new actions: “Slice it!” and “Retinize It!” Here’s what each action does:
Slice it – This action slices layers into web-compatible images.
Retinize It! – This action performs two tasks: first, it saves images at their normal size; then, it scales the images to double their size (2x) for high-definition screens.
To test Retinize It, we used a weather icon set by Adam Whitcroft. We selected one of the layers and ran the Retinize It! action.
The first process saved the image at its normal size.
After saving the first image, the second action scaled the image to 2x for the Retina display. As shown in the screenshot below, the icon was scaled up by 200%.
We inserted @2x in the filename before the file extension. Apple uses this suffix to pick up higher-resolution images and serve them on Retina displays. You can also use Retina.js, which performs a similar task by serving images with the @2x suffix on high-definition screens.
Note: It is highly advisable to use Shape or Smart Object layers to retain image quality.
Final Thoughts
Retinize It is a valuable tool for web designers, reducing the workload involved in slicing and creating images for high-resolution use. For more information, check out the following references:
- Supporting High-Resolution Screens In Views – iOS Developer Library
- Towards A Retina Web – Smashing Magazine