When Size Actually Matters - Optimizing Images for Web and Performance
It's no secret that Google is a total size queen when it comes to images on your website; however, bigger is far from better. And let's face it - the LAST thing you want is for Google to hate your website because of a few large files.ย Optimizing Images for Web and Performance is super-duper important when maintaining/updating your website. If left un-optimized, you can hurt your chances of getting your photos to rank on Google and other image search engines. Not to mention, large image files will also slow down your website, which will result in a less than awesome user experience.
So before uploading fancy new product photos, gallery highlights or your latest headshots to your website - stop, drop, and optimize your images FIRST. Image compression/optimization is one of the simplest website maintenance tasks that can significantly improve user experience, SEO, and your overall web performance.ย Let's dive into how you can prevent Google (and potential customers) from hating your website.
Image optimization is when you decrease the file size of your images as much as possible so that your page load times remain low. There's a slight catch, though. Decreasing file size can reduce the quality of your images, leaving you with an 8-bit aesthetic that doesn't look so hot in 2021. Luckily, there are several ways to reduce an image size that will improve your website performance without compromising the quality of your visuals. Let's look at how you can format your images (without making them ugly) and reap all the fringe benefits of image optimization, including:
Your mission (if you chose to accept it) is to format your images, so they are the smallest file size possible with the best possible quality. So how do you accomplish this? There are a few ways to perform almost all of these optimizations in just a few steps.ย The two primary things to consider areย the file format and the compression type/method.ย By choosing the right combination of file formatting and compression type, you can quickly reduce your image size by as much as five times. Typically formatting and compression type is done in a tool like Adobe Photoshop or Affinity Photo; however, if you don't have access to these programs - don't sweat it. We'll share some alternatives you can try!
File formats can make a difference, so before modifying your images, make sure you've selected the best file type. The file type variations you can use are:
There are other formats; however, PNG, JPEG, GIF, and SVG are universally supported by all browsers. For images with lots of colours, ideally, you should use JPEG or JPG. For simpler pictures that aren't colour sensitive, stick to PNG.
Lossy Compression will eliminate some of the data within your image, meaning you might see a reduction in image quality (or what some would refer to as pixelated). Proceed with caution when using Lossy Compression because you cannot reverse this process. The most significant benefit of this method is that you can significantly reduce your file size. Both JPEGs and GIFs are considered Lossy image formats. Want to appease Google? Stick with this compression method.
Lossless Compression won't reduce the quality of your image, unlike its Lossy counterpart. This method strips away unnecessary metadata from a photo, reducing file size, but not by much. RAW, GIF, PNG, and BMP are considered Lossless image formats. This method is best for those who can't afford any quality loss - like photographers, food bloggers, and models who rely on pixel-perfect images to make a living.
It's good to experiment with compression techniques to see what works best for each image/format. With that said, we typically recommend using Lossy Compression to appease the Googs, and because you can easily compress an image between 70-90% without much loss in quality. If your image editing tools have the option, make sure to save/export your images for the web. This export option will result in decent quality adjustments with optimal Compression.
There are many tools and programs to help with your image optimization - both premium and free! Some offer the means to perform your own optimizations, and others do the work for you with the click of a button (or two).ย ย Here is a list of tools and programs to check out:
Always take the time to format your images for better performance. By doing so, your website will be better liked by search engines, browsers and will load faster for any visitors. If you're still having issues with a slow website after image optimization, get in touch. We'll help you get back on Google's good side!