Replace Images for Mobile

Use mobile-specific images to replace desktop images.

Replace images for mobile when:

1. Create a Mobile-Specific Image

Here are our guidelines for creating mobile-specific images:

Best Practice Export images at least at twice the intended display size.

Best Practice View your images at the intended display size before exporting.

2. Update the Desktop Image HTML

Original HTML Updated HTML
<img src="product.jpg" /> <img src="product.jpg" data-mobile-src="product-mobile.jpg" />

The mobile asset does not download on desktop browsers. Only the asset in the src attribute downloads.

3. Update the Adaptive.js View

On mobile, use the data-mobile-src image instead of the original desktop image.


 * Returns the page context with the
 * src tag overwritten with the
 * data-mobile-src tag.
 * @param {Object} context
 * @return {Object} transformed page context
preProcess: function(context) {

    $('img').each(function() {

        var $img = $(this);

        // Overwrite the src attribute with
        // the data-mobile-src attribute
        $img.attr('x-src', $img.attr('data-mobile-src'));

    return context;


Use the x-src attribute instead of src when you manipulate images because Adaptive.js handles external resources in a particular way.

Now you have the mobile-specific images instead of the desktop images!

Edit in GitHub