Image File Size and Site Performance
As you’ll quickly learn with having a website, site speed and performance are important things to continually work on and improve. This Kinful guide is specifically overviewing how to make one easy update that will greatly improve your site performance: Image compression. For other improvements, and a general understanding of the balance between design and site performance, check out this article from Shopify.
One of the easiest ways to increase your speed is to make sure your images are compressed as much as possible, but doesn't that mean the images will be blurry and small?
Not necessarily. We can still have high resolution images that look crystal clear, and have a lower file size, by using lossless compression.
High Resolution Photography
You have a beautiful super high resolution image from a photographer that you want to upload to your site. You’ve already sized it to the correct image size, and exported it. Now what?
Well, that original image carried a lot of data from the photographer (documentation on the camera, aperture, exposure, etc.) that can get passed through to your new, properly sized image. That data increases the file size of the image, and indirectly slows down the speed of your website.
A higher file size means that the site has to load it each time the page is loaded. The more it has to load, the slower it’s going to load.
So what do we do to optimize that image, and strip out all that unnecessary data?
Lossless compression
In short, lossless compression means you can reduce the file size of an image without reducing the image size (or quality) of the image. This is super important if you have an image heavy site.
Using lossless compression can cut the file size down by 70% - 90% percent, making your website that much faster.
We recommend using this site to do so.
TinyPNG is a great (and free) resource to reduce the image size of your photos. You’d simply upload all of your images to this site, then download them and upload to your website.
