Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Use responsive images

Monday, September 23rd, 2013 by Servage

Today in the mobile-first era, if your client is demanding a website, particularly with images which work well on all devices, you can leverage the latest solutions available in the market.

Scaling

In order to pick the best option, I will equip you with some basic knowledge in this post. For most images, screen resolution is the biggest factor, as this determines their appearances and performances on various devices. If the image is not scaled down appropriately, it either looks too wiry or appears pixilated. Therefore, we must reset the style sheet with, max-width code, setting it to 100% or an appropriate scale in the case of retina displays. Unfortunately, max-width does not work with older browsers, so you need to provide alternative code, width: 100%, which will target those browsers.

As stated earlier, we need different scaling for retina images as the response of max-width code is not expected at all times. Therefore, you have to take an alternate route, like using an image container, instead of scaling the image. You can wrap your image in a container by creating a module with a class. If you then scale this container class using max-width, you definitely avert the scaling problems. Let me explain this a bit further. For example, if you have a logo image, you should not scale image directly by:

Img.logo {

max-width: 125%;

}

Instead, you create a log class and scale the code like:

.logo {

max-width: 125%;

}

Browsers

The next issue is an abundance of images in the source code, because browsers tend to preload all images in the source code first and then the code, itself. Thus, your expectations to give some JavaScript, or other scripting to tell the browser of the device to show only relevant images, will fail desperately.

Bandwidth

We are aware of bandwidth and connectivity problems on most tiny devices, so preloading can be fatal for our performance and we might lose many clients on these very loading issues. Thus, creating Retina images has a double edged sword, where you can lose customers due to low bandwidth problems as well as due to the preloading nature of modern browsers, despite having good bandwidth.

Thank goodness there are many smart developers in our web design community who have tried to fix this bandwidth problem by creating bandwidth detection scripts, like Foresight.js. These can inform us that how long the browser takes to download our Retina images. Based on this information, we can send images as a set to that device. At present, W3C is working on a Network Information API to measure bandwidth of the network in advance.

Art Direction

It is good to detect the network bandwidth and send images accordingly, but our problems are not solved with such efforts alone. Suppose you have some images that look nice on big devices, but lose the charm on the tiny devices. This charm comes from focussing more on certain aspects of an image to achieve desired impressions. Therefore, this is termed as an art direction problem, where you need to show an entirely different set of the same image in different devices. Here, not only is scaling needed, we also have to perform cropping and regional zoom functions.

We know we don’t have effective solutions for this art direction problem. The same is true for the website with plenty of images or CMS where creating special markups is not practically feasible for any web programmer. Instead, we have alternatives, like progressive images, albeit with some pros and cons to mitigate our responsive image solutions.

References & More Reading

Choosing A Responsive Image Solution
foresight.js
Which responsive images solution should you use?

Use responsive images, 3.7 out of 5 based on 3 ratings
Categories: Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.