Whenever I’m asked to speed up a slow site, 9 times out of 10, images are the biggest thing slowing them down. They’re too big, not compressed properly, in the wrong file format, and the list goes on. If you want to speed your site up, you need to be paying more attention to your image.
Image File Types
Image file types play a big role in how large their file size is. PNG and JPEG are the most common file types, but they aren’t the only ones, and they aren’t even the fastest.
PNG
PNG file types are the biggest. Do not use this file type for most images on your site. You’ll only really use a PNG for your logo or if a transparent background on an image is critical to your website.
JPEG
JPEG is the file type you should be using for most images on your website. It’s smaller than PNG, so they take less time to load. A properly sized and compressed JPEG will be at least half the file size of a PNG at the same dimensions and compression, and the average person won’t be able to tell the difference between the two.
WEBP
WEBP is a more recent file type, it’s smaller than a JPEG, but it can also have a transparent background like a PNG. Sounds amazing, right? Well, I would caution against using it. WEBP isn’t supported by all browsers, so if you use WEBP, not everyone will be able to see the images on your site.
AVIF
AVIF file types are more recent as well. This file type is even smaller than WEBP, with no blurriness or other visual distortions that usually come with smaller file sizes. So why not use AVIF? It has the same problem as WEBP, not all browsers support it.
Properly Sized Images
So now your image is the right file type, the next step to consider is the right dimensions. Even if f your image is only displaying on your site as 300px by 300px, if you uploaded it as 600px by 600p, it will still have the file size of the larger 600px image. You’ll need to properly resize your images before you upload them to your site.
If you need to resize images that are currently on your site there are a few tools you can use to get the job done. For example, Cloudinary has an online tool you can use to find what the proper size of your image should be, resizes them for you, then lets you download the optimized images so you can add them to your site.
Compressed Images
Image compression is an often overlooked step, but one that is critical to your image optimizations. When you properly compress an image, you can reduce the file size, without reducing the quality of an image. There are lots of tools you can use to do this quickly and easily. Some people just use photoshop, but if you don’t have access to that, you can use online tools like TinyPNG to compress images of any file type before uploading them to your website.
Your Sites Performance Depends On Your Images
Images are arguably one of the biggest reasons for a slow site. If you don’t want visitors to leave in frustration because the page won’t load, make sure you’re using properly optimized images. Once you have your images down, you can check out my other guides to get your site running lightening fast.