Retina ready

­

Extra high-density XHDPI display / Retina ready feature

Every thumbnail shown with your new gallery will look stunning on modern devices. Photos appear at the same size but in fact made up of more pixels - exquisite detail. Apple's "Retina Display revolution" certainly contributed to this trend and it's common sense to follow it.

When you have more pixels on your screen, why not utilize them all? The custom of using double resolution images evolves rapidly. This is new technology that serves images tailored to your actual device. Can it display 3x or just 1.5x resolution photos? Using just 2x images would be suboptimal in either case so you'd need to create multiple sizes. Justified Image Grid carries out the task for you automatically. There is no need to prepare anything. As long as your source images are fairly high resolution you can sit back and relax.

Similar file size and much better detail, impossible! Or... is it?

The human eye appreciates fine details but cares less about smudge. This allows stronger compression on larger images. Study shows that resolution matters much more than quality, in this specific case. The result is a crisper thumbnail with a low additional badwidth cost. This prevents skyrocketing file sizes as a gallery would require much more mobile data.

  • The gallery makes use of hardware capabilities to display more pixels in the same area resulting in perfectly sharp thumbnails.
  • All thumbnails are automatically Retina ready as long as the original image has a high enough resolution.
  • It uses a thing called device pixel ratio to serve larger resolution thumbnails, for example 3x images on Full HD 5" devices.
  • The bandwidth requirement is not increased substantially due to automatically managed quality.
  • If you don't like automatic quality management you can take control but note that quality never drops below 30%.
  • With Justified Image Grid's Retina ready feature no upscaling or distortion occurs, ever.
  • As an alternative, you can use the Photon module of Jetpack by WordPress.com / Automattic which is a free CDN.
  • In case you don't need it, the Retina ready feature can be disabled of course.

Prepare your eyes and see it for yourself!

You see A/B versions of each image, first without then with this feature enabled. Compare the fine details around the edges of subjects. Such as tree branches, dandelion fibers, and zebra stripes!

Normal

Retina

Example statistics for automatic Retina ready thumbnail compression

This test illustrates the effectiveness of JIG's logic using a sample size of 184 thumbnails with Preset 19. Device pixel ratio means the amount of physical pixels for a single logical pixel. Read more about devicePixelRatio on quirksmode.

  • pixel ratio

  • Quality
  • Without JIG
  • Average filesize
  • Without JIG
  • Bandwidth cost
  • Without JIG
  • Image area
  • @1x

  • 90%
  • 90%
  • 19 KB
  • 19 KB
  • 100%
  • 100%
  • normal
  • @2x

  • 45%
  • 90%
  • 20 KB
  • 55 KB
  • 105%
  • 280%
  • 4-fold
  • @3x

  • 30%
  • 90%
  • 29 KB
  • 106 KB
  • 150%
  • 560%
  • 9-fold

As you can see, detail does cost a little but technology and clever mechanisms save a lot.