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?
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).”
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.
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.
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.
It’s that simple! There are several things that happened with this single request for us:
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:2and 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
In order to integrate Responsive Images into an existing app, you have to do the following:
srcattribute of your
<img data-src="http://www.your-site.com/images/image.jpg" />
<img data-src="http://www.your-site.com/images/image.jpg" class="resimgs" />
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.
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.
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.
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.