With retina displays becoming more and more common both on desktops and mobile devices, supplying appropriately high-resolution imagery is an important consideration. Blindly providing high-resolution images, however, wastes bandwidth – a resource in short supply, especially with mobile devices.
New specifications allow websites to provide an array of images at different resolutions to the browser so that it can pick the best fit for its display density and bandwidth availability. Adding support for this ensures that cutting-edge devices (and their lucrative owners) enjoy the best possible experience, while not penalizing traditional devices and users with traditional display densities with increased bandwidth usage.
Native RWD theme support
By default, the native rwd/default theme makes a very modest attempt to supply high-resolution images on the product detail page and no attempt on product list pages.
Product list pages load a conservative image that never exceeds its max render size. Since there can be many images loaded on a single category page, loading a higher than necessary resolution image for every product would have resulted in significant bandwidth increase while only improving the experience for high-density displays.
Due to the importance of product imagery on the product detail page, however, the product detail image gallery intentionally loads a 1.5x image. Product detail images are usually reasonably few, so this approach doesn’t require excessive additional bandwidth. The extra .5x leaves a little extra resolution for lower density displays and meets higher-density display halfway, all without cluttering or complicating the often-customized product media template and javascript.
Adding support for high-resolution images
In order to provide native support for forward-thinking browsers while maintaining high-performance backward compatibility for older browsers, the Picturefill polyfill is an easy choice. This polyfill uses the standard DOM structure to express image choices so that native browser support can be used where available, and fills in the gaps where necessary.
This polyfill supports both standard markup patterns:
- img element with srcset and sizes
- picture element with source nodes
While the picture element provides incredible flexibility, a standard img with appropriate 1x and 2x srcset values goes a long way with minimal impact.
Adding picturefil polyfill
After downloading picturefill.js, move to the /js dir to make available to all themes. Then, add a few lines to your theme’s appropriate layout XML update file to include it on all pages.
Product List
Product list images are very simple. By default, they are a simple img element, duplicated on both sides of the grid/list conditional.
Images will never exceed 400px rendered size, so a reasonable and bandwidth-friendly 300px max was chosen.
While this is acceptable for low-density displays, the stingy resolution shows up on high-density displays.
Due to the effective use of a simple img element, this is a textbook example of the implementation of 1x/2x images. Lower density displays are already accounted for, so the 1x image remains the old 300px standard. Adding a value to srcset for high-density displays is as easy as another call the Magento image resize helper, asking for an image 600px in size.
This simple change results in significantly sharper images on high-density displays.
This usage can be directly replicated on the other side of the list/grid conditional.
Product detail
Product detail images are only slightly harder. Due to the Magento’s gallery functionality, the product media template has an img element for the base image, followed by each gallery image.
By default, images are loaded at no higher resolution than 1200px – roughly 1.5x the actual max render size.
Again, due to the use of a simple DOM structure containing simple img elements, the switch to responsive images is not rocket science. After experimentation, images are never rendered more than 700px x 700px. This gives the target for the baseline, lower density, 1x target size, with 2x images targeted at 1400px – twice the baseline size.
Finally, a zoom size must be selected. Elevate zoom, the zoom library used by default only supports a single zoom image per img element. In order to provide a sufficiently bigger image for all display densities, a size adequately bigger than the high-density image size (1400px) must be chosen. This decision depends on the original resolution of product images available.
With the main product detail media image out of the way, updating gallery image thumbnails is a breeze. Simply switch to srcset, request a doubled image size from Magento’s image helper for the 2x image, and move the image size into a variable, just for good measure.
Product image considerations
No good deed goes unpunished, and neither does responsive image implementation. In order to actually provide high-resolution images to high-density displays, the original uploaded product images must be the highest resolution available. In particular, they must be at least ~2000px x ~2000px – enough to satisfy the resolution demands of the product detail zoom image.
Where to go from here
This article only scratches the surface – the more flexible picture element support allows for a wide range of sophisticated image use such as
- providing images in different formats to take advantage of the latest standards
- art direction for product images at various render resolutions
The code for this walkthrough is available on GitHub and can easily be installed via modman – use it wisely.
This post was the first in Classy Llama’s technical blog series on RWD on Magento.
We experienced the development of RWD theme first hand and want to share our learnings with you. In the next few weeks you can look forward to learning about the topics listed below:
Compile Compass in PhpStorm, Netbeans, or Sublime with source map support– The new Magento responsive theme uses Compass to compile Sass into CSS. In this article, learn how to automatically compile your Sass files whenever they are changed in your favorite IDE.
Sass Deployment Structure– In this article, we’ll cover how Classy Llama incorporates Sass compilation into our development and deployment workflow.
Interested in a responsive image implementation on your website? Let us know at our contact page.