Updated: January 2018
My brother Brad is an artist. He does landscapes, woodcuts, abstracts, book illustration, comic books, and many other artistic expressions. His million-view blog is ThickPaint. His YouTube-channel has around 1.4 million views. He’s an art “thought leader” with a reputation.
rad wanted to show landscape images to gallery owners. Speed was not an issue. The target audience has ultrahigh-resolution, large screens and fiber-optic Internet connections.
Retina-friendly images for professionals – and speed for curiosity-seeking mobile visitors?
Typical screens now have a resolution of 1024 x 768 pixels or higher. Mobile presentation of fine art is unusual. Who reviews and critiques artwork on a small, mobile screen? Not a serious buyer. Version 4.4 of WordPress added support for mobile, responsive images. That addition takes care of most mobile users needs for image resizing. (More, in a bit, on image high-resolution enhancement with a plugin).
Common ultrahigh-resolution displays are between 1,920 × 1,080 pixels and 2,880 × 1,800 pixels. 4K and 5K displays pack millions more pixels than lower-resolution displays. 4K computer monitors have a display resolution of 3840 × 2160 pixels. This is about four times as many pixels as a typical 1920 × 1080 pixel display.
Apple coined the marketing term “Retina displays” to describe ultrahigh resolutions. One-third of all iPhone users still have a 4-inch screen. Thats a pixel density of 326 pixels per inch (ppi) on a 4-inch, diagonally-measured screen. The goal when introducing the iPhone 4, was about 300ppi for a device held 10 to 12 inches from the eye. That’s the same as 300-dpi, catalog-print-quality resolution. The iPhone 7 (2017) still has the same resolution – but on a 5.5 inch screen (diagonal).
Retina images are heavy and slow loading. Very heavy. Very slow.
In 2013, Retina displays were on 1.1 percent of computers. Today, it’s much higher because iPhone and iPad tablets use them, too. Images get heavy when catering to creative professionals using large, desktop Retina screens.
Web designers can’t prepare Retina images the same as normal 72ppi web images. Images that aren’t optimized for high-resolution screens don’t look very good. Our opinion is this extra care matters little for most websites – and their users. We don’t ever prepare Retina-ready images. It’s unnecessary overkill.
Recommended image sizes:
- Smartphones: 888 x 888 pixels
- Tablets: 1366 x 768 pixels
- Laptops: 1600 x 900 pixels
- Desktops: 1920 x 1080 pixels
- Retina Displays: 2560 x 1600 pixels
- 4K Displays: 3840 x 2160 pixels
What size should you upload? The bigger the better. This, of course, is horrible for speed.
WP Retina 2X
1.8 million downloads (9 percent retention)
1.1M zip file
Mobile WordPress Speed – without coding!