Optimising images is integral to making a website faster and more efficient. Large or poorly optimised images can significantly slow down a website, leading to a frustrating user experience and potentially even driving users away. Here are some best practices for optimising images to make your website faster:
- Use the appropriate image format: Different image formats have different characteristics, and choosing the right design for your images can significantly affect file size and performance. For example, JPEG is a good choice for photographs, while PNG is better for graphics with flat colours and transparent backgrounds.
- Compress images: Compressing images can significantly reduce their file size without significantly affecting their quality. Various tools are available for compressing images, including online tools and software programs.
- Use responsive images: Responsive images are optimised for different devices and screen sizes. By using responsive images, you can ensure that users on other devices are only served images that are appropriate for their device, which can improve performance.
- Use a content delivery network (CDN): A CDN is a network of servers that delivers content to users based on their geographic location. By using a CDN, you can ensure that users are served images from a server close to their site, improving performance.
- Optimise image file names: Using descriptive, keyword-rich file names for your images can help search engines understand the content of your photos, which can improve your website’s search engine ranking.
Use a Content Delivery Network (CDN)
A content delivery network (CDN) is a server system that delivers content, such as websites and media files, to users based on their geographic location. CDNs improve the performance and security of online services.
Using a content delivery network (CDN) can help improve the performance of your website by allowing it to serve content, such as images, from servers closer to the user. This can help reduce loading times and improve the overall user experience. However, optimizing your images can still be beneficial even using a CDN.
Optimizing your images can help reduce their file size, further improving loading times and saving bandwidth. This is especially important if you have a lot of large images on your website or if you have a lot of users accessing your site from areas with slower internet speeds. Optimizing your images can also help reduce the strain on your server resources, which can help improve the overall performance of your website.
In general, it is a good idea to optimize your images regardless of whether you are using a CDN or not. This can help improve the performance of your website and provide a better user experience.
How To Resize Your Images
There are several online websites that you can use to properly optimise your images before uploading them to your website.
We ALWAYS use tinypng.com to optimise our own and clients’ images.
TinyPNG is a tool that allows you to compress images in PNG and JPEG formats. It uses lossy compression techniques to reduce the image’s file size without significantly affecting its quality. This can be useful if you need to reduce an image size for a website or other online use, as smaller image sizes can help improve loading times and save bandwidth.
To use TinyPNG, you can upload an image to the website, and it will automatically compress the image and provide you with a download link for the smaller version. You can also use the TinyPNG API to integrate image compression into your applications or workflow.
We used TingPNG to optimise this screenshot of the TinyPNG website.
The result is a saving of 74%. The png file was 1.4MB down to 335.1KB.
Resizing Images
We then reduced it by another 68% by resizing to 600px (length) and running it through TingPNG again, making it only 78.4KB.
To resize images, we either use Photoshop or a handy Mac app called PhotoBulk. PhotoBulk also optimises images, but we find it best to use it to resize the images first and then drop them into TinyPNG to do its magic.
Conclusion
Following these best practices, you can optimise your images to make your website faster and more efficient. This will improve the user experience and help ensure your website performs at its best.
