Image optimisation service for Netlify CMS and Nuxt

I ones wanted to distribute PDF files from my website and was looking for the ways to handle that with my Nuxt site on Netlify. During the search, I found Netlify Large Media service which intended to help to work with large files in Git. In this article, I will mostly use "NLM" abbreviation for convenience. So while I was skimming through its description, I saw the image transformation service that NLM provides. Basically, it makes images with custom sizes on load request. I found this interesting and made a to-do to investigate that.

While building my website, I just used .png images when I needed them. They all were simply located in one of my project folders. And since I use Netlify CMS, images from articles were also stored the same way. And some of the images were pretty big; for example, my picture in the bio page was 2.14 MB. As expected, those pictures sometimes were loading for quite a long time. Not really good. And from the SEO view, site speed is important. So I also started researching how this is usually handled on the web. There are many resources on that topic, and I fastly found service named ImageOptim, which provides the great-looking solution. But it isn't free nor at least offer a free plan. I also read several articles on the topic and got an idea of how it is usually done.

Then I got back to Netlify Large Media. Overall, it looked sufficient for my needs, and long requirements & limitations list looked not so scary. This service use Git Large File Storage that, instead of storing exact files in the repository, stores files somewhere else and put pointers to the files instead of them. And pointers are just fraction of the size of original files. NLM handle the creation of these pointers and stores files on its own CDN's thus enable making transformations on the images when they are requested. While, when you work locally you still have normal images(they are preloaded by Git), not the pointers, so you keep usual easy of use. In the project, you still just specify a path to it, like this: /img/some_image.png. With this, on a local project, the original image would be loaded. On the deployed site, an original-sized image will be fetched from NLM too.

And when you want to transform image, you just add properties to the path, like this: /img/some_image.png?nf_resize=fit&h=400&w=400. Then you will get an image with size reduced to 400x400 px dimensions on the deployed site.

Sounds good, but NLM is not a straight forward solution and completely change the aspect of working with selected files in Git. This can lead to a terrifying time if something doesn't get to work. And a project could completely break, as happened to me, as you can find out in this article.

One more important point was the fact that Netlify CMS should also support selected image optimisation service. So it would be comfortable adding images on articles creation. On-time of writing, there were just three supported systems: Cloudinary, Uploadcare and Netlify Large Media. I also checked the first two.

From my first sight, I wanted to use Uploadcare. It looked so sleek. It's a distinct service where you could upload and store your images and can do a lot of operations on them. All usual ones, like cropping, resizing, adding visual effects, etc. and something more special ones like AI face and objects detection on images. Image fetching in the project is also made by URLs with additional fields for needed transformation, very like with NLM. However, you specify not the local-like image URLs, but the ones from Uploadcare domains, since all your files are completely there. I liked the look of Uploadcare so much that this wasn't a problem at all. Yeah, a great visual presentation has a really high impact on buyers wishes 😉. But when I finally reached the Price page…Well, it's definitely wasn't for me ☹. Basic plans cost over $100 a month, which is something for more big guys.

Great visual presentation has a really high impact on buyers wishes

The third player, the Cloudinary, is very similar to Uploadcare. But for me, it looked less pleasant nevertheless definitely working. The big plus of Cloudinary is that they had a pretty generous free plan. Actually, the price was shown like this: $17 - $0 🤔. I think this is just a marketing hack and the plan is always free, but who knows…

After some checks and thinking of what to choose, Cloudinary or Netlify Large Media, I finally went with Netlify Large Media. Mostly what bought me in NLM is that it's still kind of all-in-git approach and the fact that I would stay in Nuxt-Netlify ecosystem. Their pricing also looked pretty generous, and I would hardly reach the bar when I need to pay for it.

In my next article, you can read about my thoughts after installing Netlify Large Media and why I would rather go with Cloudinary next time.