Web Basics: Imagery

The Need for Speed

Imagine a truck driving up a hill, the heavier the truck is, the slower it goes and the more frustrated the drivers behind it get. Like those drivers, the user is stuck behind their browsers while all the cool images and elements you've added to your site load, and like the truck, the more you add to it, the heavier it is and the longer it takes to reach the goal - the top of the hill for the truck, a fully loaded site for your user.

As website owners, we never want to leave our users feeling frustrated, and that's exactly what a slow site does. Our goal should be to lighten that load as much as possible, and the easiest, fastest, and often most effective way to do that is optimizing the images on our site – making them lighter so the browser doesn't have to work as hard.

When we say "a lighter image" what we're really talking about is the file size, which determines how much data needs to move through the internet from your site to the user's browser so that they can see it.

The average web page size is currently around 3MB, which represents about a second of loading time on the average Canadian household's broadband connection. On a mobile device (assuming that your site isn't optimized responsive) that jumps to around 4 seconds. When your users are impatiently waiting for your site to load 4 seconds feels like an eternity.

Have a look at these three images of an adorable sleeping koala:

Can you spot the difference? Neither can your users – but their browsers can.

The first one is un-optimized and is 239KB – big, but manageable with a broadband connection.

The second I applied basic photoshop optimization to, and reduced it to 151KB – better, but with everything else going on inside a web page this is still pretty big.

The last one I used a fantastic free tool called Optimizilla which reduced it to a minuscule 35KB – that's an 85% reduction with no visible loss in quality for the user.

I should also mention that I cheated a bit with the first one, the original sleepy koala picture from my 2003 Australia trip was an enormous 1.5MB from my old Sony Cybershot DSC-P9 (it was 4 whole megapixels!).

I'll talk more about the reasons for it being so large in the sections on resolution and dimension.

A Word on File Formats

One of the most frequent mistakes I see web content creators make is using the wrong file format for the type of image they're uploading.

The three most common formats in use on the web today are JPEG (.jpg), GIF (.gif) and PNG (.png), each has strengths and weaknesses, and each should be used in ways that play to its strengths.

JPEG - the photographer's best frenemy

JPEG compression works by reducing fine detail, so it's best for images like photographs where hard edges and crisp barriers aren't as noticeable. Unfortunately, as you increase the compression the detail is reduced and that can result in nasty compression artifacts like blotches and ugly patterning.

It's only 7KB, but the artifacts are really noticeable:

As long as you're careful, JPEG is still the best choice for displaying photographs on the web.

• Use for: photography, gradients, images with more than 256 colours
• Never use for: logos, icons, graphics elements, transparency, motion, crisp detail

PNG - for the details, graphic designers rejoice!

Unlike JPEG compression, a PNG is compressed by reducing colour, rather than detail. This means it's perfect for infographics, logos, and other graphical elements around your site - like arrows and buttons. PNG also handles transparency well, so it's a good option when one element needs to sit on top of another. Photography can be saved as a .png, but the file size will be enormous because of the colour profile - use a .jpg unless your photograph needs transparent sections - even then it's probably best to try to find another way to get the same effect.

• Use for: logos, icons, graphics elements, transparency, crisp detail
• Never use for: photography, gradients, images with many colours, motion

GIF - movement and icons (limited)

Mesmerizing animated GIF courtesy Wikimedia commons

The GIF format dates back to 1987 and was used extensively in the early days of the web. There are very few situations where GIF is the way to go these days, short, low detail animated clips or very small iconography are the only ones I can think of for your site. Most of the original uses have been supplanted by the newer .png format which supports a wider colour range, better transparency options and, with the exception of very small iconography, generally has a smaller file size. Even basic motion has largely been replaced by coded animations (HTML5/CSS3 transforms etc...) on the modern web, however; animated GIFs shine in places where HTML5 animation can't be used like email campaigns and on social media, so the format still has legs.

• Use for: limited motion and very small iconography, movement in email campaigns and social media
• Never use for: pretty much anything else

TL;DR

Use JPEG for photos, use PNG for graphics and iconography, use GIF for certain types of animation and small iconography.

Resolution

At its most basic, image resolution is the number of pixels that appear per inch in your image. There's a bit of a myth around PPI that says all monitors are 72ppi or that all images for the web should be at that resolution. For web-only graphics, it's safe to ignore it, pixel resolution (PPI/dpi) only matters for printed images. For the web what matters is the number of pixels wide and high the image is - an image that is 400px wide will look the same on-screen whether it's 72ppi or 96ppi or 300ppi.

If you're posting images for download and print then PPI/dpi matters, but be aware that what you see on screen may not reflect what prints out - if this is something you need to be able to deploy make sure you have help from a designer with experience in both formats.

Dimension

This is the actual display size of your image, how many pixels wide and high it is. The actual dimensions of your posted images should be decided by the size of the spot you're putting them, if the area you have to add an image is only 400px wide uploading a 1440px image is a waste of bandwidth. This is where my Cybershot comes into play, the pictures I took with it were designed to be large enough that I could print them if I chose to. That meant the base image was 1600px x 1200px, far too big to post in an article. To get around this I had to use an image editor to scale it down to fit dimensions appropriate to the content, which for this article was 400px x 300px. I used Adobe Photoshop to scale it but Windows and macOS both have built-in editors that can perform basic image scaling, and there are a number of free online services that will do the job as well.

Many CMS platforms (web Content Management Systems) will claim to resize images for you as they upload but what they actually do is change the HTML display size - meaning that while the end-user will see a smaller image, their browser is actually downloading the full-size image and then doing the job of downscaling it on the user's end. What you get is a big file that only looks like a small file. I should also mention here that posting an image that's too small for the space can also cause issues, as your CMS could up the HTML display size - this is a common problem with logos and iconography being uploaded in a smaller size.

The Red Grape logo on the left was saved at the correct size where the right side was upsized by the HTML. There isn't a Marketing Manager alive that would be comfortable with the right side representing their brand.

The Speed Trap - Caching

"But, my site runs really fast when I visit it... are you sure there's a problem?"

I had a friend of mine say this to me verbatim last month while we were discussing his website. What he didn't realize, and what is often overlooked, is that sites you visit frequently (like your own) are cached by your browser to reduce loading time. That means that when you and your team visit your site only a small portion is loaded from the internet, specifically, content that has changed since your last visit, the rest is loaded from browser cache - including images. This is an advantage for frequent visitors, but it can keep you from seeing speed issues, like poorly optimized images, that can ruin the experience for first-time visitors. Thankfully avoiding this trap is as simple as clearing your cache.

Rights & Ownership

I'll probably talk more about this topic when I look at legal issues on the web but for now, the basics are - imagery on the web isn't free, make sure that you either own the images yourself, have the copyright holder's permission, or have verified that the images you're using are labelled for use in the public domain before posting them to your site or social media pages.

I really liked this image for the GIF section but if I used it Warner Brothers could potentially file a copyright claim, and the artist who altered the original to read GIF/JIF might as well. I might be covered under a fair-use exemption, but why risk it?

The fine print

This covers most of the basic image optimization scenarios you'll run into but, like anything, there are exceptions that will crop up - and more complex situations that will need expert help. For most situations though, using the right format, dimensions, and running your pics through an image optimizer will go a long way towards giving your site a speed boost.

While this primer can help give you a baseline understanding of optimizing imagery for the web it's no substitute for hiring an experienced in-house professional or a reputable vendor.