Website Optimizations - Images

Introduction

Websites are getting "fat" and slow. This article aims to tackle the bandwidth side of the issue in which websites appear slow because they take too long to load, and not because they are too CPU intensive on the client.

The heaviest elements on websites are usually the images. The code that makes up a website by providing textual content, layout, javascript, and the css styling are usually only a few kilobytes in size, and this textual data can be easily compressed in transmission. Images are not so easily compressed.

If you can't be bothered to read, and would rather watch a video instead, you can watch the video below where I demonstrate scaling the image down and converting it to using the new webp format, reducing the thumbnail image from 2MB to just 64 KB, which is over 30 times smaller.

You can view the video on Youtube instead if you wish.

Scale Down!

It is almost never appropriate to use an image that is larger than it is going to be displayed as. For example, if the image is only going to be shown in a tiny 200px x 200px box, there is no point using a 1024px x 1024px image and then just setting the width and heigh elements to 200. The browser will still be fetching the original image, but it will only look as good as if you had scaled the image down to 200 x 200 before sending it to the user. If you are trying to cram a lot of images on a page, such as for a gallery, use thumbnails for the images, and load the original full size image at the last second with an ajax call once the user has clicked on a thumbnail.

Use Vector Images If Possible

Vector based images are images that are literally made from maths and are saved in a textual form. This can be seen by opening the file in a text editor. Here is the contents an SVG image I created in Inkscape of a red circle.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="64"
   height="64"
   viewBox="0 0 16.933333 16.933333"
   version="1.1"
   id="svg5"
   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
   sodipodi:docname="cirlce.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#505050"
     bordercolor="#eeeeee"
     borderopacity="1"
     inkscape:pageshadow="0"
     inkscape:pageopacity="0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     units="px"
     height="64px"
     inkscape:zoom="4.8604938"
     inkscape:cx="85.382271"
     inkscape:cy="50.303531"
     inkscape:window-width="2560"
     inkscape:window-height="1021"
     inkscape:window-x="1920"
     inkscape:window-y="1024"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs2" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <circle
       style="fill:#ff0000;fill-opacity:0.5;stroke-width:0.264583"
       id="path846"
       cx="8.4666662"
       cy="8.4666662"
       r="5.7203407" />
  </g>
</svg>

Since these images are made from maths and stored in textual form, they are a fraction the size of other formats such as jpg, bmp, gif, and png which have to store data for each of the millions of pixels. This also means that they scale gracefully to any size which is perfect for a website that wants to look great across mobiles and desktops.

Use JPG Compressions Where Appropriate

JPG is fantastic exported format for web images. It can keep the images the same size in terms of pixels wide and high, yet reduces their filesize dramatically through compression. Gimp is a fantastic tool for finding the correct compression ratio for you as it allows you to drag a slider to select the compression level whilst seeing a preview of what the file will look like, along with its file size. I find that between 80 and 90 percent is ideal as this can save you 80+% of the filesize, but going beyond this doesn't save much storage space, but will noticeably degrade your image.

If you have lots of images to convert, or you want to target a certain file size, then it may be faster to use a CLI tool, such as jpegoptim.

Be warned though, JPG is a terrible format for images that have text in them as explained in the video below:

... for those types of images (and computer screen grabs), you probably want to use the PNG format.