This module is relatively easy to setup, there are no dependencies and you don’t have to modify the
.htaccess file. To setup just select the “Adaptive image” formatter from the manage fields page, define your breakpoints and you’re done.
If you’re in the process of researching modules take a look at the Picture module and our tutorial Handle Responsive Images Using Picture Module In Drupal 7.
Installing the module is pretty simple. Just download Client-side adaptive image and install the module.
If you use Drush, run the following command:
$ drush dl cs_adaptive_image $ drush en cs_adaptive_image
Throughout this tutorial I’ll use Omega as the responsive theme. Avoid using the default Bartik theme as it’s not responsive.
Configure Image Field
The module ships with a custom field formatter called “Adaptive image” for the image field. All we have to do is configure this formatter, define breakpoints and image styles and we are done.
1. Go to Structure -> “Content types” and click on “manage display” within the Article row.
2. Select “Adaptive image” from the Formatter drop-down list and click on Save.
3. Click on the cog wheel and define specific breakpoints and image styles.
The breakpoint widths may vary depending on the defined breakpoints within your responsive theme. You’ll have to experiment with the widths to get the right results.
For this tutorial I set the following options:
4. Save the formatter settings by clicking on Update, then go and test the image field.
By default the module allows you to define five breakpoints. But if you need more than five, you can add extra breakpoints by going to the module configuration page.
1. Go to Configuration -> “Adaptive images” (admin/config/media/cs-adaptive-image).
2. Change the value in the “Number of breakpoints” and click on Save configuration.
If you have any questions, please leave a comment.