Handling Adaptive Images in Our Responsive Design

By Jeff Bellsey on Tuesday, March 18, 2014

Handling Adaptive Images in Our Responsive Design
In the battle between adaptive and responsive, images seem to be unable to pick sides and commit. Should images be handled responsively, and resized by the browser? Or should they be served up adaptively, with different size images (and perhaps different content altogether) sent to the browser?

For a rich discussion of problems and solutions, have a look at these excellent articles on Smashing Magazine or CSS-Tricks. In this article, we’ll consider a few techniques for working with images in the Moboom platform.

Image Handling in Moboom


The widget API allows you to easily resize images for different devices. Here’s the declaration in PHP:

Moboom::createImageUrl( $image, $maxWidth=NULL);

Every image you display in Moboom should be run through this API call. It ensures that images are all served through our CDN, which gives your users the fastest download experience. Additionally, the API will resize your image so that it is no larger than the screen size of the device on which it is being viewed. If you’ve got smaller images, like icons, don’t worry, they won’t be scaled up.

Here’s a simple example without any extra device checking or resizing. This is the minimum basic code needed for displaying a user-selected image in a custom widget.

$img = Moboom::getWidgetSetting( 'featured_image');

$url = Moboom::createImageUrl( $img);

echo "<img src='$url' />";



And here’s an example of how you can use the API to scale images. This example also uses the device-checking API. Note that in most cases, you should not be using the second parameter to Moboom::getWidgetSetting(). But it’s available if you have specific needs. So the following code is not typically your best practice; it’s merely illustrative.

$img = Moboom::getWidgetSetting( 'featured_image');

if ( Moboom::deviceHasProfile( 'Mobile'))

   $url = Moboom::createImageUrl( $img, 700);

elseif ( Moboom::deviceHasProfile( 'Tablet'))

   $url = Moboom::createImageUrl( $img, 1200);

else

   $url = Moboom::createImageUrl( $img);

echo "<img src='$url' />";


Art Direction


Scaling images is not always enough. You might need to adjust the content of images based on the type of device being used.

On the Moboom.com home page (early 2014), the image in the hero section is adaptive. On desktop displays, we wanted the image to always display a laptop computer and paper notebook, regardless of browser size. On tablet displays, the image is of a tablet computer, and on smartphones, the image is of a smartphone. The image size and layout are responsive, but the content is adaptive.

Here is a portion of the code from the custom widget we wrote for the home page. The user enters three different images into the settings for the widget, but only one of them is downloaded to the client device.

$setting = ''; // feature phones will not show an image

if ( Moboom::deviceHasProfile( 'Desktop')){ $setting = 'desktop_img'; }

if ( Moboom::deviceHasProfile( 'Tablet')) { $setting = 'tablet_img'; }

if ( Moboom::deviceHasProfile( 'Mobile')) { $setting = 'mobile_img'; }


if ( $setting) {

   // retrieve the proper user-entered image for this device

   $img = Moboom::getWidgetSetting( $setting);

   $url = Moboom::createImageUrl( $img);

   echo "<img src='$url' />";

}


Mystery Solved


With just a single API call — Moboom::createImageUrl() — your images will be served up adaptively to the client. And a second API call — Moboom::deviceHasProfile() — gives you deeper access to the client device’s size and capabilities. That’s all you need to get rolling with adaptive images.

DevKit Templates

Find the website template you want in the Moboom Market