Images take up the most physical space on your server. That means they also take the most physical space on your user’s device, which means they also take the most time to load.

Slow loading times greatly impact your conversions and images really take the longest to load.

There are two ways an image takes up too much space. First, it’s not compressed in its physical size on the disk. So you can have two images that look the same, but one has 1MB and the other has one fifth of a MB.

How is this possible? Well, I’m not sure how image compression works, but it makes images smaller in size on the disk without reducing their size or quality on the screen. You can use plugins such as Smush for WordPress, or image compression tools like ShortPixel which have APIs. You can also compress your images every time you upload them using TinyPNG. If you can’t connect a tool, just download batches of images (if you don’t have thousands) compress them and then reupload them to your server.

Then, of course, you have the size on the screen. A 2000 by 2000 pixels image will take up more physical disk space than a 500 by 500 pixels image. Therefore, don’t load a 2000x2000px image and shrink it to 500x500px using CSS. The browser will have to download an image 4 times larger than it needs.

To make this work with responsive designs, you can research the “srcset” HTML attribute. You can use it to only download specific images on specific screen sizes.