Basic Image Optimization on Gatsby when using an image provider

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.