Image Optimisation

In this article we look at image optimisation, the different types of compression and image files, and how files different file formats can be compared and best used.

Vectors or Bitmaps?

Raw, digital image files start as either vectors or bitmaps/rasters/pixel maps. Bitmaps are made from pixels whereas vectors are made using mathematical formulas, co-ordinates and geometry.

Vector image files are often used for creating logos, illustrations, and print layouts in programs such as CAD packages, Microsoft AutoShapes, Blender, Adobe, and more.  Vectors can be re-opened and re-edited in graphics programs as they can be scaled without losing resolution. Examples of vector file formats include EPS (encapsulated postscript), PDF and SVG (scalable vector graphics).

BMP

Bitmap images are made from a grid pattern of coloured squares known as picture elements/pixels. Examples of bitmap file formats include BMP (Bitmap), JPG (jpeg), PNG, GIF, TFF (pronounced tiff) and EXIF (exchangeable image file format).

Using image files on the web, however, requires optimisation.

Image File Optimisation

Image files for use on the Web need to be ‘optimised’.  This generally means creating a balance between retaining visual quality while shrinking the size of the file. Smaller image files (i.e. smaller in size and in compressed formats) take up less storage space and are quicker to download when part of a website.  Compressing image files, therefore, means changing attributes such as the dimensions, the resolution (dpi), the bit depth (the number of bits used to represent each pixel in an image), and setting the file type e.g. .jpg, .png, or .gif.

Types of Compression

There are two types of compression for image files. These are:

1. Lossy compression. This reduces the file size by permanently reducing data. This means that, once a file has undergone lossy compression, increasing the dimensions of the file shows a pixelated/blurred version because data/pixels were stretched and made into larger blocks to make the whole image smaller and compressed. Examples of lossy compression file formats (bitmaps) include JPG, and GIF (depending on settings).

2. Lossless compression.  This type of compression squeezes the file without removing data so that the picture quality remains the same, and the file can be decompressed to its original quality. Examples of lossless compression file formats include RAW, BMP, PNG and GIF (depending on settings) .

Comparison

Different optimsed/compressed file types have different qualities and uses.  For example:

– JPG and GIF files are both used on the Web. JPG files (often used in digital camera images) have lossy compression but a relatively high quality for the size of the image and as such, are used for photos and more detailed images on websites. GIF files have lossless compression (depending on settings) but a maximum 8-bit colour depth (limited to a palette of 256 colours).  This means that they are not best suited to photos, but rather for saving images like charts, diagrams, simple images, and simple animations.  GIF files can also be used where transparency of part of the graphic is needed.

– A PNG file is an example of lossless compression that provides a high-quality image. PNGs provide a much better-quality alternative to GIFs but, like JPG files, PNGs can be used for all photos and images that require cleaner, clearer detail.  PNGs, however, have a lower compression rate than JPGs, so can be bigger (in terms of KB size). PNGs can, therefore, provide a noticeably better-quality image than a JPG and the layers of graphics in the image can be kept separate from each other, but this comes with a trade-off being the larger size of the file.

– Bitmap image files (.bmp) are uncompressed or compressed with a lossless compression. This image file type has raster graphics data (pixels rather than vector) that is independent of display devices, meaning that a BMP file can be viewed without a graphics adapter. Each pixel is made of one single or a group of ‘bits’ (hence the file name), and this allows encoding of the file to different colour depths (i.e. bits-per-pixel/bpp up to 32 bit).  Like other raster file formats, BMP also supports transparency. BMP files are not suitable for use on the Web (although they can nevertheless be used) but are good for storing highly detailed, complex images (e.g. for archiving or image processing/photo editing). BMP was developed for Windows OS and BMP files are compatible with major image editing applications, e.g. Photoshop or CorelDRAW. BMP is a Windows proprietary filetype so TFF (.tff) can be used instead.  TFF files, for example, are often used for commercial and professional printing.

What Does This Mean For Your Business?

A basic understanding of file formats can help businesses to make decisions about how best to present images (e.g. on websites to provide the best visual impact), and minimise download time as this can impact on SEO and ranking factors. Also, a good general understanding of file types can help when dealing with printers and web developers, and can help with decisions about the storage and archiving of company images, and how to save images so that that they can be editable. Images play an incredibly important role, e.g. in social media posts, websites, company brochures/literature, branding and more, so understanding how to save, edit, present, send and deal with them is worthwhile for all businesses.