Previously, I shared how to easily optimize your images with Cloudinary and Netlify by using the Netlify Cloudinary integration. In that blog post, I demonstrated a basic Eleventy blog that made use of images across the site. I then added the Netlify Cloudinary integration with no work on the code side. As a result, there were tremendous improvements to the images, both in size and format with the best images being sent to browsers automatically.
In that initial blog post, the only configuration I did was to specify my Cloudinary cloud name, but the integration supports more than that. Let’s take a look!
First, let’s make changes to the Cloudinary integration, or more broadly, any integration at Netlify. If you log in and select your site, click Integrations in the navigation:
This will land you on the Integrations page which, a bit oddly, defaults to “All,” so select Enabled to filter to ones you’ve actually installed:
From here, note two things. If for some reason you don’t like your images automatically becoming more awesome, you can quickly disable the Cloudinary integration. Next, check out the Options dropdown:
There’s a lot to love here, especially the instant access to the changelog. With it being hard (in general) to keep up with changes to our code and dependencies, I really appreciate this being the first option. What you won’t see here is the ability to configure your integration. At this time, it isn’t possible to change how the integration works in the Netlify UI. For that, you’ll need to switch to file-based configuration. Let’s walk through that process now.
While Netlify’s dashboard makes it easy to configure how your site works, file-based configuration can be incredibly handy as well. Even better, being file-based means you can track changes to your site’s configuration in your repository. To begin, you’ll add a netlify.toml file to your site.
In there, you can add explicit support for the integration by adding a plugins section.
(Note: Like YAML, TOML is both easy to use and strict when it comes to formatting. Be careful with your formatting!)
[[plugins]]
package = "netlify-plugin-cloudinary"
Code language: JavaScript (javascript)Next, to add configuration options, you can use plugins.inputs. For example, when you set up the initial Cloudinary integration, you were asked for your cloud name. This is saved to a Netlify environment variable, but can be specified in the netlify.toml as well:
[[plugins]]
package = "netlify-plugin-cloudinary"
[plugins.inputs]
cloudName = "raymondcamden"
Code language: JavaScript (javascript)Given that we now know how to specify configuration values, what’s available for the Cloudinary integration?
- cname. Allows you to specify a custom domain name for building URLs.
- deliveryType. Allows you to specify how Cloudinary stores images. This defaults to fetch but can be set to upload.
- folder. Allows you to specify a folder where images will be stored. This defaults to the Netlify site name.
- imagesPath. Allows you to specify (as either one value or a list) where in the local system images are served from.
- loadingStrategy. Lets you specify a loading strategy for images, either eager or lazy (the default).
- privateCdn. A boolean that turns on private CDN distribution of images.
- uploadPreset. Lets you specify a custom preset for uploads.
- uploadConcurrency. Sets the maximum number of uploads at once.
Each of these is described in more detail at the integration’s documentation, but for now, let’s deep dive into one more configuration, maxSize.
When working on a site with multiple authors, editors, and designers, it’s not always possible to enforce guidelines for images. Sometimes properly resizing images is just simply forgotten. One of the most powerful features of the Cloudinary integration is a way to force a defined maximum size right in your configuration.
The setting, maxSize, takes a set of three possible sub-settings:
- dpr – Device Pixel Ratio
- height
- width
For example, if you want to set a max width of 800 and height of 800, you can configure it like this:
[[plugins]]
package = "netlify-plugin-cloudinary"
[plugins.inputs]
cloudName = "raymondcamden"
[plugins.inputs.maxSize]
width = 800
height = 800
Now here comes the truly incredible part. First, those values are maxes, not a size to set images too. What that means is that if an image in your site is larger in any dimension, it will be proportionally resized to get within those constraints, respecting your aspect ratio. Second, the plugin will never increase the size of your images.
While a “one-dev” shop probably doesn’t have to worry about a new image being added that isn’t optimized, it’s also nice to know that this can act as a safeguard for when accidents happen. I always resize every image I add to my blog post, and I can guarantee that there have been times when I’ve forgotten to do so. Now this can be prevented automatically! Let’s test it to be really sure though.
In the last blog post, I created a simple Eleventy blog that used a header image and allowed images in individual posts as well. Here, I’ve created a new blog post and specified both:
---
layout: post
title: Kitten Post
tags: posts
date: 2020-10-10 12:00:00
header: /images/cat_path.jpg
---
This is the Gamma post. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sem ante, elementum ac efficitur id, vehicula vel ipsum. Quisque ornare convallis est, eu ullamcorper dolor luctus sed. Cras aliquet nulla non interdum ultrices. Nam pretium tellus non rhoncus tempor. Cras sit amet metus sed nunc ultrices efficitur. Donec laoreet magna ante, id sagittis tellus gravida a. Duis venenatis gravida cursus.
Ut eros sapien, iaculis non lacus vel, condimentum viverra mauris. Duis quis interdum elit. Fusce arcu eros, ornare vitae interdum in, consectetur mattis lacus. Donec ornare venenatis sollicitudin. Cras nec rutrum ex. Vivamus vitae felis in ligula pretium dapibus id at mauris. Aliquam nec lectus et turpis vehicula suscipit eget eget erat. Donec bibendum at dolor at aliquet.
Integer lobortis est nunc, laoreet lacinia lectus sollicitudin sed. Integer mauris justo, tincidunt ac erat at, vestibulum rutrum metus. Praesent convallis arcu sed arcu mollis, quis ullamcorper ante euismod. Nullam non lacus eros. Sed lacus sem, blandit nec erat venenatis, vestibulum euismod diam. Vestibulum sapien enim, aliquet id nibh vel, varius varius orci. Quisque in lectus non massa vulputate ornare ut a sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec pulvinar vehicula velit, sed porttitor purus feugiat sit amet. Duis fringilla purus lacus, maximus ornare ex interdum quis. Quisque a ex venenatis, malesuada eros at, condimentum diam.
In this case, I forgot to resize the images and never bothered to actually check in my local environment. The results are… not so great:
You can’t even see the text of the article above the fold due to the header. Now let’s see what happens when deployed and built on Netlify:
You can view this post (and the rest of the site) here: https://netlify-cloudinary-test.netlify.app/.
The source code for the same may be found here: https://github.com/cfjedimaster/netlify-cloudinary-integration.
As a quick aside, note that you may encounter some issues getting Netlify to use the very latest version of the Cloudinary integration. You may need to set the latest version as a dependency in your package.json file like so:
npm i --save-dev netlify-plugin-cloudinary
I’d recommend doing this when moving to a file-based configuration of your Cloudinary integrations. Finally, don’t forget to check the netlify-plugin-cloudinary repository for the latest docs and updates!
