HiDPI/Retina — What it is, and how to use it in your marketing:

What is HiDPI and what is a Retina display?

In 2010, the first Retina Display was introduced with Apple’s iPhone 4.  This was the first commercially successful device having a display made of pixels that are smaller than the human eye can distinguish at a normal viewing distance.  This class of displays is called HiDPI, or High Dots Per Inch. 

Text and artwork on a HiDPI screen looks crisp, clean, and natural⁠ — you can see more details in a photo without having to zoom in.  These screens blur the line between digital and print because they are effectively capable of showing as much detail as the printed page.  

Today, HiDPI displays are everywhere.  They’re standard across all high and mid-range smartphones, and even prevalent amongst lower-end devices.  Earlier this month, Apple made Retina displays a standard feature across all their laptops. And as large high-resolution displays become less expensive, more people each year are finding it affordable and sensible to replace their old 720p and 1080p televisions with 4K screens.  


How to take advantage of HiDPI in your marketing

Since HiDPI displays have become ubiquitous, there has never been a better time to put in the effort to support them.  

When developing video content, such as a television commercial, investigate the cost of producing your content at 4K.  Even if you only run the commercial on air at 720p, you can run the 4K version of the ad on YouTube or other streaming platforms.  Or you can upload and share it to YouTube.  

If you don’t have your website or online advertising optimized for HiDPI, images will still display, but they’ll look a little blurry or pixelated on a device with an HiDPI screen.

If you are advertising online, make sure you provide a file with the highest resolution possible that the ad network can support.  Look for a network that supports responsive display ads. Consider using HTML5 ads, for a fast-loading experience that can even include animation.  

On your website, you can follow a few extra steps and quick guidelines to ensure that your images always look crisp and clean, and that visitors see your content in the best light.  

Here are some tips to make sure your website and its images always look their best:

  1. Display logos and other graphical elements in SVG (Scalable Vector Graphics) format.  If you can’t get the logo in this format, be sure to at least use a PNG that is two times (2x) as large as you intend to display it.  
  2. Photos and graphics that are not available as SVG should have multiple sizes of images created.  Use the srcset attribute to automatically deliver the size of image that works best in the situation. This will ensure that your website loads promptly and doesn’t waste your users’ time and bandwidth on downloading unnecessarily large images.
  3. Use a platform like WordPress to build your website.  WordPress will take care of generating multiple sizes of your image and automatically use the srcset attribute to ensure that images always display at optimal sizes.  
  4. If possible, do not include any text in images.  Use HTML/CSS to display all text. There are hundreds of free fonts available from websites like Google Fonts and Font Squirrel and you can use CSS for a wide variety of effects on the text, such as font shadows, blending modes, blur, and more.  
  5. Make high resolution sizes of images available and ensure they’re properly supported for larger devices, such as HiDPI laptops and 4K TVs.  

Following these tips will ensure that your content and branding looks great across all devices, from smartphones to 4K TVs.  If you would like help implementing HiDPI in your marketing, give Concept Marketing a call today!

Join our newsletter.

From time to time we send out our newsletter, filled with all sorts of the latest news and fun. We would be happy to include you.

Leave a Reply

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


Contact Concept