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.

This example uses the following setup: ExpressionEngine, jQuery, bootstrap and breakpoint.js which comes with HiSRC. It uses bootstrap’s standard media queries, 480, 768, 992 and 1200 screen widths.

ExpressionEngine setup:

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.