mykeels.com

My foray into adaptive images

I had just built the perfect solution. It was beautiful to look at (and this is totally not a biased judgement) and worked pretty well. It…

2016-10-14

My foray into adaptive images

I had just built the perfect solution. It was beautiful to look at (and this is totally not a biased judgement) and worked pretty well*.* It had one of those image carousels with beautiful text in it for each image. However, my boss took one look at it and …

This image is too large for Mobile Devices … 3MB? What were you thinking? You’d make users hate this webpage.

This page costs 11MB in data. 9MB of that is just Images. You really should consider optimizing it.

I live and work in a third-world country. Here, the internet is mostly accessed via mobile network which could be 3G if you’re lucky, but is usually EDGE/2G which is crappy. Also, WIFI is scarce and (so i’ve heard) is not as good as in developed countries.

As a web developer who builds applications aimed at the local population, this is a huge deal. This means sites that look like this are probably not popular:

And it’s not because of the vegetables

It’s probably also why sites like Nairaland are really popular.

No, I don’t use it for the romance or diaries :-o

It turns out, a huge part of web page optimization is reducing image sizes for smaller devices, or sometimes, displaying different images entirely for specific devices.

How do you make the server give a smaller image when a user browses a web page using a mobile phone? I was determined to find the perfect solution.

Candidate #1: HTML5 Picture Element

Okay, this guy shows promise …

When using <picture>, or <img> with the srcset and sizes attribute, the browser will only download the image explicitly stated for the matching scenario.

Its status on CanIUse.com was equally impressive:

IE and Opera Mini don’t count

I believed I had hit the jackpot …. Then I looked at the code to implement the picture element.

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

What ever happened to “keep it simple”?

<img src="images/kitten-curled.png" alt="a cute kitten" />

Changing each <img> tag in my code to that would be a huge pain in all fingers.

Also, if I had a Galaxy S5, which is really popular in Nigeria, the Picture Element won’t work because Old Android Browser.

There was also the issue of <picture> not working for background images.

Could I live with that? That is yet to be determined.

Candidate #2: On-the-fly Server-Side Image Resizing

I’d used this in the past and it looked good. It worked and was efficient at reducing the network bandwidth.

Using query strings, you gave the server information about how much compression to apply to the image, the width and height to resize the image to, etc.

<div class="container">

<img src="img.jpg?w=170&h=170&mode=pad|" />

</div>

Yaay! We’ve got a much smaller image (say 150KB instead of 3MB) on the mobile phone. Good Work!

But wait … cache isn’t working on the client browser. The Images download every time the page is refreshed. Soon, you’re using up as much data as when you have not optimized your images at all.

Candidate #3: Adaptive Images

With adaptive images, you can use one image url (without query strings) and it serves a resized image depending on the browser type/size.

One URL to rule them all … and in the server bind them

I’d found it, or so I thought. With adaptive images, you upload a high-quality image, targeting a specific screen resolution, and it resizes for various devices. When you need the image, it chooses the best image to serve depending on the requesting device.

This can be a huge relief, as the burden of image selection is taken off the backs of the code writer and given to web-content-creators. :D That’s a huge deal if you write web code.

As I use ASP.NET, I resolved to write an adaptive image server for .NET as I couldn’t find any that suit my purposes. Hence, ImgR.NET was born, and while it’s still in its infant baby diapers, I believe there’s room for growth.

With a good grasp of design and CSS, you can build entire websites with minimal or in rare cases, no images.

If you can meet the challenge, and still have aesthetically pleasing designs, good for you.

If you’re like me however, and cannot design UI to save your own life an adaptive image server might just be the answer for adaptive images.

*At least, till the HTML5 PICTURE element gets its head out of its own **.

Related Articles

Tags