the purpose of this blog post is to shed some light on basic image optimization. I have worked with designers before that they demand to have full resolution images on the site or the client pushes really big images. There are times where you can't use image optimization libraries so you have to do some compromises
so today I have decided to optimize my blog.
My blog runs Gatsby as my static site generator along with Forestry as my git-based CMS but before you start telling me about plugins for Gatsby like gatsby-plugin-sharp, I am using Cloudinary as my image provider
My biggest purpose of using an image provider is to decrease the bundling size of my site by not cluttering it with images also Forestry does an amazing job pushing the Cloudinary URLs inside of the blogpost markdown file without adding more configurations and plugins to my Gatsby site hence there was no problem at all from the setup side
The problem is that I have been pushing really big images which are slowing down the site
When you push URLs from an image provider, it is not easy to use something like Sharp to optimize your images
a good explanation from Gatsby when optimizing your images which you can read it here
However, this image optimization can come with a cost. It can be fairly CPU intensive, and in some cases may lead to long build times. As a means of debugging and perhaps improving your overall build performance, it may be helpful to pre-optimize your (extremely large) images.
So when you are using the Sharp plugin, it might cause your build to take some time especially when you have a good amount of images to optimize.
The setup is already working properly with the essential configuration needed, it wouldn't make sense to add more plugins and modify your existing code, so what would you do?
One of the images that got flagged on Lighthouse has a whopping 5400 × 3375 (width of 5400 pixels and height of 3375 pixels) with a file size of 1.5 Megabytes
That image was big not to mention other images are loading as well hence slowing down the site when loading.
If you are using images from sites like Pixabay or Pexels then consider downloading the smallest version possible which comes at a width of 640 pixels and height of 425 pixels which comes at an average size of 41 Kilobytes (the medium size is at a width of 1280 pixels and height of 850 pixels averaging on 258 Kilobytes)
If you are using your own images, consider decreasing the width and height to a smaller size (the 640x425 sizing is not that bad at all) on Photoshop or Affinity Photo then push it to your image provider
There are conditions where you cannot play with the image's width and height then you might want to consider lowering the quality of the images
Lowering the quality might cause the image to lose some of the colors that make it show and pop out a bit, it does decrease the file size but you are sacrificing quality for quantity
But keep in mind that similar to the Sharp plugin, this won't make your images super small but rather it decreases the sizing by a bit
If you use tools like Photoshop or Affinity Photo then all you have to do is load the image and export it with a smaller quality level
this image had an initial size of 1.1 Megabyte if you decide to decrease the quality by 70% then it becomes around 444 Kilobyte on a 1920x1271 sizing (1920 pixels width and 1271 pixels height).
Decreasing more of the quality might cause the image to lose more of its color and might even ruin the image itself
If you are using a Mac, ImageOptim is also a good solution to use as well
drum rolls, please 🥁
That is a good start for improvement
When you are working on a project from scratch, you might want to consider using image optimization libraries and decrease the size of the images that are getting pushed to your server programmatically up to a certain width and height to maintain consistency
but if you have an already established system that is working flawlessly then enforcing some image optimization rules won't hurt at all.