{"id":21414,"date":"2016-08-31T12:51:46","date_gmt":"2016-08-31T12:51:46","guid":{"rendered":"http:\/\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin"},"modified":"2024-06-01T14:56:08","modified_gmt":"2024-06-01T21:56:08","slug":"how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin","title":{"rendered":"How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a plugin"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><em>This is a guest post by Nicolas Hoizey, co-founder of <a href=\"http:\/\/www.clever-age.com\/en\/\">Clever Age<\/a> and creator of the <a href=\"https:\/\/nhoizey.github.io\/jekyll-cloudinary\/\">Jekyll Cloudinary<\/a> plugin. Nicolas\u2019 plugin leverages Cloudinary\u2019s image storage, optimization, resizing, and delivery infrastructures to  automate responsive images in <a href=\"http:\/\/jekyllrb.com\">Jekyll<\/a>-generated static sites. We think it\u2019s the bee\u2019s knees, and invited Nicolas to write a bit about the process and motivation behind it. Without further ado, here\u2019s Nicolas.<\/em><\/p>\n<p>I recently migrated <a href=\"https:\/\/nicolas-hoizey.com\">my personal website<\/a> to <a href=\"https:\/\/jekyllrb.com\/news\/2015\/10\/26\/jekyll-3-0-released\/\">the latest major version of Jekyll<\/a>, and took the opportunity to re-think my toolchain.<\/p>\n<p>Some of the plugins that I\u2019d been using were not satisfying my needs for responsive images, so I decided to find other ways to fulfill these needs.<\/p>\n<p>To generate the responsive images HTML (do I really need to say that using <a href=\"https:\/\/responsiveimages.org\/\">native responsive images<\/a> should be a no-brainer nowadays?), I tried the <a href=\"https:\/\/github.com\/wildlyinaccurate\/jekyll-responsive-image\">Jekyll Responsive Image<\/a> plugin. It is really nice; it lets you define your own image markup templates, which means you can use <code>srcset<\/code> or <code>&lt;picture&gt;<\/code> as you like. But it didn\u2019t address all of my concerns:<\/p>\n<ul>\n<li>Generating a Jekyll site from scratch with this plugin requires generating all images\u2019 variants from the master images. I currently have around 750 images on my blog, leading to some very long build times.<\/li>\n<li>Sending all these variants to the server also takes quite some time, because I don\u2019t have fast network access at home.<\/li>\n<li>And of course, all these images are served from the same server as the pages, which in my case is cheap (but nice) shared hosting.<\/li>\n<\/ul>\n<p><strong>I wanted a simplified and faster workflow, and less load on the server side<\/strong>.<\/p>\n<p>Most of the responsive web sites that <a href=\"http:\/\/www.clever-age.com\/en\/\">my company<\/a> builds for clients use ad-hoc solutions for responsive images, but I was aware of a few SaaS responsive image solutions, so I decided to check if any of them would fit my needs.<\/p>\n<p>Cloudinary is one of the most feature-rich solutions available, <em>and<\/em> it can even be used for free if your needs are reasonable. It\u2019s not easy for other solutions to compete with that\u2026<\/p>\n<p>With a free account, I could test whatever I wanted, try different features, and decide to continue or look elsewhere.<\/p>\n<p>The main features I was looking for, which Cloudinary provides, are:<\/p>\n<ul>\n<li>\n<strong><a href=\"https:\/\/cloudinary.com\/documentation\/upload_images#auto_fetching_remote_files\">The ability to use the service as a proxy<\/a>:<\/strong> the master images are stored on my hosting, but all images delivered to my visitors come from Cloudinary, generated on the fly from the masters. Even better, I don\u2019t need to manually upload the master images \u2013 Cloudinary fetches them automatically from my local, published versions. In other words, the only \u201cclient\u201d for my originals is Cloudinary. As a result, the bandwidth for images on my hosting is really low.<\/li>\n<li>\n<strong>Image cropping and resizing options:<\/strong> right now, I am only scaling my images down from large masters to fit responsive layouts. But I\u2019m definitely looking at the possibility of doing advanced art direction using <a href=\"https:\/\/cloudinary.com\/blog\/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images\">Cloudinary\u2019s magical automatic cropping features<\/a>.<\/li>\n<li>\n<strong><a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#automatic_format_selection\">Image format optimization<\/a>:<\/strong> if I publish JPEG images in my posts, Cloudinary can send WebPs to visitors if their browser supports them. Last month, two thirds of the images delivered by Cloudinary to my visitors were WebPs, which Cloudinary generated and served for me, automatically. That\u2019s a huge win for both my visitors\u2019 performance and data plans, and for my Cloudinary bandwidth quota.<\/li>\n<li>\n<strong><a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#automatic_quality_and_encoding_settings\">Image compression optimization<\/a>:<\/strong> Cloudinary is able to compute the best compression level to lower the weight of each image while keeping the visual quality high.<\/li>\n<\/ul>\n<p>Convinced that Cloudinary offered everything I needed, I still had to develop a Jekyll plugin that used these features.<\/p>\n<p>After some consideration, I decided to start with a <code>{% cloudinary %}<\/code> <a href=\"https:\/\/github.com\/Shopify\/liquid\/wiki\/Liquid-for-Designers\">Liquid tag<\/a> that would ease image publication with Cloudinary, while still being relatively easy to develop. I took inspiration from other plugins, found help on StackOverflow when needed, and finally released the first version of the <a href=\"https:\/\/nhoizey.github.io\/jekyll-cloudinary\/\">Jekyll Cloudinary plugin<\/a> in July 2016.<\/p>\n<p>The syntax is pretty straightforward:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">{% cloudinary &#91;preset] path\/to\/img.jpg alt=<span class=\"hljs-string\">\"alt text\"<\/span> caption=<span class=\"hljs-string\">\"image caption\"<\/span> %}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>From this input, the plugin outputs responsive image HTML, using the <code>srcset<\/code> and <code>sizes<\/code> attributes for the <code>&lt;img&gt;<\/code> tag (see <a href=\"https:\/\/jakearchibald.com\/2015\/anatomy-of-responsive-images\/#varying-size-and-density\">the \u201cvarying size and density\u201d section of this post<\/a> to understand how these attributes work, and <a href=\"https:\/\/cloudfour.com\/thinks\/dont-use-picture-most-of-the-time\/\">this post which explains why you should use them instead of <code>&lt;picture&gt;<\/code>, most of the time<\/a>). The <code>srcset<\/code> and fallback <code>src<\/code> contain Cloudinary URLs that fetch the post\u2019s master images on-the-fly and resize them to several, alternate sizes.<\/p>\n<p>For example, as shown in <a href=\"https:\/\/nhoizey.github.io\/jekyll-cloudinary\/#live-example\">the documentation<\/a>, this code in a Markdown file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">{% cloudinary logo \/assets\/logos\/cloudinary.png alt=<span class=\"hljs-string\">\"Cloudinary logo\"<\/span> %}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>will generate this HTML code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/&lt;cloud_name&gt;\/image\/fetch\/c_limit,w_480,q_auto,f_auto\/https:\/\/&lt;domain&gt;\/assets\/logos\/cloudinary.png\"<\/span>\n  <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"\n    https:\/\/res.cloudinary.com\/&lt;cloud_name&gt;\/image\/fetch\/c_limit,w_80,q_auto,f_auto\/https:\/\/&lt;domain&gt;\/assets\/logos\/cloudinary.png 80w,\n    https:\/\/res.cloudinary.com\/&lt;cloud_name&gt;\/image\/fetch\/c_limit,w_240,q_auto,f_auto\/https:\/\/&lt;domain&gt;\/assets\/logos\/cloudinary.png 240w,\n    https:\/\/res.cloudinary.com\/&lt;cloud_name&gt;\/image\/fetch\/c_limit,w_400,q_auto,f_auto\/https:\/\/&lt;domain&gt;\/assets\/logos\/cloudinary.png 400w\"<\/span>\n  <span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"\n    (min-width: 50rem) 13rem,\n    (min-width: 40rem) 25vw,\n    45vw\"<\/span>\n  <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"logo\"<\/span>\n  <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Cloudinary logo\"<\/span>\n  <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"480\"<\/span>\n  <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"350\"<\/span>\n\/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>You are in full control of the number of generated images, their resolutions, and the <code>sizes<\/code> attribute (which helps the browser decide which image to download). This control comes from the configuration options you can use in your <code>_config.yaml<\/code>. Here is the part of my configuration file where I defined rules for logos:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">cloudinary:\n  cloud_name: \u2026\n  presets:\n    logo:\n      min_width: 80\n      max_width: 400\n      fallback_max_width: 200\n      steps: 3\n      sizes: '(min-width: 50rem) 13rem, (min-width: 40rem) 25vw, 45vw'\n      figure: never\n      attributes:\n        class: logo\n<\/code><\/span><\/pre>\n<ul>\n<li>\n<code>cloud_name: \u2026<\/code> is your personal ID from Cloudinary<\/li>\n<li>\n<code>presets:<\/code> starts the list of presets you define for your site<\/li>\n<li>\n<code>logo:<\/code> is the name of one of my presets, which I use in the Liquid tag before the name of the image file<\/li>\n<li>\n<code>min_width: 80<\/code> defines the narrowest generated image<\/li>\n<li>\n<code>max_width: 400<\/code> defines the widest generated image<\/li>\n<li>\n<code>fallback_max_width: 200<\/code> defines the fallback (<code>src<\/code>) image width<\/li>\n<li>\n<code>steps: 3<\/code> defines the number of images to generate<\/li>\n<li>\n<code>sizes: '(min-width: 50rem) 13rem, (min-width: 40rem) 25vw, 45vw'<\/code> defines the <code>sizes<\/code> attribute of the responsive image, which depends on the design and breakpoints<\/li>\n<li>\n<code>figure: never<\/code> prevents generation of a full <code>&lt;figure&gt;<\/code>\/<code>&lt;img&gt;<\/code>\/<code>&lt;figcaption&gt;<\/code> element (I often don\u2019t want them on logos)<\/li>\n<li>\n<code>attributes:<\/code> starts a list of attributes to always add to generated <code>&lt;figure&gt;<\/code> and\/or <code>&lt;img&gt;<\/code> elements<\/li>\n<li>\n<code>class: logo<\/code> adds a <code>class<\/code> attribute with a <code>logo<\/code> value, which I use in my CSS to make sure the logo never takes more than one fourth of its container width, and is floated right<\/li>\n<\/ul>\n<p>You can define all of these rules, for any number of presets that you need.<\/p>\n<p>With this plugin and my free Cloudinary account, <strong>the build time of my site has been reduced by 90%, the storage on my server has been reduced by 60%, and I don\u2019t have to worry about image optimization anymore<\/strong>. <em>Huge wins<\/em>.<\/p>\n<p>Where to go from here? Originally, I wanted to allow writers to use the simple <a href=\"http:\/\/kramdown.gettalong.org\/syntax.html#images\">standard Markdown syntax for images<\/a>, but I have not managed to build this yet, despite <a href=\"http:\/\/stackoverflow.com\/questions\/35614552\/with-jekyll-3-can-i-transform-a-posts-markdown-before-actual-markdown-parsing\">some<\/a> <a href=\"http:\/\/stackoverflow.com\/questions\/38126629\/how-is-the-priority-flag-in-jekyll-plugins-supposed-to-work\">valuable<\/a> <a href=\"https:\/\/github.com\/jekyll\/jekyll\/issues\/5099\">answers<\/a> to my questions from Jekyll lead maintainer <a href=\"https:\/\/github.com\/parkr\">Parker Moore<\/a> himself. I\u2019ll have to dig deeper into Jekyll hooks in the future.<\/p>\n<p>At the end of the day, this was a great way to learn a bit of Ruby, a bit about the Jekyll internals, how plugins work, and how to build and release a gem\u2026 I\u2019ve learned so much in a short period of time thanks to this useful little pet project.<\/p>\n<p>Of course, help is welcome to make the plugin even better. There are already <a href=\"https:\/\/github.com\/nhoizey\/jekyll-cloudinary\/issues\">a few issues open for bugs or things that should be added to the plugin<\/a>. Feel free to add your bug reports and ideas, or even contribute through <a href=\"https:\/\/github.com\/nhoizey\/jekyll-cloudinary\/pulls\">pull requests<\/a>!<\/p>\n<h2>Further Reading on Responsive Images<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">Responsive images with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images\">Auto-Crop Images for Responsive Designs and Improved Image Quality<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/responsive_images_with_srcset_sizes_and_cloudinary\">Responsive Images: The srcset and sizes HTML Image Attributes<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">Make All Images on Your Website Responsive in 3 Easy Steps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/best_practices_for_responsive_web_design\">Best Practices for Responsive Web Design<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21415,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,144,251],"class_list":["post-21414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-html","tag-responsive-images"],"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>Plugin for Automatic Responsive Image HTML Code Generation<\/title>\n<meta name=\"description\" content=\"Leverage Cloudinary&#039;s infrastructure to automatically generate responsive image HTML in Jekyll-generated static sites using the plugin Nicolas Hoizey created!\" \/>\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\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a plugin\" \/>\n<meta property=\"og:description\" content=\"Leverage Cloudinary&#039;s infrastructure to automatically generate responsive image HTML in Jekyll-generated static sites using the plugin Nicolas Hoizey created!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-31T12:51:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-01T21:56:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\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\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a plugin\",\"datePublished\":\"2016-08-31T12:51:46+00:00\",\"dateModified\":\"2024-06-01T21:56:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin\"},\"wordCount\":20,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA\",\"keywords\":[\"Guest Post\",\"HTML\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2016\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin\",\"url\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin\",\"name\":\"Plugin for Automatic Responsive Image HTML Code Generation\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA\",\"datePublished\":\"2016-08-31T12:51:46+00:00\",\"dateModified\":\"2024-06-01T21:56:08+00:00\",\"description\":\"Leverage Cloudinary's infrastructure to automatically generate responsive image HTML in Jekyll-generated static sites using the plugin Nicolas Hoizey created!\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA\",\"width\":500,\"height\":240},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a 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":"Plugin for Automatic Responsive Image HTML Code Generation","description":"Leverage Cloudinary's infrastructure to automatically generate responsive image HTML in Jekyll-generated static sites using the plugin Nicolas Hoizey created!","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\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin","og_locale":"en_US","og_type":"article","og_title":"How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a plugin","og_description":"Leverage Cloudinary's infrastructure to automatically generate responsive image HTML in Jekyll-generated static sites using the plugin Nicolas Hoizey created!","og_url":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin","og_site_name":"Cloudinary Blog","article_published_time":"2016-08-31T12:51:46+00:00","article_modified_time":"2024-06-01T21:56:08+00:00","og_image":[{"width":500,"height":240,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_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\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin"},"author":{"name":"","@id":""},"headline":"How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a plugin","datePublished":"2016-08-31T12:51:46+00:00","dateModified":"2024-06-01T21:56:08+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin"},"wordCount":20,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA","keywords":["Guest Post","HTML","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2016","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin","url":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin","name":"Plugin for Automatic Responsive Image HTML Code Generation","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA","datePublished":"2016-08-31T12:51:46+00:00","dateModified":"2024-06-01T21:56:08+00:00","description":"Leverage Cloudinary's infrastructure to automatically generate responsive image HTML in Jekyll-generated static sites using the plugin Nicolas Hoizey created!","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA","width":500,"height":240},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how_i_used_cloudinary_to_solve_responsive_image_needs_in_my_jekyll_website_and_shared_the_magic_in_a_plugin#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a 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\/v1649724670\/Web_Assets\/blog\/jekyll_cloudinary_plugin\/jekyll_cloudinary_plugin.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21414","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\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21414"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21414\/revisions"}],"predecessor-version":[{"id":34256,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21414\/revisions\/34256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21415"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}