For most web developers, delivering the images to the low-bandwidth mobile devices could not be less than any brain teaser, where they feel like they have been stuck in a complex task, just like searching a needle in the dry haystack!

Well, it could screw-up the brain! Even the developers, who are well-acquainted with responsive web design techniques, know that by setting the max-width of the images up to 100%, can't resolve this issue as the server will still render big size image to the user's phone. The mobile optimized web applications are designed to run smoothly for the low bandwidth connection with formatting according to the screen of the device.

So with this blog, I intend to alleviate your pain involved in the job of providing responsive images with Drupal CMS. The blog offers sheer guidance for devs, where they can obtain the detailed information of the procedures explained with the help of useful images. Read the blog as it provides a solution for having Drupal website for bandwidth starved mobile devices.

Adaptive image module

The Adaptive Image Module will help you to obtain device-appropriate versions for the images. Download & extract it to your site. Then log-in to your Drupal dashboard with authentic user_id & Password. Jump to Admin > Modules. Enable the settings (for Adaptive Image Module with putting a check on the provided box & save configuration.

Adjust Module

Go to Admin > Configuration > Image styles. Click Add Style to generate a new image and name it adaptive (use lowercase alphabets, as this name is used in URL). Currently there are no effects in this style, so you can add them through 'Add' Button next to it. Besides adding effects you get multiple options like scale, resize, rotate, crop etc. (as you can see in the provided image module).

Set Breakpoints

Here you can set resolution breakpoints. The module has 4 resolutions by default. Choose the appropriate on and hit Add Effect.

Configure content

Go to Admin > Structure > Content Types, here you can configure the content to be used in the new image style. Click the manage display link under the 'Operations' and next to edit & manage (as shown in the image). In manage display, you could use the desired image style as per your need.

More options

Go to Image style drop-down menu, then select adaptive. Store the desired settings with Save button.

Adaptive image styles

Download the Adaptive image styles and extract to sites/all/modules. Go to Admin > Modules> Media. Tick the box & hit Save Configuration.

AIS changes

AIS is helpful in making changes to your web server's file (.htaccess or web.config)

Breakpoint edits

During installation the AIS will create several adaptive image styles that fall under image styles. Navigate to Admin > Configuration > Adaptive Image Styles for configuration, where you can edit breakpoints for the adaptive images.

Set node type

You need to set your node type for adaptive image style, once the editing of breakpoints is done. Go to Admin > Structure > Content Types> manage display link> cog icon and modify the image style to adaptive.

Client-side adaptive image

Download the Client-side adaptive image project and extract it to sites/all/modules. Go to to admin/modules> Media, tick the box and hit Save Configuration. Reference of Mairead Buchan's use of the noscript tag.

New techniques

When working on Client side adaptive image, first you need to set the breakpoints. There are five available modules by default. Simply go to Admin > Configuration >Adaptive Images and set the desired value for the number of breakpoints (just like I have set the value to 3).

Add more styles

For configuring the image style, navigate Admin > Configuration > Image Styles> Add Style. Here you can pick the scale and click Add and then Add Effect. We are setting the width as 420 pixels.

Further sizes

For further sizes, we will create new image style (730_med) with setting the scale width to 730 pixels and another style (1020_large) with setting to 1020 pixels. Finally, you will have 3 new image styles.

Content type

Navigate to Admin > Structure > Content Types> manage display to set our content type for new styles. As the client side adaptive image will use different format, so change the Image to Adaptive Image.

Configure styles and breakpoints

Click on the cog icon, once the content formatter for the image has been modified. In the appeared screen, you can see that configuration for the breakpoint with image styles is done.

Responsive images and styles

Once done, it dynamically changes image style using JS that identifies the small size. Download the Responsive images and styles and extract to sites/all/modules. After log in, navigate Admin > Modules> Other. Check the box and Save Configuration.

Several styles

For several styles, create a few image styles. Suppose we are naming it demo_narrow, choose the scale from the effects drop-down and click Add. Then you can set the width (420 pixels) and click Add effect. Similarly create two more styles and scale them (730px and 1020px).

Associate styles with breakpoints

Navigate Admin > Configuration > Responsive Images and hit Add. As seen in the above shown example, set width to 420, suffix to and _narrow and label to Narrow. Now you can create similarly create the other two responsive image suffixes.

Ready to roll

In the Responsive Images Configuration page, choose the Settings tab provided on the top right of the page. By setting the default suffix to _narrow, hit Save Configuration. Once done, the style modules and responsive images are ready and will behave appropriately on your end-device!

Interested in this topic? You might enjoy another article I've written called

• How you can prevent an SQL injection
• Browser size aware content scaling
• Fun with the sleeves of vinyls
• Baby car logos
• [Imagedump] February 2008 - Part 1 [50 Images]

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: