Responsive Images for a Mobile Friendly Website

Make Your Pictures Fit on Both Mobile and Desktop Devices


How to Make Your Images Mobile-Friendly (Responsive Design)

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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:

  1. How to Make a Mobile-Friendly Website: Responsive Design in CSS

  2. How to Make a Two Column Layout Mobile-Friendly

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.

Responsive Images: Making Your Pictures Fit Both a Mobile and Desktop Browser

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.

How to Use CSS to Resize Your (Foreground) Images While Preserving Their Aspect Ratio

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.

img {
  width: auto ;
  max-width: 100% ;
  height: auto ;
}

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.

Example of an image using the CSS max-width rule to make it responsive

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.

How to Use Mobile Queries to Deliver Responsive Background Images

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.

<div id="picblock">

The image can then be loaded via the CSS background-image rule.

@media (max-width: 480px) {
  #picblock {
    background-image: url(mobile.png);
    background-repeat: no-repeat;
    background-size: contain ;
  }
}
@media (min-width: 481px) {
  #picblock {
    background-image: url(desktop.png);
    background-repeat: no-repeat;
    background-size: contain ;
  }
}

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.

Responsive Web Design and the Modern Website

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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Make Your Images Mobile-Friendly (Responsive Design)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.