Summary (the one minute read)

There are just four file formats you need to know about; svg, jpg, png and gif.

The following table summarises which ones you should be using and where you should be using them on your ecommerce websites:

Very few websites use these visual formats perfectly in all situations. While svg is important for branding, it does require careful installation to reduce security problems. JPEG and PNG are by far the most common and  here are their two most common usage problems along with fixes:

1. Slow website caused by large images

Images are often the largest (file size) assets on a web page. As a very rough guide, if your photo is to fill all of the browser screen with the highest quality then if it’s larger than 1MByte it probably needs to be reduced in file size. If it’s only taking up 10% of the screen then files should be 100kBytes at most. In practice you can almost certainly reduce these a lot further without too much quality compromise. Reducing file size can be done by either reducing the dimensions of the image or increasing the level of compression if it’s JPEG. Be aware that images with a lot of fine detail take up more space.

2. Blocky images with staircasing

Most modern phones and computers have relatively high resolution displays. If the image being seen is of a lower resolution then a diagonal line will show up as a staircase. To correct this you will need to go back to the original image and select larger dimensions.

Advanced Concepts, detail and knowledge

What everyone wants are highly detailed top quality images, pictures, graphics and photos that load quickly for every user. Here we provide you with further knowledge of what you need to know for this to happen. Whether you are using  Magento, Woo, Shopify, BigCommerce or a similar platform then adopting good practice in this area will make your brand and your products more appealing to your customers.

Key principles that it’s good to adopt:

1. The format that will give you the best result depends on the subject matter i.e. a simple line graphic is best represented by a completely different type of file to a natural photograph.
2. Avoid using images that are too big as well as being too small. Correct sizing is all about understanding the native resolutions of those devices used by the vast majority of your customers.
3. Ensure that any image or graphic you use has been optimised for quality, brightness and contrast before you incorporate it into your website.
4. Having a good hosting environment can do a lot to speed up the display of visual information. Use of CDNs or dedicated image servers is common for larger ecommerce businesses.

Key misunderstandings that you need to avoid:

1. DPI (dots per inch) is a concept for the print industry and has zero relevance for digital. I only mention this because of the surprising number of times I come across the misunderstanding.
2. Just because you can see the image on your device the way you want doesn’t mean that everyone else can. You can never do enough user-testing.

Pixels v Vectors

Anything that’s visual that fills a space on your webpage is either in vector format or pixel format. Common examples of a vector format graphics would be a brand logo such as Sony. The visual depiction is represented as a series of graphical instructions using computer code. This has two big advantages. First they can be represented using very small file sizes. Second, they are scale independent. This means you can zoom into them as much as you like and they still look perfect. They don’t get jaggy or noisy however big you make them. These vector formats should always be held and owned by the brand owner within your branding guidelines. To show why brands should always use vector formats, compare a zoomed in version of these two football clubs:

‍

The Partick Thistle FC logo has been coded in a pixel format. When zoomed in the ‘staircasing’ distorts the logo. The Celtic FC logo was embedded in their website as a vector graphic and is not distorted no matter how much you zoom in. In terms of file size, the Celtic logo is less than 1/10th the size of the Partick Thistle logo - so that’s two-nothing to Celtic! In terms of brand control, the vector format is an absolute copy from the company branding guidelines while the pixel-based rendition is just a crude approximation.

The original and still commonly used vector format, Postscript, was invented by Adobe in 1984. It was designed primarily for control of fonts and was targeted at the print industry. More recently, Encapsulated Postscript was developed as a way to package up postscript files so that they could more easily be transferred between applications. For those with an historical interest, the Turing Institute in Glasgow developed a complete user interface called HyperNews based on and written in Postscript. Every item in the user interface, including the windows themselves, could be any shape rather than the rectangular windows in use today.

For ecommerce web design, SVG (Scalable Vector Graphics) is more commonly used as the markup language as defined by the World Wide Web Consortium (W3C). Because it was designed specifically for the web, it is highly efficient and compact in rendering computer-based graphics and designs that are to be shared over networks in applications such as web sites.

An implicit problem with SVG involves security. Because vector files are computer programs, it is possible to inject them with third-party code e.g. javascript. For this reason ecommerce platforms no longer natively support SVG although many work arounds are available such as for Magento or Shopify.

Pixel (raster) Formats

A pixel, picture element, is just a 2D location/patch where you can store a brightness or colour value - think of it as the digital equivalent of a dab of paint. When you have a large array of them it’s possible to create an image. These arrays of values contain header information that store additional information such as the X and Y dimensions of the image, when and where it was created as well as information about how the information is stored. This last item is critical if you are to use the image efficiently. This item is also the key factor in establishing how to use the image efficiently.

Pixel (picture element) formats are often referred to as being in ‘raster’ format. This is technically incorrect. A Raster is an analog concept from the early days of cathode ray tubes and TV’s where an analog spot of light moved rapidly across a glass screen (e.g. TV’s before they were digital) and has nothing to do with digital media.

Pixel file types and how they store their data.

If you have an image that has dimensions of 1000 (vertical) by 1000 (horizontal) pixels then you have to store 1,000,000 values. That is a lot of data and helps explain why images can take up so much space on your web server and can contribute such a massive handbrake to how quickly your web pages load.

A fundamental point about images is that, statistically, neighbouring pixels are highly likely to be similar. If you point to any random location in either the visual world or in an image then the picture elements that are adjacent are highly likely to be identical or almost identical. This is a constancy that assumes that the world is mostly continuous most of the time. If the spot you have pointed to was on a leaf then the spot next to it is most likely to also be on the leaf. This basic idea (that adjacent pixels have similar values for colour or brightness) lays the basis for all the methods used to compress images and so make them more efficient for both storage and bandwidth.

If the image was computer generated and the upper part of the image was all the same coloured blue sky then you might have the first 50 horizontal rows all the same colour blue. Image formats such as gif or tiff originally used a technique called run-length encoding to store the value and then say ‘how many repeats there are. With a 1000 pixel wide image and 50 lines of repeats then a gif image would store the ‘sky’ as just two numbers (50 and 1000) rather than 50,000 repeat numbers that were all the same. Today, a refined version of this technique is called the LZW transform and is currently used for gif compression.

The format has been largely superseded because the original patent holder (Unisys) tried to claim global ownership for its use. This resulted in an alternative format (PNG Portable Network Graphics) being developed which is now widely adopted across all types of websites

Both the gif and the png formats have a further trick in that they can store short sequences of images that can be useful for depicting low-resolution animations. The following shows  side-by-side comparison of the two as animations:

‍

The PNG format, like gif or tiff, is good for storing graphics images that have been artificially created by computer programs. They are lossless so they save you storage space without any loss of appearance quality.

For ecommerce businesses making extensive use of CAD systems (e.g. WholesaleDomestic) for product images, it’s likely that PNG format will provide improved detail and smaller file sizes than formats such as jpg.

Gif and PNG formats can be read by all web browsers. In summary, use gif where you have small animations (as commonly found on japanese websites) and use PNG where you want to show a computer graphic such as an image of a pie chart or graph. The images will be crisp, sharp and efficiently stored.

There are many different approaches and techniques used to compress images. Each is termed a Codec. Each Codec is a specification which includes all necessary information to compress and uncompress the image.

The next section  covers real world images (e.g. photos). What these have to cope with is noise.

Pixel-based formats for photographs

By far the most popular format for photos is jpeg (a.k.a.jpg, jif, jpe, jfif and jfi). JPEG was first defined by the Joint Photographic Experts Group in 1992.

Unlike the lossless gif and png formats, jpg uses a form of compression that reduces detail using a discrete cosine transform (DST) algorithm. The amount of compression designed to ‘squeeze down’ the size of the image is a variable that can be controlled by the user:

The JPEG  image shown here has a high level of compression on the left and low compression on the right. Courtesy: Wikipedia.

The distortions caused by jpeg compression depend very much on the underlying image. Most images contain noise and jpeg compression can significantly reduce this - particularly in areas where there are gradually changing smooth surfaces and little fine detail. To the human eye, some images can be compressed a lot before they contain noticeable distortion. Most ecommerce content managers simply set one fixed compression level that doesn’t get changed, if you are keen to optimise your product pages then it may be worthwhile experimenting and applying different levels of compression to different images. In practice you may find that you can half the size of an image with virtually no change to its visual appearance. Doing so may dramatically speed up your webpage load time which, in turn, may help conversion, lower your server costs and allow you to increase the number of concurrent website visitors without upgrading your server.

All other things being equal, noisy images not only look worse but will usually have larger file sizes for the same level of JPEG compression. A key principle here is to use a camera that creates the best quality images, with least noise. Also, having the subject well lit will almost certainly reduce noise which usually increases at low-light levels.

Other Formats

JPEG 2000 is sometimes called progressive jpeg. The main difference here is that the jpeg file loads in stages with additional detail being added with each iteration. JPEG 2000 uses a completely different compression method that is based on the discrete wavelet transform (DWT). In practice, the original jpeg proved almost as good. A consequence is that few browsers, most noticeably Safari, support it.

WebP is an image format developed by Google employing both lossy and lossless compression. It supports animation and alpha transparency. It is designed to create files that are smaller for the same quality, or of higher quality for the same size, than JPEG, PNG, and GIF image formats. The reason why it has not become a major standard is because it is not currently supported by Apple or by most Safari browser versions.

HEIF/HEIC is an image file format which encapsulates HEVC (High Efficiency Video Codec) encoded images. In comparison to JPG, it’s originators claim that it  reduces the file size by up to 50%. Starting with iOS11, HEIC is the new standard format for storing images on Apple's mobile devices. The format is not supported by Google Chrome browser and, consequently, not used outside a few niche application areas.

Conclusion

All ecommerce platforms and all browsers support jpg, png and gif image file formats. Of these three, gif is the least popular given that PNG does everything that gif does. We would only recommend these file types for brand, category and product images or graphics. The only exception is the use of SVG vector format. Providing the developer is confident that the site and it’s codebase is well protected against hackers, these should be used for brand logos.