{"id":21933,"date":"2019-08-05T15:39:14","date_gmt":"2019-08-05T15:39:14","guid":{"rendered":"http:\/\/responsive_images_and_their_creation_for_wordpress"},"modified":"2025-03-30T01:43:22","modified_gmt":"2025-03-30T08:43:22","slug":"responsive_images_and_their_creation_for_wordpress","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress","title":{"rendered":"Responsive Images and Their Creation for WordPress"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>With the advent of technology and the attendant fast-growing demand for feature-rich computing devices (laptops, smartphones, iPads), their manufacturers are rising to the occasion by producing high-resolution machines with screens of various sizes and device-pixel ratios. Thus was born the impetus behind the need for and creation of WordPress <a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">responsive images<\/a>, which automatically optimize their online display according to the size and resolution of the device  screen, ensuring sharpness and crispness\u2014a delightful user experience.<\/p>\n<h2>Definition of Responsive Images<\/h2>\n<p>You as a website developer must be familiar with the code below or something similar, which causes an image to display correctly on the user\u2019s browser.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">\n<span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: auto;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>I\u2019ve used the above code myself in production numerous times, figuring that posting WordPress responsive images simply means displaying sharp, high-resolution images according to the size of the display device\u2019s screen.<\/p>\n<p>Reality is, given that websites are accessed from all over the world, the above code is starkly inadequate because it takes into consideration none of the important factors on which responsiveness hinge, namely, the display device\u2019s processing power, data bandwidth, and Internet speed. One of the most aggravating things websites can do is drain the user device\u2019s  data while loading and displaying media. Furthermore, websites must also cater to a sizable segment of the user market that is still accessing the web on low-end devices with deficient processing power. Those devices are bound to run into delays and performance problems when accessing websites with large, high-resolution images.<\/p>\n<p>Truly responsive images must play to the device\u2019s strength\u2014and they do.<\/p>\n<h2>The Magic Behind Responsive Images<\/h2>\n<p>Displaying an image online is a two-step process:<\/p>\n<ol>\n<li>The application server loads and sends the image to the client (the browser).<\/li>\n<li>The browser  determines the image size to download and the image dimensions to display on the browser according to, respectively, the values you set in the <code>sizes<\/code> and <code>srcset<\/code> attributes.<\/li>\n<\/ol>\n<p>Here\u2019s the typical code for displaying nonresponsive images:<\/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\">&lt;img src=<span class=\"hljs-string\">\"image\/ballon.jpeg\"<\/span> alt=<span class=\"hljs-string\">\"A fantastic balloon\"<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span><\/span>=<span class=\"hljs-string\">\"hero__showcase__image\"<\/span>&gt;\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>Making an image truly responsive and displaying it takes more work on your part. You list several image versions with their resolutions along with breakpoints under <code>srcset<\/code> and their minimum widths under <code>sizes<\/code>. For example:<\/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> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"image\/balloon.jpeg\"<\/span>\n\t<span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"image\/balloon-tiny.jpeg 150w,\n\t\t\timage\/balloon-small.jpeg 300w,\n\t\t\timage\/balloon-medium.jpeg 600w,\n\t\t\timage\/balloon-large.jpeg 1000w,\n\t\t\timage\/balloon-extra-large.jpeg 1200w,\n\t\t\timage\/balloon-extra-extra-large.jpeg 1500w,\n\t\t\timage\/balloon-super-large.jpeg 2000w\"<\/span>\n\t<span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"(min-width: 80rem) 50rem,\n\t\t   (min-width: 50rem) 38rem,\n\t\t   (min-width: 45rem) calc(100vw - 10rem),\n\t\t   100vw\"<\/span>\n\t<span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"A fantastic balloon\"<\/span>&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>Such a setup instructs the device\u2019s browser to, based on its own width, download and display the image with the following properties:<\/p>\n<ul>\n<li>The most optimal width (the <code>w-<\/code> value) among the ones listed under <code>srcset<\/code>.<\/li>\n<li>The most optimal size (the <code>min-width<\/code> value) among the ones listed under <code>sizes<\/code>.<\/li>\n<\/ul>\n<p>For an excellent guide on how to make online images responsive, see this June 2017 <a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\">article<\/a> by <a href=\"https:\/\/twitter.com\/codebeast\">Christian Nwamba<\/a>.<\/p>\n<h2>Generation of Responsive Images on WordPress<\/h2>\n<p>A built-in capability from the popular, open-source WorldPress platform for websites automates the process of making images responsive. Here\u2019s what happens on an image upload to WordPress:<\/p>\n<ol>\n<li>The WordPress media library generates several versions of the image, complete with their own resolutions based on the image\u2019s default settings and sizes, to make it responsive.<\/li>\n<li>WordPress adds the <code>srcset<\/code> and <code>sizes<\/code> attributes along with the appropriate values to all the <code>&lt;img&gt;<\/code> tags in the website\u2019s source code.<\/li>\n<\/ol>\n<p>However, a WordPress shortcoming is that it cannot compute the appropriate number of breakpoints and all the device screens the website aims to cater for. You must add code to the <code>functions.php<\/code> source file yourself to capture all the image sizes for your WordPress codebase. Here\u2019s what to do:<\/p>\n<p>Add to the filter <code>wp_calculate_image_sizes()<\/code> a function called <code>make_responsive_image_sizes<\/code>, with which you can tweak the <code>sizes<\/code> attribute for images. For example :<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">make_responsive_image_sizes<\/span><span class=\"hljs-params\">($sizes, $size)<\/span> <\/span>{\n\n  $width = $size&#91;<span class=\"hljs-number\">0<\/span>];\n\n  <span class=\"hljs-keyword\">if<\/span> ( $width &gt; <span class=\"hljs-number\">600<\/span> ) {\n      <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">'(min-width: 768px) 322px, (min-width: 576px) 255px, calc( (100vw - 30px) \/ 2)'<\/span>;\n  } <span class=\"hljs-keyword\">else<\/span> {\n      <span class=\"hljs-keyword\">return<\/span> $sizes;\n  }\n\n}\n\nadd_filter(<span class=\"hljs-string\">'wp_calculate_image_sizes'<\/span>, <span class=\"hljs-string\">'make_responsive_image_sizes'<\/span>, <span class=\"hljs-number\">10<\/span> , <span class=\"hljs-number\">2<\/span>);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here, the <code>$width<\/code> variable ensures that, if an image is not large enough, the browser displays it according to the default WordPress size, absent which the default in your specifications.<\/p>\n<p>Furthermore, in WordPress 4.4 and above:<\/p>\n<ul>\n<li>The helper function  <code>wp_get_attachment_image_srcset()<\/code> generates the values for the <code>srcset<\/code> attribute.<\/li>\n<li>The <code>wp_get_attachment_image_srcset()<\/code> function accepts an image\u2019s IDand size as parameters, like this:<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">$img_srcset = wp_get_attachment_image_srcset( $image_id, <span class=\"hljs-string\">'large\u2019'<\/span> );\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">&lt;img srcset=<span class=\"hljs-string\">\"&lt;?php echo wp_get_attachment_image_srcset($attachment_id, 'large' ); ?&gt;\"<\/span>\n\t\tsizes=<span class=\"hljs-string\">\"(min-width: 60rem) 60rem, 100vw\"<\/span>&gt;\n\n&lt;img srcset=<span class=\"hljs-string\">\"&lt;?php echo wp_get_attachment_image_srcset( $attachment_id, 'large-cropped' ); ?&gt;\"<\/span>\n\t\tsizes=<span class=\"hljs-string\">\"100vw\"<\/span>&gt;\n```\t\n\nThe above code works like a champ. Rest assured that your images\u2019 `srcset` values would generate appropriately sized visuals <span class=\"hljs-keyword\">for<\/span> display on large screens.\n\n<span class=\"hljs-comment\">## Generation of Responsive Images With Cloudinary\u2019s WordPress Plugin<\/span>\n\nWith Cloudinary, you can effectively perform management tasks, including uploads, storage, administration, manipulation, <span class=\"hljs-keyword\">and<\/span> delivery, <span class=\"hljs-keyword\">for<\/span> images <span class=\"hljs-keyword\">and<\/span> videos, end to end. Relative to the theme of this post, especially useful is Cloudinary\u2019s WordPress plugin <span class=\"hljs-keyword\">for<\/span> easy upload, optimization, <span class=\"hljs-keyword\">and<\/span> transformation of images. To learn how to install, activate, <span class=\"hljs-keyword\">and<\/span> connect that plugin to Cloudinary, see this &#91;article](https:<span class=\"hljs-comment\">\/\/support.cloudinary.com\/hc\/en-us\/articles\/360012801151-Installing-the-Cloudinary-WordPress-Plugin).<\/span>\n\n<span class=\"hljs-comment\">## Conclusion<\/span>\n\nSetting up responsive images <span class=\"hljs-keyword\">for<\/span> your site on WordPress is an absolute must-<span class=\"hljs-keyword\">do<\/span>. <span class=\"hljs-keyword\">For<\/span> a deep perspective on responsive images <span class=\"hljs-keyword\">and<\/span> the benefits of leveraging Cloudinary <span class=\"hljs-keyword\">for<\/span> building websites, read &#91;Eric Portis\u2019s article on srcset <span class=\"hljs-keyword\">and<\/span> sizes](https:<span class=\"hljs-comment\">\/\/cloudinary.com\/blog\/responsive_images_with_srcset_sizes_and_cloudinary). With the web becoming more and more visually oriented, it pays to master the techniques for creating responsive images as a critical component of your site.<\/span>\n___\n\n<span class=\"hljs-comment\">## Further Reading on Responsive Images <\/span>\n\n* &#91;Responsive images with Cloudinary](https:<span class=\"hljs-comment\">\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps)<\/span>\n* &#91;Auto-Crop Images <span class=\"hljs-keyword\">for<\/span> Responsive Designs <span class=\"hljs-keyword\">and<\/span> Improved Image Quality](https:<span class=\"hljs-comment\">\/\/cloudinary.com\/blog\/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images)<\/span>\n* &#91;Best Practices <span class=\"hljs-keyword\">for<\/span> Responsive Web Design](https:<span class=\"hljs-comment\">\/\/cloudinary.com\/blog\/best_practices_for_responsive_web_design)<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21934,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[251],"class_list":["post-21933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","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>How To Create WordPress Responsive Images<\/title>\n<meta name=\"description\" content=\"Setting up WordPress responsive images for your site is an absolute must-do. Learn how Cloudinary WordPress plugin can help.\" \/>\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\/responsive_images_and_their_creation_for_wordpress\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Images and Their Creation for WordPress\" \/>\n<meta property=\"og:description\" content=\"Setting up WordPress responsive images for your site is an absolute must-do. Learn how Cloudinary WordPress plugin can help.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-05T15:39:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-30T08:43:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"770\" \/>\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\/responsive_images_and_their_creation_for_wordpress#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Responsive Images and Their Creation for WordPress\",\"datePublished\":\"2019-08-05T15:39:14+00:00\",\"dateModified\":\"2025-03-30T08:43:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA\",\"keywords\":[\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress\",\"url\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress\",\"name\":\"How To Create WordPress Responsive Images\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA\",\"datePublished\":\"2019-08-05T15:39:14+00:00\",\"dateModified\":\"2025-03-30T08:43:22+00:00\",\"description\":\"Setting up WordPress responsive images for your site is an absolute must-do. Learn how Cloudinary WordPress plugin can help.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA\",\"width\":1540,\"height\":770},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Images and Their Creation for WordPress\"}]},{\"@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":"How To Create WordPress Responsive Images","description":"Setting up WordPress responsive images for your site is an absolute must-do. Learn how Cloudinary WordPress plugin can help.","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\/responsive_images_and_their_creation_for_wordpress","og_locale":"en_US","og_type":"article","og_title":"Responsive Images and Their Creation for WordPress","og_description":"Setting up WordPress responsive images for your site is an absolute must-do. Learn how Cloudinary WordPress plugin can help.","og_url":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress","og_site_name":"Cloudinary Blog","article_published_time":"2019-08-05T15:39:14+00:00","article_modified_time":"2025-03-30T08:43:22+00:00","og_image":[{"width":1540,"height":770,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress"},"author":{"name":"","@id":""},"headline":"Responsive Images and Their Creation for WordPress","datePublished":"2019-08-05T15:39:14+00:00","dateModified":"2025-03-30T08:43:22+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA","keywords":["Responsive Images"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress","url":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress","name":"How To Create WordPress Responsive Images","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA","datePublished":"2019-08-05T15:39:14+00:00","dateModified":"2025-03-30T08:43:22+00:00","description":"Setting up WordPress responsive images for your site is an absolute must-do. Learn how Cloudinary WordPress plugin can help.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA","width":1540,"height":770},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/responsive_images_and_their_creation_for_wordpress#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive Images and Their Creation for WordPress"}]},{"@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\/v1649720911\/Web_Assets\/blog\/Responsive-Images-WordPress_21934da229\/Responsive-Images-WordPress_21934da229.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21933","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=21933"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21933\/revisions"}],"predecessor-version":[{"id":37293,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21933\/revisions\/37293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21934"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}