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

WordPress Mobile Speed

Updated: August 2019

There are no affiliate links on PagePipe.

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. That’s 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 for Retina:

  • 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
2.7 million downloads (4 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 2.3M to 3M. Extremely heavy. The Retina images often 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.

Oqey Gallery plugin was closed on January 26, 2018 and is no longer available for download. Reason: Security Issue SQL Injection Vulnerability. – Thanks for the heads up to Vee Valkonen.

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.

Slider lightbox with Retina image quality.

Mobile version on iPhone.

Under 1-second Speed Specs
Pingdom test

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



Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

for WooCommerce professionals only

PagePipe invites you to steal this $9.95 performance report, WooComa.

How WooCommerce hurts mobile speed, and what you can do about it. Nine unusual speed tips.

Free for a limited time. Signup required.
What you get:
13-page ebook,
9 unconventional WooCommerce speed tips.


+2776.3 milliseconds potential extra speed per Woo page.

Free same-day shipping to your email in-box. No purchase or credit card required.

(ɔ) Copyleft License
This work remains available to all. You have the right to freely distribute copies of WooComa with others.

If MailChimp messes up and doesn’t deliver your free report, email us and we’ll kick their monkey butt.


Other Related Resources

If you’re new here, start with our best primer speed articles.

If you’re ready to give your WordPress site wings, here are powerful tools to speed up your site.

Learn how the most popular plugins and ideas waste your time – and hurt web speed. Includes important tips for mobile speed without coding.

Build with Empathy