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:
| Table 1: Vector and Raster Image File Formats |
|||||
| Raster | Vector | ||||
| Encapsulated PostScript File (.esp) | Adobe Illustrator native file format (.ai) – not web-friendly |
Scalable Vector Graphic (.svg) | Joint Photographic Experts Group (.jpg or .jpeg) | Portable Network Graphics (.png) | Graphical Interchange Format (.gif) |
| There are considerably more vector image formats than raster. | WebP Image (.webp) | Tagged Image File Format (.tiff) | Adobe Photoshop native file format (.psd) – not web-friendly |
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 million