{"id":32407,"date":"2024-01-04T07:00:00","date_gmt":"2024-01-04T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32407"},"modified":"2024-08-05T00:24:32","modified_gmt":"2024-08-05T07:24:32","slug":"further-image-optimization-tips-netlify","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/further-image-optimization-tips-netlify","title":{"rendered":"Further Image Optimization Tips With Netlify"},"content":{"rendered":"

Previously, I shared how to easily optimize your images with Cloudinary and Netlify<\/a> by using the Netlify Cloudinary<\/a> 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<\/em> 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.<\/p>\n

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\u2019s take a look!<\/p>\n

Configuring Your Integration<\/h2>\n

First, let\u2019s make changes to the Cloudinary integration, or more broadly, any integration at Netlify. If you log in and select your site, click Integrations<\/strong> in the navigation:<\/p>\n

\"alt\"<\/p>\n

This will land you on the Integrations page which, a bit oddly, defaults to \u201cAll,\u201d so select Enabled<\/strong> to filter to ones you\u2019ve actually installed:<\/p>\n

\"alt\"<\/p>\n

From here, note two things. If for some reason you don\u2019t like your images automatically becoming more awesome, you can quickly disable the Cloudinary integration. Next, check out the Options<\/strong> dropdown:<\/p>\n

\"alt\"<\/p>\n

There\u2019s 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\u2019t<\/em> see here is the ability to configure your integration. At this time, it isn\u2019t possible to change how the integration works in the Netlify UI. For that, you\u2019ll need to switch to file-based configuration<\/a>. Let\u2019s walk through that process now.<\/p>\n

Setting Up the File-Based Configuration<\/h2>\n

While Netlify\u2019s 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\u2019s configuration in your repository. To begin, you\u2019ll add a netlify.toml<\/code> file to your site.<\/p>\n

In there, you can add explicit support for the integration by adding a plugins<\/code> section.<\/p>\n

(Note: Like YAML, TOML<\/a> is both easy to use and strict when it comes to formatting. Be careful with your formatting!)<\/p>\n

[[plugins]]\n  package = \"netlify-plugin-cloudinary\"<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, to add configuration options, you can use plugins.inputs<\/code>. 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<\/code> as well:<\/p>\n
[[plugins]]\n  package = \"netlify-plugin-cloudinary\"<\/span>\n\n  [plugins.inputs]\n  cloudName = \"raymondcamden\"<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Given that we now know how to specify configuration values, what\u2019s available for the Cloudinary integration?<\/p>\n