{"id":31339,"date":"2023-10-03T07:00:00","date_gmt":"2023-10-03T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=31339"},"modified":"2024-06-27T10:46:11","modified_gmt":"2024-06-27T17:46:11","slug":"integrating-cloudinary-image-optimization-netlify-hosting","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/integrating-cloudinary-image-optimization-netlify-hosting","title":{"rendered":"Integrating Cloudinary Image Optimization With Netlify Hosting"},"content":{"rendered":"

For web developers, Netlify<\/a> is one of the premier options for both hosting as well as a suite of other features to enable you to serve up performant websites quickly and simply. Combining this with Cloudinary then becomes an obvious choice. Cloudinary\u2019s image (and video) optimizations can help those websites even more by allowing for tedious image improvements to be handled for you. Let\u2019s take a look at how this can be done, first at a high level and then I\u2019ll demonstrate with a real example of it in action.<\/p>\n

Multiple Options for Multiple Needs<\/h2>\n

At a high level, there\u2019s three ways you can consider using Cloudinary on your Netlify site, and it\u2019s absolutely possible that your site may make use of one or more of these techniques.<\/p>\n

The Manual Approach With SDKs<\/h3>\n

The first option would be a manual<\/strong> or SDK approach. In this example, you would look at your images on your site and decide which should be optimized and how. This optimization can be done by hand (changing the URL to one hosted by Cloudinary with optimization options) or done via the SDKs (which also ultimately output a URL that would be used in your HTML). This approach also allows for a more \u201cgradual\u201d move to employing Cloudinary. So for example, maybe you just use it to optimize header images, and then later more improvements are added. This gives the best and more precise control over how Cloudinary helps improve your site, but also takes the most time.<\/p>\n

Optimizing via Netlify Integration<\/h3>\n

The second option would be via the Netlify Cloudinary<\/a> integration. This option runs at build time, when your site is generated, and handles the optimizations for your automatically. While there\u2019s still options here for configuration and such, this will be the easiest solution for folks who want everything handled for them.<\/p>\n

The CMS Options<\/h3>\n

Lastly, another option is to enable optimization at the CMS or ecommerce layer. You can find ready to use solutions for this on various platforms, including WordPress, Contentful, Magento, Salesforce and more. For developers making use of these solutions and integrating them with their Netlify site, this provides yet another \u201cautomatic\u201d solution for quick performance improvements.<\/p>\n

Now let\u2019s take a look at this in action.<\/p>\n<\/div>\n\n\n

\n