Images

A picture is worth a thousand words

Adding images to web pages needs careful consideration. There are still many best practises to be followed before we look at responsive and fluid images. Although we look at correctly adding images, this page will have a broken layout. However, it demonstrates that we still need to take further action to make our images mobile friendly.

Sourcing Images

Ideally, learn to take high-quality pictures on your phone or camera.

However, there are lots of websites, besides Google Image Search, that you can download high-quality images for free.

Choosing Image Format

The important consideration to make first is what will the image be used for? The choices, from oldest format first, are:

GIF
- Very small (less than 10px x 10px).
- Small slide-show effects, with pure markup only, use an animated GIF.
JPG
- Photographs.
- Lots of colours.
- Complex tones and shadows.
PNG
- Transparencies.
- Significant artwork.
- Predominately blocks of colour.
SVG
- Must scale well.
- Remains crisp at different resolutions.
- Smaller file size.
Future Formats
CSS
- Decorative web page theme artwork, such as presentational background images.
- Has no semantic meaning.
- Missed by SEO and not seen by screen readers.

Essential Image Markup

<!-- Emmet -->
img[src="URL" alt="text" title="text" width="www" height="hhh" class="right"]
<!-- Markup -->
<img src="URL" alt="text" title="text" width="www" height="hhh" class="right">

Animated GIF Slide Show

Aircraft fleet An animated gif is all you need for a simple slide show. It is a great solution that does not require anything other than markup. Here's one I made by following this tutorial.

No matter what technologies we use moving forward, some of the markup for this image must always be present as a fall-back for old browser.

<!-- Fall-back <img> markup -->
<img src="i/fleet.gif" title="Aircraft fleet" alt="Aircraft fleet" width="220" height="130" class="right" />

width and height prevents reflow of text, by reserving space for the image to download into. They should match the image width and height.

Cross-Browser Markup

Required

src URL to image.
alt Displayed if no image.

Adding Images

Workflow

The Jacobite crossing Glenfinnan Viaduct, Scotland

Let's create a workflow for the steps required to add an image to our web pages. I am using, the free, paint.net.

Decide on the best format.
- We'll choose a JPG, as it is a large picture taken on a camera, which will be much too big for a web page, slowing down the initial page load time drastically.
- Source: The Jacobite crossing Glenfinnan Viaduct, Scotland.
- Resolution: 5184 x 3456px.
- File Size: 10mb.
Resize to the width and height of the target container size.
- Different sizes may be required, for different widths in a responsive Layout.
- You may need to zoom in and crop the picture for display on a small device, when the focal point of the photo is not bang on centre and is too small to gain attention.
- We will resize for a desktop image.
- Resolution: 600 x 400px.
- File Size: 246kb.

Save as (for Web) Quality
- Quality about 60-75% (High setting in Photoshop).
- Aim to get size down to below 150kb.
- Resolution: 600 x 400px.
- File Size: 35kb.
Compress the Image
- There are many free online image compression tools. I like tinyJPG that can process both JPG and PNG formats.
- Resolution: 600 x 400px.
- File Size: 29kb
- Not bad, 10mb down to 29kb and the image still looks good.
The image is Not Responsive. Try viewing this page at narrower widths than 600px. This will force the image out of its container and produce horizontal scroll bars and also give us a broken layout. Which must be fixed if we are to be mobile friendly.

Note

The gradient effect on the backgrounds here are the result of an SVG file created using angryTools.

Thumbnail Image Solution

An acceptable solution that would allow for a fast loading web page to access a large image and remain mobile friendly is to create a light-weight, thumbnail version of the image.

This is as small as you'd want to go, at 240px width but you could go up to about 300px width if needed and still remain mobile friendly.

Follow the steps above to create a 240px width optimised image, weighing in at only 7kb.
Instead of having a text link to the original image, we can link to that image from the thumbnail.
This means it is left to the user if they wish to download the large image.
I would recommend that you still optimise the large image, keeping it at its full resolution.
You can see thumbnails as small as 75px width (2kb in this case) that only offer a hint to what you might see but I think you should offer something nearer to what is described above.

Captioned Images

The Jacobite crossing Glenfinnan Viaduct, Scotland

We used to play around with markup and CSS styling to create nice looking captions for our images. Now we have semantic markup with HTML5 to get the job done correctly. Of course, we will still use CSS styling for better presentation and automatic Figure number referencing without JavaScript.

<!-- <figure> markup -->
<figure class="figure">
  <img src="URL" alt="">
  <figcaption>CAPTION</figcaption>
</figure>

Notes about the <figure> element.: You can leave the alt attribute empty if you include a <figcaption> to prevent screen readers from reading it twice.; You can embed many child elements.; <figcaption> is optional.; A little CSS has been added for appearance but notice we also have Automatic Figure Numbering with CSS Counters!

Automatic Figure Numbering with CSS Counters!

The CSS required for this is minimum:

Reset the counter for all content.
Tell each occurrence of the element to increment the counter. The target is <figure class="figure".
Display the value of the counter before the element.

/* CSS (1) */
#content { 
  counter-reset: figures; }
/* (2) */
.figure figcaption {
  counter-increment: figures; }
/* (3) */
.figure figcaption:before {
  content: 'Fig. ' counter(figures) ' - ';}

Additional Figure Usage

Figures are not just for an image, it represents any self-contained content. Such as:

Annotating illustrations.
Diagrams.
Multiple Photos.
Video.
Code.
Audio clips.
Advertisements.
Tables

Multiple Images

Here we place three images inside a figure element. On this occasion, alt="description" attributes are required to identify each item.

Figure Reference

If a page has a number of self-contained Figures, it would be nice to have a reference section, which would allow you to jump quickly to each of the Figures on the page.

It would be a pain to create all the markup required to do this. So why not build the code as the page loads.

Scroll to the bottom of the page and note there are no footnotes.
Return here and study the code below that will create the footnotes.
Click the code and view the results.
Test the figure hyperlinks in the footnotes function correctly.

/* Executable JavaScript */
WW.Site.figure = function (hn) {
  if ($('.figure').length){
    var $figure = $('.figure'),
        $article = $('article'),
        footnote = "";
        
    /* Add id="figN" to each figure in the article */
    $figure.attr('id', function(i) {
       return 'fig'+(i+1);
    });
    
    /* Create Figure Footnotes Markup */
    footnote = '<aside id="footnotes" class="single"><' +hn+ '>Figure References</' +hn+ '><dl>';
    $figure.each(function(i){
      footnote += '<dt><q><a href="#fig' + ++i + '">Fig' + i + '</a></q></dt><dd>' + $('figcaption', this).text() + '</dd>';
    });
    footnote += '</dl></aside>'
    
    /* Add the markup to the bottom of the page */
    $('article').append(footnote);
  }
};

/* Execute the Figure Reference Builder */
WW.Site.figure('h4');

/* Go see our handiwork (Scrolls to the bottom of the page) */
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

Full Background Image

A background image can cover the full viewport at any size. This could be used for a web site design, adverts, or even as a dialog box.

Defer Images

Even our optimised images take time to load and will slow the page loading. We can really improve things by allowing the page to load quickly so the user does not have to wait. Then, with the user happily viewing the page (above the fold), we can load any additional images lower down in the page (below the fold) by deferring them, such as the following image.

Deferred Image Example

Any images the user needs to see initially will be marked up normally but the ones we want to defer require a different technique.

<!-- Markup - Create a placeholder for the image to download into -->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="../i/woods.jpg"/>

/* JavaScript */
deferImg: function(){
  /* Get a nodelist of all img elements that have a data-src attribute */
  var imgDefer =  document.querySelectorAll('img[data-src]');
  /* Loop through each image placeholder */
  for (var i = 0; i < imgDefer.length; i++){
      /* Change the source place holder to the defered image */
	  imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
  }
}

Conclusion

We are making good progress but many of the images on this page are not ready for responsive web design nor are they mobile friendly.

Deferring images as described means the image will load even if the user does not scroll down below the fold to see the image. This is not ideal.

We need to do much better. Our next step is to overcome these problems by only downloading images if the user moves to the location where the image is positioned in the document. When viewing these images, they must be mobile friendly, responsive and Fluid.