How to show high-resolution portfolio images on mobile screens.

Header image not shown for mobile speed.

Save the Internet from WordPress speed abuse.

Updated: August 2017

4 minute read

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.

B
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
100,000+ installs
1.8 million downloads (9 percent retention)
1.1M zip file

The WP Retina 2X plugin creates the image files required by retina devices. Then your website looks crisp on every device. The plugin recommends full-size image resolution of 2520 × 1200 pixels. Then the plugin generates a full set of eight images required by your WordPress website. Double the normal number.

The optimized plugin won’t slow your site down. Nor does it weigh down your WordPress database. The plugin only makes one HTTP request and it’s for a script called picturefill.min.js. It weighs 5.5k and loads in parallel with other page files in 123 milliseconds. It’s as if the plugin is transparent.

For Brad’s site, we uploaded images about 3024 × 3024 pixel size. These weighed from 1.5M to 2M file size. We did optimize images before uploading using “save for web” features in GIMP for Linux. The JPEG quality setting was 80. This reduced the image weight from 3M to 2M – about 30 percent.

Today, average web pages weigh 1.3M. Extremely heavy. The Retina images are larger than all components to build a single web page.

That image size on a mobile page destroys speed. The delay isn’t tolerated. The answer is to use a gallery plugin with lightweight thumbnails. The one we chose is Oqey Gallery plugin.

From our past research, people will only look at about 12 images per portfolio section. They get bored around nine. So we wanted a grid of 12 thumbnails. Those then open up a view of the heavier, Retina-quality, full-screen images.

We chose a free, bare-bones theme called Graphy from our under-1M-compressed speed collection. We needed a simple, unadorned, classic look that wouldn’t detract from the portfolio.

WordPress Graphy Theme demo page.

BradTeare.com home page with thumbnail grid.

Slider lightbox with Retina image quality.

Mobile version on iPhone.

Under 1-second Speed Specs

BradTeare.com
Pingdom test

Performance grade: A 100
Load time: 842 milliseconds
Faster than: 92 percent
Page size: 409k
Requests: 35
Tested from Dallas

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"I’m absolutely delighted and I wouldn’t have got anywhere near the 1-second load time without your guidance, so I’m eternally grateful." UltraWord.com  United Kingdom

by - Jonathan Westwood