Responsive Design: Retina Images

In a recent webinar, I discussed Listrak’s approach to responsive design and mobile engagement with best practices for navigation, text size, stacking and resizing content, retina graphics, and the use of media queries for mobile styling. There were many great questions asked by our viewers following the webinar, but the two topics that were most popular seemed to be retina images and stacking content. In the paragraphs to follow, I will review these topics and provide a clearer understanding of how they work and why they’re important.

Retina Images

You may not realize it, but you probably look at a retina screen every day. Most smart phones, tablets, newer models of laptops and even desktop monitors have high-resolution displays. These high-res displays jam 2 or 3 times the number of pixels into a small screen, enhancing the quality of photos and making text clearer and easier to read. However, we need to make sure our graphics, text, and photos are optimized for these higher density screens.

The most common pixel density for retina is 2x, meaning there are 2 times the number of pixels per inch. A screen that is 320 pixels wide will be 640 pixels across, and because of this, images need to be double in size to appear crisp on a retina screen. Images that are not scaled correctly will appear blurry and unfocused on a retina screen. A 200px wide image needs to be 400px wide to match this resolution. In email, we achieve this clarity by doubling the size of important graphics as well as images that contain text.

Below is a sample Listrak email. The first example shows the Listrak logo and social media icons saved at their normal size; note how they look blurry on a smart phone with a retina screen.

When the images are saved at double their natural size, they will be optimized for the 2x resolution of a retina screen. It’s important to note that images must be large enough to be saved at double their natural size, or be vector graphics that can be scaled without distortion.

The Listrak logo, for instance, is being forced to display at 175 x 38, but the natural size of the image being referenced is actually 350 x 76. A retina device will be smart enough to use the larger referenced size, yet still display the image at the size specified in the <img> tag.

Consider the file sizes of your images. Make sure when saving for web that you choose the most appropriate file type and quality. Gifs are typically better for flat graphics and text, while Jpgs are better for photos. Doubling images for retina will increase the file size of your email and cause a slower load time if it isn’t optimized correctly.

This final example shows an image that is large enough on the desktop version of the email to scale to half its size on mobile and be optimized for retina.

The desktop image is being displayed at 500 x 400. A media query was added to style our email for screen sizes less than 480px, and a class ofmainImage was added to the <img> tag. Now we are able to style the class with CSS so that our image will shrink to 250 x 200 on a mobile screen — half the size of the image’s natural size — and also be optimized for retina.

Internet Marketing Products

Affiliate Tools HQ Membership SiteA Membership Site For Online Marketers Who Are Serious About Making Money Online. Developed By Respected Online Marketers, Paula And Wanda, From Affiliate Blog Online.

CPA Method Core SPECIAL14 Year Old kid cracks into a new internet marketing goldmine and banks daily from the travel industry. Find out how...

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, we will receive an affiliate commission. Regardless, we only recommend products or services we believe will add value to our readers.

Post navigation

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Make Money Online

BECOME A DIGITAL NOMAD: 15 JOBS TO MAKE MONEY ONLINE - YouTube

The 20 Rules of Money

Internet Marketing Training

Over the last several days, if you’re lucky enough to be on my list, you’ve received several educational emails about the power of belief and how to make your first money online. You see a lot of successful business people who manage to create success after success after success. Some big name industry titans even …

How To Build a Loyal Audience to Generate Inspiration From Within Your Community

Internet Marketing Products

CPA Method Core SPECIAL14 Year Old kid cracks into a new internet marketing goldmine and banks daily from the travel industry. Find out how...

Affiliate Tools HQ Membership SiteA Membership Site For Online Marketers Who Are Serious About Making Money Online. Developed By Respected Online Marketers, Paula And Wanda, From Affiliate Blog Online.