Servage Magazine

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

Handle images in responsive web design

Tuesday, March 4th, 2014 by Servage

Presently, responsive web design still struggles to find great solutions for managing images and related reflow problems. Some web designers have made decent attempts to escape reflow problems as we will see in this post.

To deal effectively with responsive web design, we need to first concentrate on the images because they consume a greater amount of memory; hence, slower downloading. There are plenty of ways, however, to reduce image weight, but none are effective enough to keep a balance between size and resolution. The reason is simple, when you lower image weight in KBs, your images will show pixilation or render in odd ways on bigger screens.

Possible Remedies

One issue we face is high KB images that load on the server. If your website faces heavy traffic, you have to manage the server logic by making it as simple as possible. You should avoid the scripting that detects the devices through the server. Same way you can’t rely on the cookies based solutions, where your server has to produce multiple versions of the HTML. If we serve a single HTML file to all requests and later manipulate them through JavaScript, we can tackle half of the performance and loading issues on tiny devices, which work on weak connectivity and lower bandwidth.

If we apply the same rule to images, we might avoid dynamic coding in image serving logic and can then put images on a content delivery network. Thus, easy-to-cache approaches are more effective for responsive image delivery. Another important issue with responsive images is fragmentations on the devices hardware and screen size. Serving high-resolution images for bigger screens with bandwidth trade off, can be a daunting task when performance and downloading plans are considered.

Reflowing

As stated above, we need to keep a single HTML file using JavaScript. This approach has one drawback; if we make JavaScript responsible for image loading, we will miss the benefits of preloading properties of browsers, as JavaScript is always loading after the parsing of HTML and CSS parts. If we are willing to tolerate this little bit of delay in image loading, we still have another problem with JavaScript, which is reflowing. When JavaScript is inserting each image at a time, our web page or application is reflowing every single time. The cause of reflowing is the attempt by browsers to recalculate the dimensions of the each UI element and redraw them. Thus, reflowing can cause big problems when users push their back button.

In order to deal with reflowing, we have to reserve the space for the image through HTML and CSS before JavaScript starts the image inserting process. We can reserve spaces using an image aspect ratio in the coding. We should allow the height of the image to shrink with the width. One effective technique is intrinsic ratio, where a padding-bottom tag handles the situation efficiently. In coding, padding and margins have some intrinsic properties, where we can define the height of image as the measure relative to the width of the image. Therefore, if we apply the aspect rations for the void (empty) elements using a padding-bottom tag, we can create an image container without any image. We do this by setting height to be 0 against the image aspect ratio in coding.

With this approach, we still face the problem of how to decide the padding-bottom percentage on the server, so we can take inline style code in the HTML to print the aspect ratios out for various images.

References & More Reading

Addressing The Responsive Images Performance Problem: A Case Study
Creating Intrinsic Ratios for Video

Handle images in responsive web design, 4.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

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.