The purpose of this blog post
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.
Well, results were not that great
Something was eating my resources and it was my images so I had to find a way to optimize them
Current setup
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
But you might say that there are plugins for Cloudinary as well especially for Gatsby like gatsby-source-cloudinary and gatsby-transform-cloudinary which can solve the problem.
The setup isn't poorly optimized, the images on that setup are
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 goal is faster builds with the least amount of configurations
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?
Smaller width and height
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
Decreasing image quality
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
here it saved 1.2 Megabytes out of 6.5 Megabytes from those images which relatively not bad at all
Results
drum rolls, please 🥁
well, I still have to optimize but hey! on the bright side, it did jump from 40 to 77
That is a good start for improvement
A better way to handle this situation
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.
Top comments (1)
Another very important point on SEO is the optimization and compression of images on the site. Here is an interesting article on this topic: optipic.io/en/blog/images-seo-opti...