Retinize It – Photoshop Action To Optimize Images For iOS

One of the peeves of a web designer’s daily routine is to sit down and do repetitive image slicing, and making sure the images are web-compatible. With more and more gadgets supporting high-definition display, this situation adds more workload to an already boring job as designers have to produce 2 sets of images: one for regular resolution, the other for high-definition resolution.

If you are one of the designers who face this problem, here’s a handy tool that you might just be interested in: Retinize it.

Recommended Reading: Convert PSD To CSS3 Easily With CSS3Ps

In a nutshell, Retinize It is a photoshop action. Create by Artiom Dashinsky, this free plugin slices and scales images (repetitively) for HD screens. It will save you hours on the job, if not days.

Using Retinize It

To use the plugin, hop over to Retinize.it to download the plugin, then double-click the file to add it into Photoshop.

Go to the Windows > Actions panel in Photoshop and you will noticed that two actions, "Slice it!" and "Retinize It!" have been added. And here’s what they each do:

Slice it â€" As it’s name suggest, this action slices layers down to web-compatible images.

Retinize It! â€" This other action on the other hand, does two things. First, it saves images in normal size, then it scales images to two times larger (2x) for high-definition screens.

To see how Retinize It fares, we tested it with this weather icon set by Adam Whitcroft. We selected one of the layers and ran the Retinize It! action.

The first process saved the image in normal size, as expected.

After first image is saved, it proceeded to run the second action, scaling the image 2x bigger for the Retina display. As you can see in the screenshot below, the icon has been 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 those in Retina display. (You can also use Retina.js in conjunction, which does a similar task â€" serve image with @2x suffix in high-definition screen.)

Note: It is highly advisable to use Shape or Smart Object layers in order to retain the image quality.

Final Thought

Retinize It is a recommended tools for web designers. It will reduce the workload when it comes to slicing and creating images for high-res use. For more on this subject, you can head over to the following references.