2.2 Image formats

Using photographic images in your online presence requires considerable decision making. Beyond the image look at feel; the graphical elements and placement of the image must also be considered. After which, you need to decide where to source your images. Typically the choice is one of these three: stock (paid), public domain (free) or graphic/photographic (new) images.

In a business environment, images of current customers enjoying or using actual products and or services, is best. But in reality, photo-shoots are not always easy to set-up or capture – think of an accounting office. Before getting into which image to use when, let’s discuss image formats.

Vector v. Raster (Pixel) Image Formats

At the heart of every image is its graphical compilation. Graphics are either made of tiny squares (pixels) or mathematical calculations (analytical and geometrical). The most important difference between vector and raster images is their scale-ability:

Since vector graphics are rendered using mathematical calculations they are able to be resized without the loss of definition on edges and lines. Raster images, on the other hand must be resized from the source application and re-exported in order to be resized. If not, they will be of lower quality, anti-alias and will look “pixelated”. Different applications are set-up to create either one or the other format. For example Adobe Illustrator creates vector graphics whereas Adobe Photoshop creates raster graphics.

Originally, the raster image on the left was set to 150px width and then scaled-up to 300px width without going to a larger “pixel density” source file creating a “pixelated” effect. Creative Commons CC0 License

A number of popular image file formats are shown in the chart below:

Scale-able Vector Graphic (SVG)

Just as described above, this file format is incredible in that it does not lose quality when scaled. The simplicity of the SVG allows for it to be programmed manually or created using web applications like Affinity Designer^[1]. You will most often find this file format in the shape of graphics, icons or logos. The graphic shown on the right is a SVG exported into a PNG file format in Adobe Illustrator.

Joint Photographic Experts Group (JPEG or JPG)

This file format is best for photographs that have a full colour-palette. It is by far the most common and easily identifiable image file format. JPEG is 24-bit RGB (red green blue) format capable of millions of colours and colour transitions. It uses lossy compression when reduced in image size. Meaning some of the data of the image is lost in compression; which is clearly evidenced in the Mona Lisa painting above.

For best results, export your images as progressive JPGs. This will allow images to load faster through multiple passes when an individuals Internet throughput is low.

Portable Network Graphic (PNG)

This type of image is mostly suitable for graphics or images that do not have large colour palettes. The 8-bit indexed colour option is the most suitable for the web because of its lossless compression and small file size. PNGs are great for graphics because they also allow for transparencies which make them ideal for icons that you want to overlay on a web page.

There are several types of PNG images:

• 8-bit index colour: 256 pixels of colour resulting in very small file size
• 24-bit indexed colour: millions of colours like JPEG
• 48-bit indexed colour: high-quality image storage that results in very large image file sizes
• 16-bit grayscale: useful for image storage and not for publication on the web

Use the PNG image format when you are working with flat colours with hard edges and transparent areas.

Images in Context

As you’ll read in  Chapter 3. Website Design, content strategy and flow is all about making your message and content relevant to your target audience. Same goes for image selection on social media sites. Images should always add value to the content (copy) surrounding it. For example, if you are building a website for car rentals, show an image of the specific car directly next to the car make, model and description.

Images should be cropped and resized to ensure they do not take more than 3 seconds to load. The smaller the pixel-size of the image the faster it will load on the page. Ensure your images are less than 1MB in file size to meet that 3 seconds mark.