|Official Website:||Go to website|
Responsive Images is a lightweight yet useful plugin that allows to load the appropriate image based on the size of your visitor's viewport. It can help you save the bandwidth for your website and reduce the page load time to improve the user experience.
1. Include responsive-img.min.js script at the bottom of your web page.
2. Insert an image to your web page. Using
data-src attribute to set the different breakpoints in combination with the image source it should use.
<img alt='' data-src-base='images/' data-src='<480:smallest.jpg, <768:small.jpg, <960:medium.jpg, >960:big.jpg' />
data-src-base- Adds a specified path before every image source path.
data-src2x- Can be used instead of
data-srcif devicePixelRatio is above 1.2 (retina displays).
data-src-base2x- Can be used instead of
data-src-baseto specify a custom base path for devices were devicePixelRatio is above 1.2 (retina displays). Can be used in combination with both
data-src-baseor either one.