You’re a website user, you’re a business professional, you’re a blog reader, you’re a digital marketer, you’re a college student, you’re a procrastinator… whatever your profession, at some point in time you are bound to have come across a website with one of the following problems:
1) The images on it load too slowly and consequently, the entire website takes forever to load!
2) You’ve used up all of the space your blog, website, agency has allocated you because you’re using images that are simply too large.
Slow loading pages have a big impact on site performance. According to a survey by Akamai and Gomez.com, users will abandon a site if it doesn’t load within 3 seconds. It’s not just images that are to blame. Other things that impact page speed include: 301 redirects, plugins that Cache pages (WordPress is particularly guilty here), not leveraging browser caching or gzip compression, messy coding practices (make sure to move CSS and JavaScript off the page to external files), etc.
Optimising your images for online viewing/best user experience, and a fast page load time, is one of the simplest areas to get right. To check your page speed, try Google’s PageSpeed Insights tool.
Let’s start with a summary of the various types of images file formats. For simplicity’s sake, I am going to review the following file formats: GIF, JPEG, PNG, TIF and BMP as these are some of the most well known and most commonly used.
The three best formats to use on the web
GIF
Use this format for simple web graphics that consist of only a few colours. These files are reduced to 256 unique colours or less, so they are very small and load fast which makes them great for the web. GIF files support transparency, which allows you to place your image over any type of background you choose. You might use a GIF when creating buttons for use on the web, simple logos, icons, charts, diagrams, text headings, simple banners, etc.
You would not save a photograph as a GIF and you would not want to save a graphic with gradients as a GIF as colours are reduced and will make the transition look very rough.
GIF files also support the ‘interlacing’ feature, which means that when a user loads your page, the image loads instantly, starting out blurry and then becoming clearer as the images download. This is in comparison to large images that load slowly down the page. GIF files are also compressed which means they have a smaller file size than for example a PNG.
JPEG
JPEG images are typically used on websites and blogs and. They make use of ‘lossy compression’ so are generally best for small files. If your image has text/font in it, a JPEG is just about the worst format to use as it will decrease the quality of the image, making the text appear blurred.
But, when it comes to webpages which need to load fast and blogs which need file size kept to a minimum, JPEGs are by far the best format to use. Remember, large blocks of colour, crisp lines and text will lose some of their clarity.
If you’re planning on using your images online, try saving your JPEGs as progressive or interlaced. This won’t really change how fast your page loads but it will give the illusion of speed since the overall image will load at once and then slowly become clearer instead of loading down the page, clear from the start.
PNG
Use the PNG format when you need a smaller file size but still want to maintain the quality of the image. PNGs are typically smaller than TIF or GIF files but are larger than JPEG files. This format was developed to be a web graphic replacement for GIF files.
PNG files are lossless which means that they do not use quality during the editing process. In comparison, JPEG images do lose quality. While PNG-8 does not support transparency features, PNG-24 and PNG-32 do.
Use GIF, JPEG and PNG formats on the web
GIF Image
JPEG Image
PNG Image
Again, if you’re saving photos online, probably best to go with a JPEG. Definitely not a GIF, and a PNG only if you must as PNG images are still larger than JPEG files. However, if quality is more essential than page load time…go for the PNG but don’t forget that slow loading pages can have a big impact on your site’s user experience. In fact, a 1 second delay can decrease your website conversions by 7%.
If it can be helped don’t use these files online:
TIF
Most programs that allow a user to save TIF files will not allow compression though in principle TIF images can be lossless or lossy. These types of images create large files and are good for pixel-based images. TIF files are preserve layers, transparency and other features when saved using Photoshop. TIF files are useful as master files and are typically used in the printing industry. You would not use a TIF file on a website as the size of the file format is so large, many broswers will not be able to handle it. You would also not email an image as a TIF.
BMP
BMP files, like TIF files are used for pixel-based images and like TIF are very large files that do not distort the quality of an image. There aren’t any real benefits to using BMP files over TIF files and like TIF files, BMP files are not recommended for web browsers because this file format cannot be compressed.
Other pointers:
If you want your image to remain editable, use your software’s native file format. For example, PSD for Photoshop. You can always save an additional image in the format of your choosing as well. You may also choose to use a TIF file as your master file.
Stay tuned for the next episode of ‘fast loading websites’.
Need any help?
Xanthos specialises in web design, web development and ecommerce. That means we’re experts at creating websites that work well, that load fast and that convert browsers into buyers. Get in touch with us online or give us a call on 08450 740068
