Replace Images for Mobile

Replace images for mobile when:

• the image contains text.
• the mobile and the desktop images require different image dimensions.
• the mobile images require different art direction than their desktop counterparts.

1. Create a Mobile-Specific Image

• Use Adobe Photoshop or your preferred image manipulation tool to generate the mobile-specific image.

Here are our guidelines for creating mobile-specific images:

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

• Most mobile devices have high density displays.

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

• Ensure that text is readable when scaled down.

2. Update the Desktop Image HTML

• By convention, add the data-mobile-src attribute to your image HTML with the location of your mobile-specific image.

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.

• To switch the desktop and the mobile images, update the view file to contain this function:

...

/**
 * 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!