{"id":28453,"date":"2022-02-08T18:11:54","date_gmt":"2022-02-08T18:11:54","guid":{"rendered":"http:\/\/How-to-Audit-Image-Render-Sizes"},"modified":"2025-02-08T17:23:02","modified_gmt":"2025-02-09T01:23:02","slug":"how-to-audit-image-render-sizes","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/","title":{"rendered":"How to Audit Image Render Sizes"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Media content makes up the majority of the internet and is the prominent source of performance issues. These issues are often overlooked even though they are the most approachable category of performance bottlenecks to fix.<\/p>\n<p>Auditing image performance is often overlooked because we build products on high-end devices that deliver and render images smoothly even when those images are ridiculously heavy.<\/p>\n<p>Unfortunately, a significant percentage of the world end up unable to use your site because they can\u2019t afford to due to:<\/p>\n<ol>\n<li>Slow internet bandwidth\/speed to download large images<\/li>\n<li>Capped internet usage.<\/li>\n<li>Low-end computing devices (processors and RAMs).<\/li>\n<\/ol>\n<p>Performance issues, like I already mentioned, are not difficult to fix. All browsers support \u201creal\u201d responsive image tooling, so you can send the right image dimension to the right device viewport width. Smaller dimensions generally mean small disk size, smaller processing power, and smaller download size.<\/p>\n<p>To optimize, you need to measure first. Here are two ways to measure the render sizes to determine if your images need to be optimized.<\/p>\n<h2>Hover on the Image from DevTool<\/h2>\n<p>Open the <a href=\"https:\/\/61c98e67375345011d0bd535--gallant-curran-775308.netlify.app\">website demo<\/a> or any site with images in Chrome. Right-click on an image and click <strong>Inspect Element<\/strong>. The browser will highlight the image in the <strong>Elements<\/strong> tab:<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640600786879_CleanShot+2021-12-27+at+11.25.502x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"573\"\/><\/p>\n<p>Hover on the highlighted image link to show more information about the selected image:<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640600839572_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1080\" height=\"642\"\/><\/p>\n<p>We are interested in the value for <strong>the Rendered size<\/strong> and <strong>Intrinsic size<\/strong>.<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640602705539_CleanShot+2021-12-27+at+11.57.472x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"650\" height=\"448\"\/><\/p>\n<p>The Rendered size is the portion of the page that the image takes up.<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640602085172_CleanShot+2021-12-27+at+11.46.262x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"880\"\/><\/p>\n<p>The Intrinsic size is the original size of the image.<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640602216625_CleanShot+2021-12-27+at+11.45.222x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"636\" height=\"964\"\/><\/p>\n<p>I intentionally choose a ridiculously large image for such a small space to illustrate a point. Most of the images you will get from a photographer will be very big and heavy. It is our job as developers to resize and optimize the images.<\/p>\n<p>The image above needs to take up the following space on our page: 321px on the x-axis and 482px on the y-axis. Therefore, the image the browser should download should be roughly between 321px &#8211; 450px (x-axis) and 482px &#8211; 550px (y-axis). These are ranges I made up to pad the numbers, so anything reasonable works<\/p>\n<p>It is also good to keep in mind that I am assuming that we only have one viewport to serve images. To conditionally render different sizes based on the viewport, please take a look at this <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\">MDN article<\/a>.<\/p>\n<h2>Lighthouse<\/h2>\n<p>Lighthouse has evolved into a handy 360deg tool for auditing performance. While the hover option above gets the job done, it does not inform you whether you are doing things right or wrong. It just tells you the sizes of the image. Running your site through lighthouse will tell you if you need to act on something or if all is good.<\/p>\n<p>In Chrome Dev Tool, click the <strong>Lighthouse<\/strong> tab and disable all the items in the Categories section except <strong>Performance<\/strong>.<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640603053051_CleanShot+2021-12-27+at+12.03.182x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"546\"\/><\/p>\n<p>Click the <strong>Generate report<\/strong> button and wait for Lighthouse to do its thing. When a report is generated, you should see that we have issues under <strong>Properly size images<\/strong>.<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640603228943_CleanShot+2021-12-27+at+12.05.562x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1480\" height=\"398\"\/><\/p>\n<p>Click to expand and take a look at the details of this issue.<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640603281957_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1488\" height=\"864\"\/><\/p>\n<p>You can see all the images that are oversized for their slots. Image number 3 is not here because I intentionally sized it properly to show you that Lighthouse wouldn\u2019t pick it up if it\u2019s appropriately sized.<\/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\/s_3722981F2CA932769E10DDE3A4707F488F672F7B395D280BD99B2E0F0D4237AD_1640603413357_CleanShot+2021-12-27+at+12.09.552x.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"642\" height=\"442\"\/><\/p>\n<p>Here is a <a href=\"https:\/\/codesandbox.io\/s\/audit-image-render-sizes-p3nr9\">link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/audit-image-render-sizes-p3nr9?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=\"audit-image-render-sizes-p3nr9\"\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  <div class=\"wp-block-cloudinary-markdown \"><!--- Hi, Thank you for the great content! The document is easy to follow along and understand. I want to mention that when I looked at lighthouse performance report it still showed image 3 under the category mentioned, though the size is significantly less than the other media. In the document you mentioned it is not supposed to show up in the lighthouse report if it is properly sized, I\u2019m not sure if there\u2019s a bug in lighthouse or the resource size should be smaller now? Thank you!  \u2014->\n\n<!--- Hi Nina, I just ran the test from this CodeSandbox preview URL - https:\/\/p3nr9.csb.app\/\nI am not seeing image 3 in Lighthouse. You can also test with the CodeSandbox URL I added. Thanks!! -->\n<h2>Conclusion<\/h2>\n<p>The first step to getting optimization right is to measure first. Now you know how to do that for images and performance issues introduced by image sizes. Take some time to explore the Lighthouse and Performance tab and see what more information about your images you may find interesting.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28454,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,374,371],"class_list":["post-28453","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-performance","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>How to Audit Image Render Sizes<\/title>\n<meta name=\"description\" content=\"In this jam, we&#039;ll take a look at two ways to audit image render sizes.\" \/>\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\/how-to-audit-image-render-sizes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Audit Image Render Sizes\" \/>\n<meta property=\"og:description\" content=\"In this jam, we&#039;ll take a look at two ways to audit image render sizes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-08T18:11:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-09T01:23:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"7680\" \/>\n\t<meta property=\"og:image:height\" content=\"4320\" \/>\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\/how-to-audit-image-render-sizes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How to Audit Image Render Sizes\",\"datePublished\":\"2022-02-08T18:11:54+00:00\",\"dateModified\":\"2025-02-09T01:23:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Performance\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/\",\"name\":\"How to Audit Image Render Sizes\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA\",\"datePublished\":\"2022-02-08T18:11:54+00:00\",\"dateModified\":\"2025-02-09T01:23:02+00:00\",\"description\":\"In this jam, we'll take a look at two ways to audit image render sizes.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA\",\"width\":7680,\"height\":4320},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Audit Image Render Sizes\"}]},{\"@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 Audit Image Render Sizes","description":"In this jam, we'll take a look at two ways to audit image render sizes.","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\/how-to-audit-image-render-sizes\/","og_locale":"en_US","og_type":"article","og_title":"How to Audit Image Render Sizes","og_description":"In this jam, we'll take a look at two ways to audit image render sizes.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-02-08T18:11:54+00:00","article_modified_time":"2025-02-09T01:23:02+00:00","og_image":[{"width":7680,"height":4320,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57-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\/how-to-audit-image-render-sizes\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/"},"author":{"name":"","@id":""},"headline":"How to Audit Image Render Sizes","datePublished":"2022-02-08T18:11:54+00:00","dateModified":"2025-02-09T01:23:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA","keywords":["Guest Post","Image","Performance","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/","name":"How to Audit Image Render Sizes","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA","datePublished":"2022-02-08T18:11:54+00:00","dateModified":"2025-02-09T01:23:02+00:00","description":"In this jam, we'll take a look at two ways to audit image render sizes.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA","width":7680,"height":4320},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-audit-image-render-sizes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Audit Image Render Sizes"}]},{"@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\/v1681924492\/Web_Assets\/blog\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57\/34968adf4b5e9f85990e25e5e62038c779609873-7680x4320-1_28454ddf57.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28453","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=28453"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28453\/revisions"}],"predecessor-version":[{"id":36752,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28453\/revisions\/36752"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28454"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}