Pixels, pixels, and more pixels. Retina screens are now everywhere-on new computers, mobile phones, and high-end tablets, and it's not up to us to choose where customers consume their email. To ensure your email looks great on all screens, we're sharing our experts' file size guidelines and preferred methods for optimizing images for these screens. For more information on designing responsive emails, check out our recent webinar that dives deep into design tactics for small screens and touch devices.

So, what is retina?
A retina display is a screen that uses a pixel density high enough that the human eye is unable to discern individual pixels at a typical viewing distance. Devices will vary on exact pixel density, but it basically means there are more pixels per square inch, allowing for a crisper viewing experience. On mobile devices, the most common pixel density right now is 200%, so we recommend designing and coding for that expectation.

Optimizing images for retina:
Be time-efficient, creating an image once:

1. For the best display on mobile devices, create the email's image at double the height and width of your intended on-screen size.
2. When exporting the image in Photoshop, select "Save for web…" and choose a quality of 30%. Normally, we recommend saving at 70%, but this will create a similar effect when this image is displayed at the intended size. For example, if the image is 100x50px in the email, you will need to create the image at 200x100.
3. Use height and width in the <img> tag properties to control the correct dimensions of the image in your email.

Retina tips:

• If you're not the campaign's designer, you may need assistance from the designer or agency/client to get the original file in a larger format to use this technique.
• Using smart objects in Photoshop will allow the ability to separate the item from the email design and resize quickly, even if you built the original email at the usual size.
• You can be selective about the images that have the most to gain in terms of clarity, like logos, icons, and vector graphics, versus a photo.
• This method is not necessary for all the images in the mobile version-just important images or images that have text and need complete clarity, like the logo.

This type of optimization allows the images to render well on mobile retina displays without taking up unnecessary bandwidth. When using our software, keep the final image under 200 KB before uploading. If you tend to use heavily image-based messages, slicing it up into smaller pieces and using defensive design tactics for image-blocking will help keep the attention of your audience and give them a preview of what's in store.

Pixel perfection?
We know that an image is worth a thousand words. Techniques for optimization may vary, so be sure to test different techniques and find what works best for your campaign. For code samples and more useful tips, review our guide on Email Coding Fundamentals within the Email Design Toolkit.