{"id":28259,"date":"2022-06-10T08:38:33","date_gmt":"2022-06-10T08:38:33","guid":{"rendered":"http:\/\/create-responsive-images-in-plain-html"},"modified":"2025-03-08T13:57:46","modified_gmt":"2025-03-08T21:57:46","slug":"create-responsive-images-in-plain-html","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/","title":{"rendered":"Create Responsive Images in Plain HTML"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Having the highest image quality possible is critical for modern websites. A responsive image adjusts to the features or dimensions of the device. You can approach responsive photos from two perspectives: offering the same image in various sizes or serving multiple images based on the display parameters. You can use <code>srcset<\/code> or <code>&lt;picture&gt;<\/code>. These two choices handle responsive images differently, but they both display one image from a collection of alternatives based on the rules.<\/p>\n<p>This article explains how to use <code>srcset<\/code> and the <code>&lt;picture&gt;<\/code> element to produce responsive images in pure HTML.<\/p>\n<h2>Prerequisites:<\/h2>\n<ul>\n<li>Basic knowledge of HTML<\/li>\n<li>An IDE installed on your machine (e.g., VS Code)<\/li>\n<\/ul>\n<h2>Sandbox<\/h2>\n<p>The completed project is on <a href=\"https:\/\/codesandbox.io\/s\/make-images-responsive-using-html-i0v0uw\">CodeSandbox<\/a>. Fork it to get started quickly.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/make-images-responsive-using-html-i0v0uw?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Make images responsive using html\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>GitHub<\/h2>\n<p>The source code can be found on <a href=\"https:\/\/github.com\/imohenry\/Create-responsive-images-in-html\">GitHub<\/a><\/p>\n<h2>Create responsive images in HTML using srcset<\/h2>\n<p>You can specify only one image file using the standard <code>&lt;img&gt;<\/code> HTML tag. You can use <code>srcset<\/code> to display a different picture based on the device\u2019s dimensions.<\/p>\n<p>Firstly, you create the standard <code>&lt;img&gt;<\/code> tag and specify the <code>src<\/code> and alt attributes like so:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;\n<\/code><\/pre>\n<p>You can use <code>srcset<\/code> to specify other source files, and the browser will select the image that appears to be the best fit for the screen size. You specify this like so:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;img srcset=&quot;Gojo-satoru.jpg 1200w, Gojo-satoru.jpg 500w&quot; \n   src=&quot;Gojo-satoru.jpg&quot; alt=&quot;Gojo-satoru from jujutsu kaisen&quot;&gt;\n<\/code><\/pre>\n<p>As seen above, the image filename, which defines the path to the source image, a space, and the intrinsic or actual width of the image, comprises the <code>srcset<\/code>.<\/p>\n<p>You should also provide <code>src<\/code>, which serves the image as a fallback for browsers that do not support <code>srcset<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams_sanity\/8d03313b3c35cc7f3aff161c24d0ba525706a8c1-996x752.png\" alt=\"image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"996\" height=\"752\"\/><\/p>\n<p>The HTML element <code>&lt;picture&gt;<\/code> encloses many <code>&lt;source&gt;<\/code> elements holding multiple source files and an <code>&lt;img&gt;<\/code> element. Whereas <code>&lt;img srcset=&quot;&quot; alt=&quot;&quot;&gt;<\/code> serves several sizes of the same image to make images responsive, <code>&lt;picture&gt;<\/code> allows you to directly change the image shown. You write your <code>&lt;picture&gt;<\/code> element like so:<\/p>\n<pre class=\"js-syntax-highlighted\"><code> &lt;picture&gt;\n   &lt;source media=&quot;(max-width: 1200px)&quot; srcset=&quot;Gojo-satoru-portrait.jpg&quot; \/&gt;\n   &lt;source media=&quot;(min-width: 541px)&quot; srcset=&quot;Gojo-satoru.jpg&quot;\/&gt;\n   &lt;img src=&quot;Gojo-satoru.jpg&quot; alt=&quot;Gojo-satoru domain expansion image&quot;\/&gt;\n &lt;\/picture&gt;\n<\/code><\/pre>\n<p>The <code>&lt;source&gt;<\/code> element has a media property that you use to specify the media condition. If the viewport width is <code>1200px<\/code> or smaller (as in the code above), the browser will display <code>Gojo-Satoru-portrait.jpg<\/code>, and likewise <code>Gojo-satoru.jpg<\/code> if the viewport is <code>541px<\/code> or smaller. Finally, the <code>srcset<\/code> defines the image file directory to display, whereas the <code>src<\/code> defines the default image.<\/p>\n<h2>Adding a fallback for WebP images using <code>&lt;picture&gt;<\/code><\/h2>\n<p>Another aspect in which <code>&lt;picture&gt;<\/code> excels is providing a fallback for contemporary image formats such as <code>WebP<\/code>. WebP images are rich and high-quality, yet they are lower in size than PNGs or JPEGs. It combines and enhances the most important characteristics of the JPEG and PNG formats by offering excellent lossy and lossless compression. One issue is that not all browsers accept WebP pictures. This is not an issue with <code>&lt;picture&gt;<\/code> because your browser can load an alternate image if it does not support.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;picture&gt;\n  &lt;source type=&quot;image\/webp&quot; srcset=&quot;Gojo-satoru.jpg&quot;&gt;\n  &lt;img src=&quot;Gojo-satoru.jpg&quot; alt=&quot;Gojo-satoru domain expansion image&quot;\/&gt;\n&lt;\/picture&gt;\n<\/code><\/pre>\n<p>The WebP fallback is specified by first providing a <code>type<\/code> property in the <code>&lt;source&gt;<\/code> element; if the browser accepts WebP images, then it picks this image. The <code>srcset<\/code> defines the WebP image file directory, whereas the <code>src<\/code> defines the default image.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, you learned how to make responsive images in HTML by using <code>&lt;picture&gt;<\/code> and <code>srcset<\/code>. Serving responsive pictures generally entails taking into account the image size and resolution in relation to the display size. Image quality might degrade if done incorrectly. Choose a picture that provides maximum usefulness while utilizing the fewest resources.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\">Responsive images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_images.asp\">Responsive Web Design Images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">Create Images for Responsive Web Design<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developers.google.com\/web\/ilt\/pwa\/lab-responsive-images\">Lab: Responsive Images Web Google<\/a>\n<a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_images.asp\"><\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28260,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[75,134,145,371],"class_list":["post-28259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-guest-post","tag-html5","tag-under-review"],"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>Create Responsive Images in Plain HTML<\/title>\n<meta name=\"description\" content=\"This article is a walkthrough of how to make images on your webpage responsive using only HTML. This can be done using the SRCSET and methods.\" \/>\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\/guest_post\/create-responsive-images-in-plain-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Responsive Images in Plain HTML\" \/>\n<meta property=\"og:description\" content=\"This article is a walkthrough of how to make images on your webpage responsive using only HTML. This can be done using the SRCSET and methods.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-10T08:38:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-08T21:57:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"4551\" \/>\n\t<meta property=\"og:image:height\" content=\"3034\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/guest_post\/create-responsive-images-in-plain-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create Responsive Images in Plain HTML\",\"datePublished\":\"2022-06-10T08:38:33+00:00\",\"dateModified\":\"2025-03-08T21:57:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA\",\"keywords\":[\"CSS\",\"Guest Post\",\"HTML5\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/\",\"name\":\"Create Responsive Images in Plain HTML\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA\",\"datePublished\":\"2022-06-10T08:38:33+00:00\",\"dateModified\":\"2025-03-08T21:57:46+00:00\",\"description\":\"This article is a walkthrough of how to make images on your webpage responsive using only HTML. This can be done using the SRCSET and methods.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA\",\"width\":4551,\"height\":3034},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Responsive Images in Plain HTML\"}]},{\"@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":"Create Responsive Images in Plain HTML","description":"This article is a walkthrough of how to make images on your webpage responsive using only HTML. This can be done using the SRCSET and methods.","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\/guest_post\/create-responsive-images-in-plain-html\/","og_locale":"en_US","og_type":"article","og_title":"Create Responsive Images in Plain HTML","og_description":"This article is a walkthrough of how to make images on your webpage responsive using only HTML. This can be done using the SRCSET and methods.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-10T08:38:33+00:00","article_modified_time":"2025-03-08T21:57:46+00:00","og_image":[{"width":4551,"height":3034,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/"},"author":{"name":"","@id":""},"headline":"Create Responsive Images in Plain HTML","datePublished":"2022-06-10T08:38:33+00:00","dateModified":"2025-03-08T21:57:46+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA","keywords":["CSS","Guest Post","HTML5","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/","name":"Create Responsive Images in Plain HTML","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA","datePublished":"2022-06-10T08:38:33+00:00","dateModified":"2025-03-08T21:57:46+00:00","description":"This article is a walkthrough of how to make images on your webpage responsive using only HTML. This can be done using the SRCSET and methods.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA","width":4551,"height":3034},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-responsive-images-in-plain-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Responsive Images in Plain HTML"}]},{"@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\/v1681925001\/Web_Assets\/blog\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745\/b6d0d9dd29d44fc7b87b6b8fc39dbe58efc018d2-4551x3034-1_2826096745.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28259","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=28259"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28259\/revisions"}],"predecessor-version":[{"id":37147,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28259\/revisions\/37147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28260"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}