Implementing High-Res Images on Magento’s Native Responsive Theme
Implementing High-Res Images on Magento’s Native Responsive Theme

Implementing High-Res Images on Magento’s Native Responsive Theme

Published May 27, 2014 in Development
Imagine Conference 2014 Was Epic…
May 20, 2014
Compiling Sass with Phpstorm
June 10, 2014

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.

app/design/frontend/rwd/picturefill/layout/picturefill.xml

Layout XML Update Screenshot

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.

rwd/default/template/catalog/product/list.phtml lines 51-62

Product List Image Code – Native

As the comment states, 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. As you can see in this retina iPhone screenshot below (enlarged 1.5x in photoshop).

Product list enlarged screenshot – Native

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.

app/design/frontend/rwd/picturefill/template/catalog/product/list.phtml lines 25-33 Product List Image Code – Picturefill

This simple change results in significantly sharper images on high-density displays. The below screenshot from a retina iPhone (enlarged 1.5x in photoshop) demonstrates the improvement.

Product list enlarged screenshot – Picturefill

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.

app/design/frontend/rwd/default/catalog/product/view/media.phtml lines 35-67

Product detail media code – Native

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 – in this example, 1800px is arbitrarily chosen.

app/design/frontend/rwd/picturefill/template/catalog/view/media.phtml lines 10-59

Product detail media code – Picturefill

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.

Before and after:

app/design/frontend/rwd/default/template/catalog/product/view/media.phtml lines 87-92

Product gallery thumbnail code – Native

app/design/frontend/rwd/picturefill/template/catalog/product/view/media.phtml lines 79-86

Product gallery thumbnail code – Picturefill

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Recent PostsView all
December 13, 2019

The Instagram Effect: How the Rise of Visual UGC is Transforming eCommerce

As anyone who’s ever gone on a first date will tell you, first impressions matter. A brand’s website is no exception to this universal truth. Visitors […]
December 12, 2019

Reducing CPC and Increasing Clicks with Google Smart Shopping

November 22, 2019

Partner Round-Up: Holiday Prep for eCommerce

When it comes to preparing your eCommerce site for the holiday season, there’s no shortage of advice available. Black Friday, Cyber Monday, Christmas sales, and the […]