Does your website load slowly?

Did you know that images account for more than 60% of the bytes on average needed to load a web page? More bytes = more loading time, so let’s take a look at a few tricks to help your website load as fast as possible by reducing the size of images uploaded.

For this example, I’m using an image downloaded from Google. It’s 4,776 pixels wide by 3,138 tall and just under 2MB. If I decide to upload that to the home page of my site, you can expect the time to load to increase significantly, especially on a mobile device. So, let’s fix that by using some free online resources and completing the following steps:

1. Resize the image. Depending on the structure of your website, you probably don’t need an image as big as the one I’ve downloaded. I’m going to resize mine down to 1,920 pixels wide (consult your website designer for the appropriate size to use).
2. Compress the image. If you’ve read about compression at all, you may have learned about lossy vs. lossless compression. Generally if you’re working with a large jpeg with a lot of colors, you’ll need to use lossy compression. On a scale from 0 (low quality) to 100% (high quality), you start to see actual quality degradation at a compression rate of about 80%. If you’re image has a lot of texture, you can safely reduce much more than that without much difference.