Ad-hoc responsive images for your intranet

For some reason intranets tend to adopt design conventions a couple of years late compared to the public Web. Going for responsive web design unfortunately is no exception.

Where I work, our public facing website went responsive in 2012, but our intranet is still lagging behind. Well, on the few occasions when I create content for our intranet I manually input code to make my images responsive. 

Why responsive images on a non-responsive intranet?

It might not make sense to everyone why you’d like the images responsive when the intranet itself is not. One argument is that you like the image to fill the available width, not caring what that width might be. Some intranets is actually fluid in their grid system, but not responsive in their imagery, making for a less than optimal design with today’s standards.

Also, some of your users might have a high resolution screen. For them some images look blurry compared to the adjacent text. You can alleviate that blurriness with an unnecessarily high-res image, which by CSS-code is made to fit the width of its container.

The code to accomplish this is actually not that complicated, at least if you settle with an image scaling down in accordance with the column width it resides in. The most difficult part of this operation might be locating the image in the HTML-code in your CMS editor.

Images are tagged with a <img> tag. Your job is to figure out of its the right image, and if it is, then look out for an existing style-attribute. If there is none you paste the code below inside the <img> tag.

style="max-width: 100%; height: auto;"

Afterwards, it can look like this:

<img src="myphoto.jpg" alt="Fabulous photo of mine" 
style="max-width: 100%; height: auto;">

This instructs the web browser to let the image use all available horizontal space and the height automatic – keeping the aspect ratio, that is.

Potential problems

Perhaps, the most obvious potential problem is that you happened to mistype or alter the code in a way that is not according to the HTML-specification. If the image disappeared when switching back to WYSIWYG-mode you probably messed up the code, then switch back to the code and look through the code carefully.

If your <img> tag is stating width or height attributes like the code example below, then you have to remove that part for the style attribute to be effective.

<img src="myphoto.jpg" alt="Fabulous photo of mine" 
height="300" width="500">

If you still struggle with making your images responsive, please post a comment and I’ll try to help out. Whether or not your <img> tag is ended with a /> or just a > is contingent if your website is using the XHTML standard or the HTML standard. When in doubt, include another image using your CMS and look for yourself how the CMS prefers it. Most tools I’ve used don’t really mind how you write code in this regard.

Going all in with responsive images

There is much more you can do to achieve responsive images. For instance, you can serve different images for different sized screens. Smaller screens often need cropped images for the content to be conceivable, while you can serve a similar image to tablets and large screens. Also, you can serve high resolution images to retina screens, especially on intranets since bandwidth rarely is an issue.

The most apparent advantage working with intranets is that you now more about the user’s context, and their equipment tend to be somewhat standardized. So going all in with high resolution images for users with big screens is a decision easier made compared to the public Web.

Some of the responsiveness need support in you CMS. To learn more about the possibilities of responsive images, and responsive web design in general, check out the brand new book Web Strategy for Everyone – initially released with an extra friendly price ›

Leave a Reply