Solve Your Website’s Retina Display Problem with These Tools
by Al Gomez
Retina Display is a registered trademark, a brand name, and a technology used by Apple for its IPS panel and OLED displays series that have a higher pixel density than its traditional displays. Steve Jobs launched the first Retina display as iPhone 4’s feature in June 2010. He said:
It turns out there’s a magic number right around 300 pixels per inch, that when you hold something around to 10 to 12 inches away from your eyes, is the limit of the human retina to differentiate the pixels.
To make the display of texts and images extremely crisp, Apple uses the HiDPI mode to double the width and height of the user interface widget. As a result, pixels become invisible to the naked eye.
In other words, a Retina Display screen is created by two factors: pixel density and viewing distance. Pixel density is how tightly packed the screen’s pixels are. An image with a greater pixel density will be smoother and sharper. While viewing distance is the distance between the user and the device. Displays that are seen from a much closer distance need a greater pixel density so the eyes won’t see the pixels.
This innovation is a huge leap in the displays in the digital industry since it can now compete with the sharpness and smoothness of printed text and photos.
However, what if your website or displays are not retina display ready? In this world dominated by Apple and HD, you have no choice but to adapt and be flexible.
Before getting down to the tools, let us find out why most people love retina display and why some prefer not to bother about it.
The Advantages of Retina Display
- Images on displays are as sharp as it appears in print. Colors are bright and vivid because there are more pixels
- Retina ready displays have smooth fonts no matter how far you zoom into them
- Users won’t see pixels or think images and fonts are ‘pixelated’. If your display or site is not Retina display ready, people will think it is ugly.
- Reduced eye strain due to sharper, clearer, and smoother images
The Disadvantages of Retina Display
- Devices with Retina display are more expensive
- Retina display consumes more power
- Some apps and web content are hard to optimize for Retina display
Although Retina displays have only been around for a few years, we all know that will be part of the future. After all, everyone likes nice, crisp, and clear images, right?
No ‘one size fits all’ tool to make site contents Retina display ready is invented yet. But who knows, right? Someone might already be brewing something to come up with the best solution for this.
While that solution is not yet discovered, here are some tools you can use to solve your Retina display problem.
Scalable Vector Graphics (SVG):
So far, this is the easiest way to make your site Retina display ready. All you have to do is use the SVG format in making your images. SVG is scalable and will stay crisp and clear no matter how far you stretch it. Plus, you can implement Retina support to your web design without much effort and quickly.
Yet, SVG is not suitable for photographs that have raster properties. You can use SVG for logos, icons, animations, or simple illustrations.
Moreover, using SVG will improve your website speed. But SVG is not an official WordPress-supported format. Mainly because it is an XML file and it is vulnerable to problems like XML external entity (XEE), coercive parsing, XML denial-of-service attack (XDoS) attacks, and many more.
To enable SVG support in WordPress, use Safe SVG plugin that allows you to safely enable support for SVG files. This would make sure your SVG files are sanitized to avoid XML vulnerabilities.
Just stay away from plugins that would enable the MIME type to allow SVG uploads to WordPress library because this is not safe and can harm your website.
There are open source libraries like retina.js and foresight.js that can detect if a website is Retina ready. If not, they will then give you tools to modify your code to replace your normal images with counterparts that have higher resolution.
CSS image sprites are collections of images put into single images. They are means to combine multiple images into a single image file to use on a website, which will improve performance.
To use sprites in making your website Retina display ready, you should first create high-resolution images—at least 400 px—which is twice as wide and high as the standard resolution (e.g. 200 px) of the images in your sprite.
Or you can use drag-and-drop CSS sprite generators that will allow you to automatically generate Retina display and standard sprite images. Moreover, they would generate the code for you. Below are a few of the generators.
Icon Fonts are very versatile because you can easily change their size and color. Instead of using image files as icons, you can create a font file out of vector icons. You can also use readily available fonts.
These will be smaller in file size than images. Also, the icon renders instantly after loading the font. Plus, there is only one HTTP request for any size set of icons, which produces less bandwidth usage.
Text effects such as drop shadows, colors, and rollover states can be applied. Lastly, Icon fonts are supported on all modern browsers and even on legacy browsers like IE6.
The following are some of the icon font creators or generators that you can use for free.
No one knows what will happen to print media but we are sure that digital and mobile have secured their places in the future. Users prefer easier and quicker access to all information and data they consume. Thus, it is vital you adapt to the most advanced innovation and improve the overall user experience.
Remember that you are trying to solve your Retina display problem to grow alongside this industry, not to survive despite the modern trends and demands.
August 13, 2018
February 19, 2018
January 22, 2018