Creating a WordPress Retina Photo Gallery

Nov 21 2014 Gordon

WordPress tiled gallery

Recently I decided to improve my WordPress photo gallery. The goal was to improve my pictures when viewed with the new high-end retina or 4K displays. This post covers some of the challenges I encountered and image technology improvements that WordPress now offers.

A 4K screen means 4000 pixels across and now there are even 5K displays available. Apple’s retina iMac display has 5220 pixels. The upper end of TVs now boast 4K as the new hi-def plateau in picture resolution. If you have professional photography or artwork that you want to present visually at the highest quality, then, you may need to upload higher resolution images to display optimally on these new retina/4K/5K displays. Retina images (so called 2x images) double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and inserting the 2x image into half of that space (100 x 100 pixels). In many ways using web images has become more complex and having the optimal images delivered to the many different types of internet devices has become tricky. Internet devices come in many sizes now, some displays are retina quality and others are not. So what size of image is going to work with such a wide range of internet devices/displays? The answer is no image size will work effectively for all the possible devices and display resolutions.

If you have a WordPress theme which calls for a header image of 1038 pixels (the page width of your WordPress theme), and you upload a 1038 wide pixel image (so called 1x) you will be fine for non retina displays. But for retina displays you will need to upload a 2076 (2x) pixel header image to your Media Library if retina quality is your goal. Your web page also needs some Javascript that can check the device for retina capability, and some server technology to deliver the images (2x) for retina displays.

At this point, you might be wondering do I really need retina image quality? You may not. Most internet users cannot tell the difference between retina and non-retina web pages. It takes some visual comparing to understand the subtle difference between 1x and 2x images. If you inspect the online Apple Store product shots, you understand why their product shots seem just a tiny bit crisper when displayed on a retina-enable device. You can also see why a professional photographer would prefer to have his/her photography displayed at the highest possible screen resolution.

Getting back to the challenge of delivering retina quality images, there are number of ways of doing this. There are web tutorials on coding CSS media queries, Javascript swapping, using SVG images, or uploading two versions (hi/low rez) of your image(s). These methods work if you are a knowledgeable web professional, but WordPress sites are created by content providers, not Javascript programmers, therefore, I recommend a server side technology to deal with all the image size complexities. I use the Jetpack Photon plugin. It is’s CDN (Content Delivery Network) that manages all my gallery images  and supplies a retina-quality image if the requesting device has a retina/4K display. The CDN technology also improves your site’s ability to host a larger photo gallery to your viewers, for more details on Photon’s CDN technology, see my post on images in WordPress 3.9.

The best width to use for retina images can be difficult to calculate. But a good rule of thumb is to use the largest potential image width required by your WordPress theme. My site’s theme largest CSS container is 1038 pixels wide. That is the full page width of my theme. In order for the Photon plugin to insert a retina image into that container, I would need to upload a 2076 pixel image into my Media Library. If the requesting device is retina capable, then Photon delivers the 2076 pixel image (2x) upon request. If the requesting device is not retina, then Photon creates and delivers a smaller 1038 pixel image (1x) from my uploaded 2x image. Photon will also generate smaller images for smaller devices like smartphones and the tiny thumbnail images of my gallery grid (see above). Manually dealing with all the image file sizes would be a nightmare. Once you get your image(s) uploaded to the Media Library, Photon takes care of everything and the plugin has no configuration whatsoever, just activate it in JetPack.

What I found tedious about updating my photo gallery was finding my original images. My current gallery has 48 images photographed over a 15 year period that I want to upgrade to retina quality. None of my uploaded gallery pics had enough resolution to be reused for the new retina gallery. 0ver the last 15 years, I wished I would have been more organized and used a consistent method to stored my digital images. If your photo library is organized, the process of locating your originals and exporting them at higher retina resolutions will be much easier.

Once I had retrieved my originals, I did a basic auto image enhancement and sharpening in Pixelmator, and then, used Pixelmator’s export for web feature at 2076 pixels wide (or more with some panorama shots). Now that I have upgraded my photo gallery, I believe I can deliver retina (2x) and non-retina (1x) images faster to the ever-expanding number of internet devices for optimal viewing.

Note: Almost all my gallery images were taken with an iPhone 5s or older model. My photo gallery uses three JetPack modules: Photon (CDN), Tiled Galleries (Square Tiles grid design), and Carousel for the full screen slideshows.