Choosing the Best Image Formats for Your Website

User Interface Design, Web Design

With the days of slow dial-up internet long behind us, it is easy to forget about website load times and fall into the trap of throwing high-quality but cumbersome photos onto your website – straight from your digital camera. But while large graphics can look stunning when used in the right way, page load time should always be a top consideration.

Mobile Web Browsing

Although home broadband connections have never been quicker, visitors trying to find your business from their mobile phone or tablet are often throttled with slower load times and higher bandwidth costs. Not only could your website be slowing to a crawl for these users, it could also be costing them money!

This is a particular concern if your website does not have a mobile-friendly version. Mobile websites are typically designed to be smaller and more agile counterparts to a full website. Mobile websites will often show only essential information about your business so that people on the go can quickly learn where you are, who to call, and what services your business provides.

If your website contains images of a large file size, whether they be photos, diagrams, or artwork, your mobile visitors could pay a hefty cost. For all their trouble, mobile visitors, confined to much smaller screens than those on their computers at home, will usually not even be able to enjoy the quality of your images as they are scaled down to fit their smaller screens.

Choosing the Right Image Format

One way to ensure your files are not too large is to choose the most appropriate file format for the type of image you want to display. The most important factor to consider is whether your image is a photo or a simple graphic such as a logo or diagram. Other considerations to be aware of include whether or not your image is animated, uses transparency, or is especially colourful. We can help you set up all your digital design needs

JPEG Format

JPEG (pronounced jay-peg) is a popular file format you may already be familiar with. The JPEG format is how photos are commonly stored from a digital camera. These types of files end in .jpg or .jpeg. JPEG is a great format for photographs (the P in JPEG stands for photographic), which are rich in colour and texture. JPEG works by storing the information in your image in a way that often produces a much smaller file, in the process altering the image slightly and thereby reducing its quality. This technique is called lossy because data is lost in the process of saving to JPEG format. If done properly, the decrease in quality will be unnoticeable to the average viewer of your website.

Unless your photo requires transparent regions (such as if you are cropping out a person from their background) or is an animated image (such as a short video clip), use JPEG for all photographs.

Most digital cameras save photos in a very high resolution. This means your photos will have very large dimensions, wider and taller than most people’s screens. It is therefore critical to ensure that your photo is resized to be only as high and as wide as it needs to be before using on the web. For maximum results, save your file at a quality setting which achieves as small a size as possible without reducing the quality to a noticeable degree, and save your file without metadata. These options are available to you in many types of photo manipulation software, such as Photoshop.

JPEG Tips

• Use JPEG for all standard photos.
• Never use JPEG for simple graphics such as logos or diagrams.
• Select a quality level for your JPEG files which has a balanced trade-off between size and quality.
• Make sure the physical dimensions of your image are small.
• Save JPEG files without metadata when using the web.

PNG Format

PNG (pronounced ping) is a newer image format that has become popular on the web due to its efficient way of storing simple graphics that contain few colours, such as logos, diagrams, and icons. PNG files end in .png. PNG stores images using a lossless technique, meaning no information is lost in the process of saving your files as PNG format. This fact means the crispness of your graphics will be maintained meaning none of the “fuzzy” look associated with poor quality JPEG files will be apparent.

PNG can also store images that contain transparent regions or even translucent (partially transparent) regions. However, PNG is not capable of handling animated images.

PNG Tips

• Use PNG for the most simple graphics.
• Use PNG for graphics that contain transparency, especially partial transparency.
• Use as few colors in your image as possible to decrease file size.

GIF Format

GIF (pronounced jiff, commonly as gif) is a file format that has achieved fame on the web due to its ability to save short animations, which can easily be shared with others. GIF files end in .gif. Unless your graphic is animated, there are often better formats for saving your image. Like PNG, GIF is a lossless format and is best suited for storing graphics with few colors such as diagrams and icons. However, PNG usually results in smaller file sizes. If your graphics are very small (only a few pixels high and wide) GIF can result in smaller file sizes than PNG, but this is a rare exception.

GIF can store photos which contain transparent regions, but cannot store translucency. This means each part of your graphic must be either completely opaque or completely transparent. This effect can produce jagged edges when used improperly but works well against straight horizontal and vertical lines.

GIF Tips

• Use GIF for short animated graphics such as loading icons.
• For longer animations, especially video clips, consider saving in a video file format.
• Use GIF for extremely small graphics.

Other Image Formats

In addition to the three most common image formats used on the web, JPEG, PNG, and GIF, there are a host of other formats supported by different web browsers.

SVG

SVG is an emergent format on the web, with usage increasing as web browser support increases. Like PNG and GIF, SVG is best used for simple graphics. However, unlike PNG and GIF, SVG images can be scaled up or down with no change in quality. This makes SVG a popular choice for websites that change depending on the visitor’s screen size, as they can remain sharp no matter how big or small they are presented. Unfortunately, browser support is lacking in older web browsers. If your website is only concerned with modern web standards without regard to older web browsers, SVG may be an option for you.

WebP

WebP is an image format developed by Google, which is designed to optimize images for the web by keeping file sizes smaller while retaining the same quality that JPEG and PNG provide. Although there are few trade-offs, WebP is a fairly new image format, so support is not available in a wide range of web browsers. In the future WebP may be the go-to format for all images on the web.

BMP

BMP is an image format that you may have experience dealing with through Microsoft Paint. BMP files are lossless but are often very large – larger than any other formats specified here. As a result, web browser support is lacking for BMP. Never use BMP files on the web.

APNG

APNG is a similar format to PNG, but it has the added capability of enabling animation. Web browser support for APNG is sparse, so it is not recommended for use on the web.

ICO

ICO is a format used for saving icons. On the web, ICO is commonly used to store a website’s favicon (favorites icon), which appears on the tab of a web page at the top of your web browser, or in your list of bookmarks (also called favorites). ICO should only be used on the web for favorites icons.

More Techniques

• Scale down your image to be only as big as it needs to be. Large images, especially photos, can bog down otherwise simple websites. Smaller images are almost always smaller in file size too.
• Save your image in an image manipulation program such as Photoshop, which has in-built techniques for helping you keep image files small. The photoshop tool Save for Web is a great way to control the file size and quality of your images.
• Remove extraneous metadata from your images. Metadata such as what camera your photo was taken on and on what settings, what time the image was created, and what software it was created on are nice, but add unnecessary bulk when these images are destined for the web, as this data is never shown on screen.
• To further decrease file size, use a tool such as Smush.it.