Responsive Images – There’s a Service for That!

Optimizing the speed of a web page requires a good understanding of all the resources that make up your page. I always do my best to optimize, minify, combine, GZip and upload to a CDN my resources in order to increase the loading speed at the client.

In a mobile-first world, we have to constantly think about mobile users on spotty internet connections. But, what do we do with images that take more than 63% of our website bandwidth according to the HTTP archive?

responsive_images01

You can use PageSpeed Insights to get insight into how you can optimize your a web page based upon 18 different best-practice rules. For instance, I ran PageSpeed on a random blog posts on the Telerik Developer Network and the recommendation in regards to images was, “The following images are resized in HTML/CSS. Serving scaled images could save 1.1 MBs (62% reduction).”

responsive_images02

PageSpeed is telling us that any image that is resized in HTML or CSS is inefficient, because we are downloading excessively big images for the size in which we will be displaying them.

The industry best-practice today is to resize your images beforehand to fit most of the screen sizes, and serve the resized images based on media queries as below:

<picture>
  <!-- load a small resolution image by default -->
  <source src="small.jpg">
  <!-- load a large resolution when the width is bigger than 800px-->
  <source src="large.jpg" media="(min-width: 800px)">
  <img src="small.jpg" >
</picture>

In this case, you will load a small.jpg by default, and load large.jpg only when your browser width is more than 800px (of course, the <picture> tag still needs a polyfill like this one to work on browsers that do not yet support it). Soon, you will be also able to use the new srcset attribute that is making its way in most of the new browsers today to achieve a similar result like this:

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x">

Both solutions will be able to pass the PageSpeed test above, but you still have to resize your images beforehand to fit most of the resolutions. The fragmentation of device screens today leaves much to be desired for those of us who want to achieve a pixel-perfect experience and optimize bandwidth for each screen.

It’s 2014, There’s a Service for That!

In 2012 the industry coined the term, “There’s an app for that”, but in 2014 I would say the more appropriate phrase would be, “There’s a service for that.” Telerik recently introduced Responsive Images, a standalone service that is part of Telerik Backend Services. Using it, you can dynamically resize any image on the internet and store it in a CDN with a single request. You will not only download a smaller optimized image for the screen, but it will be served from one of the nearest 52 edge servers that are part of the Amazon CloudFront CDN network.

How it works.

I will use a random image from the internet to test our responsive images. The image is over 9.5 MBs (on average around 1% of your mobile data plan for the month), and has a resolution 3703 x 2592. You can see the original image here.

Let’s retrieve the same image, but using the Responsive Images service to fit into a iPhone 3GS resolution which is 320×480.

https://bs1.cdn.telerik.com/image/v1/9bWBbo13WFgt2qxs/resize=w:320,h:480,fill:cover,pd:1/http://news.dphotographer.co.uk/wp-content/uploads/2011/03/Action-Open-Winner-Chan-Kwok-Hung-Buffalo-Race.jpg

iPhone 3GS version

It’s that simple! There are several things that happened with this single request for us:

  • The image was resized from 3703×2592 to 320×480. This decreased the size of the image to just 99.2 KBs which is ~100 times less than the original image!
  • The resized image is stored in the Amazon CloudFront CDN for us, which has 52 edge servers around the world. For example, if you are now reading this from Australia, this image was loaded either from Melbourne or Sydney depending on your location in Australia.
  • The image was cropped to fit the new screen resolution. Since we don’t want the image to stretch, the service cropped the image for us from the center of the image.

Let’s now break our URL to see what exactly happened to our image:

  • https://bs1.cdn.telerik.com/image/v1/ – this is the static Responsive Images service URL.
  • 9bWBbo13WFgt2qxs – This is our Backend Services API key identifying my Backend Services project part of the Telerik Platform that I have created earlier. Note that I have added news.dphotographer.co.uk as a white listed domain in my project to ensure my service only resizes images stored on this subdomain.
  • resize=w:320,h:480 – This is our targeted width and height of the new image. You can also specify just the width or height, and the service will resize the image keeping the original aspect ratio.
  • fill:cover (optional) – This crops our image to fit the targeted resolution. If you maintain the aspect ratio from your original image, you don’t have to pass this parameter. Otherwise, both the width and height parameters are required for the fill:cover to work.
  • pd:1 (optional) – This determines the pixel density of the image. If you are displaying this image on a retina display, you can simply request pd:2 and this will return a retina image with double the size of the image and thus the the pixel density.
  • http://news.dphotographer.co.uk/wp-content/uploads/2011/03/Action-Open-Winner-Chan-Kwok-Hung-Buffalo-Race.jpg – This is the URL for the image we want to resize. This works with any image on the internet as long as you whitelist the domain in your Backend Services project.

To see it yourself, copy and paste this URL in your browser and manually change the width and height parameters that are currently set to w:320,h:480.

https://bs1.cdn.telerik.com/image/v1/9bWBbo13WFgt2qxs/resize=w:320,h:480,fill:cover,pd:1/http://news.dphotographer.co.uk/wp-content/uploads/2011/03/Action-Open-Winner-Chan-Kwok-Hung-Buffalo-Race.jpg

Integrating Responsive Images Into an Existing Website or Hybrid App

We have created a tiny JavaScript component that iterates over all images on a web page and ensures that they are resized and loaded from a CDN for you. It automatically calculates the display size of the images, and ensures that no bytes are wasted over the wire. It handles all parameters to the Responsive Image Services for you, so you don’t have to worry about setting things like pixel density, width or height of each image.

In order to integrate Responsive Images into an existing app, you have to do the following:

  1. Create a Backend Services project in the Telerik Platform and retrieve the project API Key. Ensure you have whitelisted your domain in the Settings/Responsive Images tab.
  2. Reference the Responsive Images JavaScript component in your page:
    <script src="http://bs-static.cdn.telerik.com/1.0.0/everlive.images.min.js"></script>
  3. Substitute the src attribute of your img tag to data-src:
    <img data-src="http://www.your-site.com/images/image.jpg" />
  4. Add a class “resimgs”” to your images:
    <img data-src="http://www.your-site.com/images/image.jpg" class="resimgs" />
  5. Initialize the JavaScript component with your API Key from Step 1:
    everliveImages.init('your-api-key-here');
  6. Optional: If you are loading images on demand, you need to call the following method:
    everliveImages.responsiveAll();

Using Responsive Images with Kendo UI

You can integrate Responsive Images in any website or mobile app, but we have prepared a dedicated demo on how to do this using Kendo UI Mobile ListView. You simply need to follow the regular steps for integrating Responsive Images as explained above, and ensure that everliveImages.responsiveAll() is called once you have bound your element to a Kendo UI DataSource. This will ensure that whenever you load new items in the ListView, all images will be optimized.

Automatic Retina images

The JavaScript component takes into consideration the devicePixelRatio attribute of the browser, which is the ratio between physical pixels and device-independent pixels. This instructs the JavaScript component to automatically serve retina images with double the image size. You don’t have to worry about retina displays anymore!

Integrating Responsive Images Into a Native App

You can use responsive images in any application that loads resources from the internet. You can easily construct the resized image URL and request it from the Responsive Images service which will do the rest.

What About Performance?

All resized images are served from the fast Amazon CloudFront CDN servers. The first user who loads a request for an optimized image as part of a web page will get the initial resizing delay. All subsequent requests to the resized image will be coming straight from the CDN for the next 24 hours.

The resizing mechanism is based on Java and Netty.js with in-memory resizing to avoid bottlenecks. The Responsive Images service is using different algorithms for downsizing and upsizing images to achieve pixel-perfect resizing.

Wrapping up

Responsive Images is a new service part of the Telerik Backend Services (BaaS) helping you deliver optimized images across every screen. You can start using the Responsive Images today by signing-up for the Telerik Platform and creating your Backend Services project.

Best of all, Responsive Images are part of your Backend Services Data Plan and are charged to the bandwidth from our services. The base Backend Services Data Plans comes with 5 GB of bandwidth per month at no additional charge.

Comments