Replace Images for Mobile
Use mobile-specific images to replace desktop images.
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.
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.
- 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 ofsrc
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