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.
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.
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.