Adaptive Images for Responsive Design with ExpressionEngine
Most of the websites I design have large images that fill out the width of the screen, but there’s no point in serving a 1920 pixels wide image to a phone with a 480 pixels wide resolution. In fact, if you run Google PageSpeed Insights on such a site, the mobile score can be 10 to 20 points lower due to such large images.
Create constraints for the File Directory you intend to use. Here’s how I did it:
Example image tag for your ExpressionEngine templates:
The last step is to add breakpoint.js to the site:
This setup will have ExpressionEngine automatically create the different size images upon upload. It can be used with the standard File & Grid fields as well as other instances such as the File Entries tag.