{"id":23311,"date":"2022-03-17T15:42:49","date_gmt":"2022-03-17T15:42:49","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=23311"},"modified":"2022-10-07T09:03:12","modified_gmt":"2022-10-07T16:03:12","slug":"automatically-optimize-images-with-cloudinarys-netlify-build-plugin","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin","title":{"rendered":"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin"},"content":{"rendered":"\n<p>Optimizing media for the web is a must-do to save visitor bandwidth and accelerate page loads as much as feasible. Incorporating the optimization process into an existing development workflow could be cumbersome, however.<\/p>\n\n\n\n<p>Cloudinary\u2019s Netlify Build Plugin ensures that all the images slated for delivery on your site are automatically optimized and converted to modern formats before being served from Cloudinary&#8217;s performant content delivery network (CDN). That\u2019s an efficient and effective process with no requirements for access or changes to the code.&nbsp;<\/p>\n\n\n\n<p>This article answers the following questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>What is a Netlify build plugin?<\/li><li>How does the process work?<\/li><li>How do I get started?<\/li><li>Where can I learn more about Cloudinary\u2019s Netlify Build Plugin and the Cloudinary platform?<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What Is a Netlify Build Plugin?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.netlify.com\/\">Netlify<\/a> is a feature-rich development platform on which you can easily build and deploy web apps. In addition, you can run custom features by hooking them or plugging them in at the start or in the middle of the build process, or after it completes. The screenshot below shows some examples in the Plugins directory on Netlify.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img width=\"1024\" height=\"543\" data-public-id=\"Screen_Shot_2022-03-08_at_09.25.29\/Screen_Shot_2022-03-08_at_09.25.29.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_543,c_scale\/f_auto,q_auto\/v1646934457\/Screen_Shot_2022-03-08_at_09.25.29\/Screen_Shot_2022-03-08_at_09.25.29.png?_i=AA\" alt=\"Example of Plugins directory on Netlify\" class=\"wp-post-23311 wp-image-23312\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1646934457\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934457\/Screen_Shot_2022-03-08_at_09.25.29\/Screen_Shot_2022-03-08_at_09.25.29.png?_i=AA 3584w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934457\/Screen_Shot_2022-03-08_at_09.25.29\/Screen_Shot_2022-03-08_at_09.25.29.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934457\/Screen_Shot_2022-03-08_at_09.25.29\/Screen_Shot_2022-03-08_at_09.25.29.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934457\/Screen_Shot_2022-03-08_at_09.25.29\/Screen_Shot_2022-03-08_at_09.25.29.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934457\/Screen_Shot_2022-03-08_at_09.25.29\/Screen_Shot_2022-03-08_at_09.25.29.png?_i=AA 1536w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934457\/Screen_Shot_2022-03-08_at_09.25.29\/Screen_Shot_2022-03-08_at_09.25.29.png?_i=AA 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Example of Plugins directory on Netlify<\/figcaption><\/figure>\n\n\n\n<p>That\u2019s where you can take advantage of plugins to comprehensively optimize images with Cloudinary\u2019s Netlify Build Plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Does the Process Work?<\/h2>\n\n\n\n<p>In brief, the process proceeds like this: while on Netlify, the plugin replaces the images with Cloudinary equivalents and has Cloudinary automatically optimize them by compressing the files\u2014with no quality loss at all\u2014and then deliver them in modern formats. Invariably, websites load faster with smaller files.<\/p>\n\n\n\n<p>Two stages are involved: image replacement and their redirects, as illustrated here:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img width=\"1024\" height=\"388\" data-public-id=\"Image_on_2022-03-08_at_16-15-24\/Image_on_2022-03-08_at_16-15-24.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_388,c_scale\/f_auto,q_auto\/v1646934412\/Image_on_2022-03-08_at_16-15-24\/Image_on_2022-03-08_at_16-15-24.png?_i=AA\" alt=\"The build process on Netlify along with upload and Cloudinary-induced optimization of images\" class=\"wp-post-23311 wp-image-23313\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1646934412\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934412\/Image_on_2022-03-08_at_16-15-24\/Image_on_2022-03-08_at_16-15-24.png?_i=AA 4132w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934412\/Image_on_2022-03-08_at_16-15-24\/Image_on_2022-03-08_at_16-15-24.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934412\/Image_on_2022-03-08_at_16-15-24\/Image_on_2022-03-08_at_16-15-24.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934412\/Image_on_2022-03-08_at_16-15-24\/Image_on_2022-03-08_at_16-15-24.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934412\/Image_on_2022-03-08_at_16-15-24\/Image_on_2022-03-08_at_16-15-24.png?_i=AA 1536w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934412\/Image_on_2022-03-08_at_16-15-24\/Image_on_2022-03-08_at_16-15-24.png?_i=AA 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>The build process on Netlify along with upload and Cloudinary-induced optimization of images<\/em><\/figcaption><\/figure>\n\n\n\n<p>To ensure an optimally fast page load, the Cloudinary plugin replaces all on-page images in the static output generated by Netlify before delivery. Afterwards, either of these scenarios applies, depending on your choice of delivery type:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The <strong>fetch delivery type<\/strong>, which is the default, identifies images with remote, Netlify-generated URLs for delivery.&nbsp;<\/li><li>The <strong>upload delivery type<\/strong> calls for image uploads to your Cloudinary account, from which Cloudinary serves images to your site.<\/li><\/ul>\n\n\n\n<p>However, since modern web apps load pages and route client-side ones with JavaScript, reverting to the original images renders optimization through Cloudinary impossible. As a solution, the Cloudinary plugin automatically redirects all the images delivered from the images directory\u2014whether the default one or one that you specify\u2014to a performant Cloudinary URL.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Can I Get Started?<\/h2>\n\n\n\n<p>The preliminary steps are simple and straightforward, as follows:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>If you don\u2019t have one already, <a href=\"http:\/\/www.cloudinary.com\/signup\">sign up<\/a> for a free Cloudinary account.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Install the plugin in <a href=\"https:\/\/app.netlify.com\/plugins\/netlify-plugin-cloudinary\/install\">Netlify<\/a>: Click <a href=\"https:\/\/app.netlify.com\/plugins\"><strong>Plugins<\/strong><\/a> at the top, type Cloudinary in the text field for search and, when the plugin is displayed, click <strong>Install<\/strong>.<br><img width=\"700\" height=\"257\" data-public-id=\"Screen_Shot_2022-03-08_at_09.22.55\/Screen_Shot_2022-03-08_at_09.22.55.png\" loading=\"lazy\" decoding=\"async\" class=\"wp-post-23311 wp-image-23314\" style=\"width: 700px;\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_700,h_257,c_scale\/f_auto,q_auto\/v1646934404\/Screen_Shot_2022-03-08_at_09.22.55\/Screen_Shot_2022-03-08_at_09.22.55.png?_i=AA\" alt=\"Searching for the Cloudinary plugin in Netlify\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1646934404\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934404\/Screen_Shot_2022-03-08_at_09.22.55\/Screen_Shot_2022-03-08_at_09.22.55.png?_i=AA 3580w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934404\/Screen_Shot_2022-03-08_at_09.22.55\/Screen_Shot_2022-03-08_at_09.22.55.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934404\/Screen_Shot_2022-03-08_at_09.22.55\/Screen_Shot_2022-03-08_at_09.22.55.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934404\/Screen_Shot_2022-03-08_at_09.22.55\/Screen_Shot_2022-03-08_at_09.22.55.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934404\/Screen_Shot_2022-03-08_at_09.22.55\/Screen_Shot_2022-03-08_at_09.22.55.png?_i=AA 1536w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1646934404\/Screen_Shot_2022-03-08_at_09.22.55\/Screen_Shot_2022-03-08_at_09.22.55.png?_i=AA 2048w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/li><li>Add your Cloudinary account\u2019s cloud name as an <a href=\"https:\/\/docs.netlify.com\/configure-builds\/environment-variables\/\">environment variable<\/a> for your site.<\/li><\/ol>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><p><code>Name: CLOUDINARY_CLOUD_NAME<\/code><\/p>\n<p><code>Value: &lt;Your Cloud Name&gt;<\/code><\/p>\n<\/div>\n\n\n<p>Subsequently, once you\u2019ve deployed your site, the Cloudinary plugin automatically kicks into action with the optimization and format-conversion steps.<\/p>\n\n\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>You can manually install the plugin for your project as a local package with a file-based configuration. For details, see this <a href=\"https:\/\/github.com\/colbyfayock\/netlify-plugin-cloudinary#file-based-configuration\">GitHub page<\/a>.<\/p>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Where Can I Learn More About the Plugin and the Cloudinary Platform?<\/h2>\n\n\n\n<p>Cloudinary\u2019s Netlify Build Plugin yields a host of benefits out of the box. For a complete description of its tasks, configurations, and such, visit its <a href=\"https:\/\/github.com\/colbyfayock\/netlify-plugin-cloudinary\">page on GitHub<\/a>.<\/p>\n\n\n\n<p>How about also checking out <a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization\">the ways in which Cloudinary optimizes images<\/a> and the remarkable features of<a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_sdks\"> Cloudinary&#8217;s SDKs<\/a>? They\u2019ll open up for you a new horizon vis-a-vis media management.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Optimizing media for the web is a must-do to save visitor bandwidth and accelerate page loads as much as feasible. Incorporating the optimization process into an existing development workflow could be cumbersome, however. Cloudinary\u2019s Netlify Build Plugin ensures that all the images slated for delivery on your site are automatically optimized and converted to modern [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":23335,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,165,175],"class_list":["post-23311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-image-transformation","tag-jamstack"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin<\/title>\n<meta name=\"description\" content=\"How to optimize and deliver images for websites and web apps through automation with Cloudinary\u2019s Netlify Build Plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin\" \/>\n<meta property=\"og:description\" content=\"How to optimize and deliver images for websites and web apps through automation with Cloudinary\u2019s Netlify Build Plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-17T15:42:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T16:03:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1647271872\/netlify_build_plugin\/netlify_build_plugin-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin\",\"datePublished\":\"2022-03-17T15:42:49+00:00\",\"dateModified\":\"2022-10-07T16:03:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin\"},\"wordCount\":585,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Image Transformation\",\"JAMStack\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin\",\"url\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin\",\"name\":\"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA\",\"datePublished\":\"2022-03-17T15:42:49+00:00\",\"dateModified\":\"2022-10-07T16:03:12+00:00\",\"description\":\"How to optimize and deliver images for websites and web apps through automation with Cloudinary\u2019s Netlify Build Plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin","description":"How to optimize and deliver images for websites and web apps through automation with Cloudinary\u2019s Netlify Build Plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin","og_locale":"en_US","og_type":"article","og_title":"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin","og_description":"How to optimize and deliver images for websites and web apps through automation with Cloudinary\u2019s Netlify Build Plugin.","og_url":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-17T15:42:49+00:00","article_modified_time":"2022-10-07T16:03:12+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1647271872\/netlify_build_plugin\/netlify_build_plugin-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin"},"author":{"name":"","@id":""},"headline":"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin","datePublished":"2022-03-17T15:42:49+00:00","dateModified":"2022-10-07T16:03:12+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin"},"wordCount":585,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA","keywords":["Asset Management","Image Transformation","JAMStack"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin","url":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin","name":"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA","datePublished":"2022-03-17T15:42:49+00:00","dateModified":"2022-10-07T16:03:12+00:00","description":"How to optimize and deliver images for websites and web apps through automation with Cloudinary\u2019s Netlify Build Plugin.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/automatically-optimize-images-with-cloudinarys-netlify-build-plugin#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Automatically Optimize Images With Cloudinary\u2019s Netlify Build Plugin"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647271872\/netlify_build_plugin\/netlify_build_plugin.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/23311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=23311"}],"version-history":[{"count":10,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/23311\/revisions"}],"predecessor-version":[{"id":23453,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/23311\/revisions\/23453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/23335"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=23311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=23311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=23311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}