Responsive Images
To create responsive images it is important to note that we only support scene7.
This mean that the source image HAS to be a scene7 URL.
The image width will be calculated from the parent element where the image is located. There is a fallback in place that if the parent width is coming back as "0" the original image width will be used.
**Note: Always check mobile first to make sure the right width is being calculated since we want to load optimized file size for mobile!
<img
data-src="https://officedepot.scene7.com/is/image/officedepot/fm_files_bsd_tiles_story_banners_4517-948x325-slider-www-hp-pavilion-data"
alt="Some Banner"
class="responsive-img"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
/>
/**
*
**/
import ResponsiveImages from 'globalComponents/responsive_images/index.js';
new ResponsiveImages().setImageSrc();
Image Properties
Values
Description
class
responsive-img
This class will make the image work and is mandatory
data-src
href
The source url of the image
alt
string
Always make sure a correct alt tag is defined for compliance reasons
src
N/A
Do not add a src attribute we will load the image async after page load
