Images are standard fare on most websites. They are used either for aesthetic purposes or to convey information. However, since images have a fixed width and height, adjustments need to be made when they are displayed on the small screen of a smartphone. This article discusses how you can adapt your pictures so that they are mobile-friendly.
If you have come to this page from outside thesitewizard.com, please note that this article is the third in my Responsive Web Design tutorials. It assumes you already know the stuff discussed previously. As such, you may want to look at the earlier chapters first:
Those who haven't got a website and are here because you want to know how to make one that works on all devices should really start with How to Create a Website instead. The latter was written for beginners, and thus uses plain English, unlike what you're reading here.
There are actually many aspects to making responsive images. I will focus on making a picture fit within the confines of a browser window using CSS.
The simplest and most painless way to quickly get all your existing foreground pictures to fit a mobile screen is to resize them with CSS. This can easily be done with the following rules.
If you have used my Layout Wizard to create the CSS for your site, these rules will already have been inserted into the style sheet by default (unless you either removed it manually or instructed the Wizard to omit them).
The rules cause the browser to display all images loaded with the <img> tag with their
default width and height. However, if the block containing the image is narrower than the actual width of
the picture, the image will be shrunk to equal 100% of that block's width. Its height is set to auto
so that it is kept in proportion to the image's width, thereby preserving its aspect ratio. (By this, I mean
that the image will be resized proportionately so that the picture will not appear too thin or fat as its width
shrinks or expands.)
The following example image (taken from my BlueGriffon 1 tutorial) uses the above rules. The picture has a default width of 394 pixels and a height of 187 pixels, but its width is constrained to 100% of its containing block. Resize the window to see how the browser handles it.
Browser compatibility: for completeness sake, I should mention that although max-width
has been around for ages, and is supported by the major web browsers since time immemorial, it is not recognized by
Internet Explorer ("IE") 6. However,
IE 6
is probably, for all intents and purposes, extinct these days, as it doesn't have many of the features used in
today's websites, even the ability to access modern properly-configured
HTTPS websites (ie, websites
with SSL), so you can probably ignore it.
While the above method deals with your foreground images, you will also want to adjust your background pictures. This can easily be done with the help of mobile queries.
Start by creating one version of the image for your desktop visitors, and a smaller one to be displayed on smartphones.
Let's say that the HTML code for your DIV block begins like this.
The image can then be loaded via the CSS background-image rule.
The example below is loaded using this method. In a desktop-sized window, you will see a screenshot of my Contact Form Wizard in two column mode. If you were to resize the window to (say) 320 pixels wide, you will get a screenshot of the same Wizard in its one-column mode. (Yes, I used a completely different image for the small version because it amused me. It also demonstrates the flexibility you have when you can actually load different images for different widths.)
The background-size: contain rule instructs the browser that the image is to be scaled so that it fits into
the containing block without spilling outside its boundaries. If you don't mind your images being tiled across all
available space, you can omit background-repeat: no-repeat or set it to repeat-x or
repeat-y if you only want it duplicated horizontally or vertically, respectively.
I should point out that this method is really only useful for decorative images. Since the pictures are loaded
as a background image, they lack an ALT text. This means that visitors that rely on that description, such as blind users
and search engines, will be unable to determine what the picture shows. In fact, non-graphical browsers may not
even bother to indicate that there is an image there at all. That is, if your image is part of your content, don't
use this. Put it in an <img> tag and use the foreground image resizing technique mentioned earlier.
For those who are about to disregard my recommendation (which, incidentally, is not just mine, but also the
W3C's)
and use this for things other than background images, with no content between your <div> tags,
you will need to add width and height rules (with the dimensions of your image), or
the browser will collapse the empty <div> block. However, please do not think, "Hey, Chris did it
here, so that means I can too". My use of the images in the example above is merely to illustrate the effect of
using the responsive background image CSS rules. (How else am I to demonstrate how it works?)
You really should not put screenshots or other pictures that are part of your content as background images.
Browser compatibility: background-image and background-repeat are
supported by all major browsers, even the obsolete IE 6. The newer background-size: contain requires
at least IE 9, Firefox 4, Chrome 15, Opera 11.5, Safari 7, Safari for iOS 7.1 and Android 4.4.
This chapter concludes my series on how you can adapt your website so that it will work on both a desktop/laptop computer as well as a smartphone. While responsive web design is not the only way to deal with mobile screens, it is probably the solution that is easiest to implement and maintain for many types of sites.
Copyright © 2016-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Make Your Images Mobile-Friendly (Responsive Design)
