Images often account for most of the downloaded bytes on a web page (averaging over 54%) and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website. Pictures can replace a thousand words but if they take away from your loading time, make sure they are telling a critical story. Slow load times reduce Search Engine Optimisation (SEO), and more importantly they ensure that you will lose customers, on mobile devices especially.

The primary goal of formatting your images is to find the balance between the lowest file size and an acceptable quality. There is more than one way to perform almost all of these optimisations. One of the most popular ways is to simply compress them before uploading. Usually, this can be done in a tool like Adobe Photoshop or if you are using a WordPress site by utilizing a plugin. The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.

Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:

• JPEG – uses lossy (a filter which eliminates some of the data) and lossless (a filter that compresses that data) optimisation. You can adjust the quality level for a good balance of quality and file size.
• PNG – produces higher quality images, but also has a larger file size. Was created as a lossless image format, although it can also be lossy.
• GIF – only uses 256 colors. It’s the best choice for animated images. It only uses lossless compression.

Ideally, you should use JPEG (or JPG) for images with lots of colour and PNG for simple images. GIFs are useful for animations, but these can blow out in size too if left unchecked so make sure they are also compressed. It’s best to experiment with your compression techniques to see what works best for each image or format. If your tools have the option make sure you save the image for web. This is an option in many image editors and will give you the quality adjustments so you can perform optimal compression.

Where possible, compress your images to a size that is reduced but doesn’t compromise quality. If you are using a web designer, they should be doing this already. If you are uploading yourself, you can use an online diagnostic tools to show you where your monster files are. If you ever find yourself encoding text in an image asset, stop and reconsider. As you already know, great typography is critical to good design, branding, and readability, but text-in-images delivers a poor user experience: the text is not selectable, not searchable, not zoomable, not accessible, and not friendly for high-DPI devices.

Speed of loading is directly related to ease of use and how favourable your Google ranking is. According to Google, a user will abandon a site that doesn’t load within three seconds. There is significant data to support that the faster your load time, the greater your engagement. The key culprits that contribute to a slow load time (aside from slow broad or narrow band) are images that are not optimised, background images that aren’t in external CSS, excessive white space, line returns and comment tags in your HTML coding, and other unnecessary javascript, all of which chew through bytes.

These are quite technical terms if you aren’t your own developer, but you will be able to troubleshoot now and know what the key issues are likely to be. If you want to get more in depth with your loading speeds, Google has a great guide with useful tools.