{"id":39703,"date":"2026-01-22T07:00:00","date_gmt":"2026-01-22T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39703"},"modified":"2026-01-22T11:46:25","modified_gmt":"2026-01-22T19:46:25","slug":"heavy-images-are-costing-you-sales","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales","title":{"rendered":"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit."},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>In the modern web, high-density displays (Retina, Super Retina, and 4K monitors) have become the standard. While these screens demand razor-sharp visuals, they\u2019ve introduced a hidden \u201cperformance tax\u201d. Many developers fall into the trap of serving the highest resolution asset to everyone to ensure quality, but the \u201cone-size-fits-all\u201d approach is a silent conversion killer.<\/p>\n<p>Serving a 3x resolution image to a user on a standard 1x display doesn\u2019t make the image look better, it just makes the page load slower, burns through mobile data, and tanks your SEO rankings. Every extra millisecond your hero image takes to render is a moment your customer considers hitting the <strong>Back<\/strong> button.<\/p>\n<p>In this guide, we\u2019ll build a high-performance image orchestration pipeline using <strong>Next.js 16<\/strong> and <strong>Cloudinary<\/strong>, and <strong>Device Pixel Ratio (DPR)<\/strong> to deliver the right-sized images across devices, so your site stays lightning-fast without sacrificing quality.<\/p>\n<p>See the technology in action:<\/p>\n<ul>\n<li>\n<strong>Live Demo:<\/strong> <a href=\"https:\/\/dpr-optimizer.vercel.app\/\">dpr-optimizer.vercel.app<\/a>\n<\/li>\n<li>\n<strong>Source Code:<\/strong> <a href=\"https:\/\/www.google.com\/search?q=https:\/\/github.com\/musebe\/dpr-optimizer\">GitHub Repository<\/a>\n<\/li>\n<\/ul>\n<h2>The Technical Roadmap<\/h2>\n<p>Let\u2019s map out the process step by step:<\/p>\n<ol>\n<li>\n<strong>The DPR crisis.<\/strong> We\u2019ll talk about why traditional responsive images aren\u2019t enough for high-density displays, and why heavy images kill conversions.<\/li>\n<li>\n<strong>Cloudinary orchestration.<\/strong> Automate delivery with <code>dpr_auto<\/code>, <code>f_auto<\/code>, and <code>q_auto<\/code>.<\/li>\n<li>\n<strong>Next.js 16 architecture.<\/strong> Use the latest Server Components and real-time refresh logic for instant optimization.<\/li>\n<li>\n<strong>The \u201cSmart Image\u201d component.<\/strong> Build a reusable, premium UI wrapper with loading skeletons and squircle aesthetics.<\/li>\n<li>\n<strong>Live analytics.<\/strong> Create a \u201cBefore vs. After\u201d comparison tool to prove the bandwidth savings to your stakeholders.<\/li>\n<\/ol>\n<h2>Understanding DPR (Device Pixel Ratio)<\/h2>\n<p>To solve the \u201cHeavy Image\u201d problem, we first need to understand the hardware we\u2019re targeting. <strong>Device Pixel Ratio (DPR)<\/strong> is the relationship between physical pixels and logical (CSS) pixels.<\/p>\n<ul>\n<li>\n<strong>Logical pixels (CSS)<\/strong> are the standard units we use in our code (e.g., <code>width: 500px<\/code>), regardless of screen density.<\/li>\n<li>\n<strong>Physical pixels<\/strong> are the dots of light on your screen. High-density \u201cRetina\u201d displays pack 2x or 3x more physical pixels into the same physical space as a standard display.<\/li>\n<li>\n<strong>The DPR formula<\/strong> is: A screen with a DPR of 2.0 has 4 physical pixels for every 1 CSS pixel (2x horizontally and 2x vertically).<\/li>\n<\/ul>\n<h3>Why Do Standard Images Fail on High-DPR Screens?<\/h3>\n<p>If you serve a standard 500px wide image to a 500px container on a DPR 2.0 device, the browser has to \u201cstretch\u201d those pixels to fill the physical grid, resulting in blurry, low-quality images.<\/p>\n<p>On the other hand, if you\u2019re serving a massive 1500px image (3x) for sharpness, you\u2019re forcing every user to download <strong>nine times more data<\/strong> than they can actually see. This kills performance, and users will bounce before the image can even finish loading.<\/p>\n<h2>How Heavy Images Kill Conversions<\/h2>\n<p>Beyond the technical hurdles, serving unoptimized images hurts your bottom line. High-density displays have raised consumer expectations, but they\u2019ve also increased the \u201cweight\u201d of the average web page.<\/p>\n<p>Forcing a user with a standard display to download a 3x resolution image uses up to nine times more data than necessary. Studies show that even a 100ms delay in page load time can result in a 1% drop in conversion rates. Heavy images don\u2019t just <em>look<\/em> slow; they drive customers to your competitors.<\/p>\n<p>Google\u2019s Core Web Vitals, specifically <strong>Largest Contentful Paint (LCP)<\/strong>, influence your search engine ranking. In e-commerce, the LCP is almost always a product hero image.<\/p>\n<ul>\n<li>\n<strong>The penalty.<\/strong> When you serve a 2MB \u201cRetina\u201d image to a mobile user on a 4G connection, your LCP score plummets.<\/li>\n<li>\n<strong>The result.<\/strong> Lower search rankings lead to less organic traffic, making your customer acquisition costs (CAC) much higher.<\/li>\n<\/ul>\n<h2>The Cloudinary Solution: <code>dpr_auto<\/code><\/h2>\n<p>Traditionally, developers handled this with complex <code>srcset<\/code> and <code>sizes<\/code> attributes, manually defining every possible resolution. Cloudinary simplifies this by allowing you to request <code>dpr=&quot;auto&quot;<\/code>:<\/p>\n<ul>\n<li>Cloudinary detects the device\u2019s DPR via Client Hints or JavaScript and scales the image on-the-fly.<\/li>\n<li>You only store one high-resolution master asset; Cloudinary generates the 1.0, 2.0, and 3.0 versions instantly as needed.<\/li>\n<\/ul>\n<p>Optimizing DPR isn\u2019t just about the customer; it\u2019s about infrastructure costs.<\/p>\n<p>By using Cloudinary\u2019s <code>dpr_auto<\/code>, you stop serving \u201cghost pixels\u201d, which is data that the device can\u2019t render. Intelligent delivery reduces your total egress bandwidth, lowering your monthly cloud costs while speeding up your site.<\/p>\n<h2>Setting Up the Modern Tech Stack and Cloudinary Preset<\/h2>\n<p>To build a high-performance demo, we\u2019re using the latest stable versions of our stack.<\/p>\n<ul>\n<li>\n<strong>Next.js 16.1.<\/strong> Leveraging stable <strong>Turbopack<\/strong> and the new <strong>Async Request APIs<\/strong>.<\/li>\n<li>\n<strong>Shadcn UI.<\/strong> Utilizing the latest Nova style for premium, responsive components.<\/li>\n<li>\n<strong>Next-Cloudinary.<\/strong> The high-level SDK that simplifies image orchestration.<\/li>\n<\/ul>\n<h3>Configuring the Cloudinary Upload Preset<\/h3>\n<p>Before we can upload images into a specific folder like <code>performance-demo<\/code>, you must create an <strong>Upload Preset<\/strong> in your Cloudinary Console. This defines how images are handled the moment they are uploaded.<\/p>\n<ol>\n<li>Navigate to <strong>Settings<\/strong> (gear icon) &gt; <strong>Upload<\/strong> in your Cloudinary Dashboard.<\/li>\n<li>Scroll to <strong>Upload presets<\/strong> and click <strong>Add upload preset<\/strong>.<\/li>\n<li>Enter <code>nextjs_dpr_preset<\/code> (copy this for your <code>.env<\/code>) as your <strong>Preset name<\/strong>.<\/li>\n<li>Set the <strong>Signing Mode<\/strong> to <strong>Unsigned<\/strong>, so your client-side widget can upload without a backend signature.<\/li>\n<li>Set the <strong>Folder<\/strong> to <code>performance-demo<\/code> to keep your assets organized.<\/li>\n<li>Click <strong>Save<\/strong>.<\/li>\n<\/ol>\n<h3>Environment Configuration<\/h3>\n<p>Set up your <code>.env.local<\/code> with your Cloudinary credentials and the new preset:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=&quot;your_cloud_name&quot;\nNEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=&quot;nextjs_dpr_preset&quot;\nCLOUDINARY_API_KEY=&quot;your_api_key&quot;\nCLOUDINARY_API_SECRET=&quot;your_api_secret&quot;\n<\/code><\/pre>\n<h2>Automating DPR With Cloudinary<\/h2>\n<p>Cloudinary removes the need for manual <code>srcset<\/code> management by offloading the \u201cpixel math\u201d to the cloud. Instead of manually scaling images for different screen densities, you can use automated parameters to handle the heavy lifting.<\/p>\n<h3>The Power of <code>dpr_auto<\/code><\/h3>\n<p>By adding the <code>dpr=&quot;auto&quot;<\/code> prop, Cloudinary identifies the user\u2019s hardware density and delivers a 1x, 2x, or 3x asset dynamically. This means:<\/p>\n<ul>\n<li>Users on standard screens aren\u2019t penalized with high-resolution files they can\u2019t render.<\/li>\n<li>For maximum efficiency, <code>dpr_auto<\/code> should be combined with <code>f_auto<\/code> (Format) and <code>q_auto<\/code> (Quality) to deliver the ultimate optimization trifecta.<\/li>\n<li>Unlike manual multiplication (e.g., width 1000px for a 500px slot), <code>dpr_auto<\/code> correctly identifies if a device requires those extra pixels.<\/li>\n<\/ul>\n<h3>DPR vs. Multiplied Dimensions<\/h3>\n<p>The difference between manually doubling dimensions and using the DPR parameter:<\/p>\n<ul>\n<li>\n<strong>Manual.<\/strong> Forcing <code>w_1000<\/code> for a <code>500px<\/code> container delivers the same heavy file to everyone.<\/li>\n<li>\n<strong>DPR.<\/strong> Using <code>dpr_2.0,w_500<\/code> ensures a 1000px image is delivered <em>only<\/em> to Retina devices, while standard devices receive 500px.<\/li>\n<\/ul>\n<h3>Building the \u2018Smart Image\u2019 Component<\/h3>\n<p>Wrapping the <code>CldImage<\/code> component ensures that every image across our Next.js application is DPR-aware and optimized by default, without repeating logic in every view.<\/p>\n<p>We\u2019ll leverage Cloudinary\u2019s ability to handle <strong>Device Pixel Ratio<\/strong> automatically, which differs from manually multiplying dimensions, because it scales the asset based on the specific hardware requesting it.<\/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\"><span class=\"hljs-comment\">\/\/ components\/cloudinary-image.tsx<\/span>\n<span class=\"hljs-string\">\"use client\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { CldImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next-cloudinary'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">SmartImage<\/span>(<span class=\"hljs-params\">{ src, alt, width, height, className }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n      <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{src}<\/span>\n      <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">{alt}<\/span>\n      <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{width}<\/span>\n      <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{height}<\/span>\n      \/\/ <span class=\"hljs-attr\">THE<\/span> <span class=\"hljs-attr\">CORE<\/span> <span class=\"hljs-attr\">OPTIMIZATION<\/span> <span class=\"hljs-attr\">TRIFECTA:<\/span>\n      <span class=\"hljs-attr\">dpr<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>      \/\/ <span class=\"hljs-attr\">Automates<\/span> <span class=\"hljs-attr\">device<\/span> <span class=\"hljs-attr\">pixel<\/span> <span class=\"hljs-attr\">ratio<\/span> <span class=\"hljs-attr\">detection<\/span>\n      <span class=\"hljs-attr\">format<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>   \/\/ <span class=\"hljs-attr\">Delivers<\/span> <span class=\"hljs-attr\">next-gen<\/span> <span class=\"hljs-attr\">formats<\/span> <span class=\"hljs-attr\">like<\/span> <span class=\"hljs-attr\">AVIF<\/span>\/<span class=\"hljs-attr\">WebP<\/span> <span class=\"hljs-attr\">automatically<\/span>\n      <span class=\"hljs-attr\">quality<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>  \/\/ <span class=\"hljs-attr\">Intelligent<\/span> <span class=\"hljs-attr\">compression<\/span> <span class=\"hljs-attr\">based<\/span> <span class=\"hljs-attr\">on<\/span> <span class=\"hljs-attr\">visual<\/span> <span class=\"hljs-attr\">content<\/span>\n      <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fill\"<\/span>     \/\/ <span class=\"hljs-attr\">Smart<\/span> <span class=\"hljs-attr\">cropping<\/span> <span class=\"hljs-attr\">to<\/span> <span class=\"hljs-attr\">maintain<\/span> <span class=\"hljs-attr\">our<\/span> <span class=\"hljs-attr\">4<\/span>\/<span class=\"hljs-attr\">5<\/span> <span class=\"hljs-attr\">aspect<\/span> <span class=\"hljs-attr\">ratio<\/span>\n      <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{className}<\/span>\n    \/&gt;<\/span><\/span>\n  );\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\">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>Key implementation details:<\/p>\n<ul>\n<li>\n<strong><code>dpr=&quot;auto&quot;<\/code><\/strong> is the magic prop. It tells Cloudinary to deliver a 1x, 2x, or 3x version of the image based on the user\u2019s screen density.<\/li>\n<li>By using the <strong>Squircle<\/strong> approach (large border radius) in our <code>className<\/code>, we match the premium aesthetic of high-end e-commerce platforms.<\/li>\n<li>\n<strong>Component reusability<\/strong> replaces standard <code>&lt;img&gt;<\/code> tags.<\/li>\n<\/ul>\n<h2>Interactive Performance Comparison<\/h2>\n<p>To prove the \u201cSpeed for Profit\u201d argument, we need to visualize the impact. The logic behind this component is to contrast a <strong>Standard Delivery<\/strong> (forcing a high-resolution, static width file) against a <strong>Smart Delivery<\/strong> (using Cloudinary\u2019s dynamic optimization).<\/p>\n<p>By using <code>dpr=&quot;auto&quot;<\/code>, Cloudinary creates a version of the image for the requesting device\u2019s pixel density. This is far more efficient than manually setting a high width (like <code>w_2000<\/code>) for everyone, which results in massive, unneeded file sizes for standard users.<\/p>\n<h3>The Logic Code<\/h3>\n<p>We use a simple state toggle to switch between the two delivery methods, displaying the real-time URL parameters and estimated payload savings.<\/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\"><span class=\"hljs-comment\">\/\/ components\/performance-compare.tsx<\/span>\n<span class=\"hljs-string\">\"use client\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { SmartImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/cloudinary-image\"<\/span>; <span class=\"hljs-comment\">\/\/ Our DPR-aware component<\/span>\n<span class=\"hljs-keyword\">import<\/span> { CldImage } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next-cloudinary\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">PerformanceCompare<\/span>(<span class=\"hljs-params\">{ publicId }: { publicId: string }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;isOptimized, setIsOptimized] = useState(<span class=\"hljs-literal\">true<\/span>);\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"grid lg:grid-cols-2 gap-8 items-center\"<\/span>&gt;<\/span>\n      {\/* Image Preview Area *\/}\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"aspect-4\/5 rounded-&#91;2rem] overflow-hidden bg-muted\"<\/span>&gt;<\/span>\n        {isOptimized ? (\n          \/\/ SMART: Optimized via dpr_auto\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SmartImage<\/span>\n            <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{publicId}<\/span>\n            <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{1000}<\/span>\n            <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{1250}<\/span>\n            <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"DPR Optimized\"<\/span>\n          \/&gt;<\/span>\n        ) : (\n          \/\/ NAIVE: Standard fixed high-res delivery\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldImage<\/span>\n            <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{publicId}<\/span>\n            <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"2500\"<\/span> \/\/ <span class=\"hljs-attr\">Overkill<\/span> <span class=\"hljs-attr\">for<\/span> <span class=\"hljs-attr\">most<\/span> <span class=\"hljs-attr\">devices<\/span>\n            <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"3125\"<\/span>\n            <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Unoptimized\"<\/span>\n            <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fill\"<\/span>\n            \/\/ <span class=\"hljs-attr\">No<\/span> <span class=\"hljs-attr\">dpr<\/span>=<span class=\"hljs-string\">\"auto\"<\/span> <span class=\"hljs-attr\">here<\/span>; <span class=\"hljs-attr\">forces<\/span> <span class=\"hljs-attr\">the<\/span> <span class=\"hljs-attr\">same<\/span> <span class=\"hljs-attr\">heavy<\/span> <span class=\"hljs-attr\">file<\/span> <span class=\"hljs-attr\">everywhere<\/span>\n          \/&gt;<\/span>\n        )}\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n      {\/* Data Breakdown Logic *\/}\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"space-y-6\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-3xl font-bold\"<\/span>&gt;<\/span>\n          {isOptimized ? \"142 KB (Smart)\" : \"2.8 MB (Heavy)\"}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"text-muted-foreground\"<\/span>&gt;<\/span>\n          {isOptimized\n            ? \"Cloudinary detected your device density and served a precise AVIF\/WebP asset.\"\n            : \"A 'Retina' asset was forced onto a standard screen, wasting 94% of the bandwidth.\"}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n        {\/* Toggle Logic *\/}\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n          <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setIsOptimized(!isOptimized)}\n          className=\"px-6 py-3 bg-primary text-white rounded-full font-bold\"\n        &gt;\n          Switch to {isOptimized ? \"Legacy Mode\" : \"DPR Mode\"}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\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>Why this logic matters:<\/p>\n<ul>\n<li>The \u201cHeavy\u201d mode simulates a developer trying to fix blurriness by just making the image bigger.<\/li>\n<li>The \u201cSmart\u201d mode uses <code>dpr_auto<\/code> to serve a 1x, 2x, or 3x asset only when the hardware actually supports it.<\/li>\n<li>It demonstrates that the optimized image looks just as sharp (if not sharper on Retina screens) despite being a fraction of the size.<\/li>\n<\/ul>\n<h3>Next.js 16 Implementation and Syncing<\/h3>\n<p>With <strong>Next.js 16<\/strong>, we can leverage a faster and more efficient way to handle state changes between the client and the server. One of the most common frustrations in image-heavy apps is when you have to refresh the page to see an uploaded image.<\/p>\n<p>To solve this, we use the <strong>Next.js Router<\/strong> to trigger a data refresh the moment Cloudinary confirms a successful upload.<\/p>\n<h3>The Sync Logic<\/h3>\n<p>In our <code>ImageUploadButton<\/code>, we utilize <code>router.refresh()<\/code> which tells Next.js to re-fetch the data for the current route on the server without losing the client-side state.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ components\/upload-button.tsx<\/span>\n<span class=\"hljs-string\">\"use client\"<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> { useRouter } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/navigation\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { CldUploadWidget } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next-cloudinary\"<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">ImageUploadButton<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> router = useRouter(); <span class=\"hljs-comment\">\/\/ Next.js 16 Router Hook<\/span>\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldUploadWidget<\/span>\n      <span class=\"hljs-attr\">onSuccess<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> {\n        \/\/ Triggers Next.js 16 to re-validate server data\n        \/\/ and update the gallery instantly\n        router.refresh();\n      }}\n      \/\/ ... configuration props\n    &gt;\n      {({ open }) =&gt; <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> open()}&gt;Upload Product<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">CldUploadWidget<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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<h3>Bypassing the Cache<\/h3>\n<p>Because we want our \u201cRecent Uploads\u201d to appear in real time, we must ensure the API call fetching images from Cloudinary doesn\u2019t serve a stale cached version. In our fetch request, we use <code>cache: 'no-store'<\/code> to ensure every refresh pulls the latest assets from the <code>performance-demo<\/code> folder.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Inside recent-uploads.tsx useEffect<\/span>\nfetch(<span class=\"hljs-string\">'\/api\/images'<\/span>, { <span class=\"hljs-attr\">cache<\/span>: <span class=\"hljs-string\">'no-store'<\/span> }) <span class=\"hljs-comment\">\/\/ Forces fresh data on every call<\/span>\n  .then(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> res.json())\n  .then(<span class=\"hljs-function\"><span class=\"hljs-params\">data<\/span> =&gt;<\/span> setImages(data));\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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>By combining <strong>Cloudinary\u2019s dynamic delivery<\/strong> with <strong>Next.js 16\u2019s refined routing<\/strong>, we\u2019ll create a smooth image viewing experience without lag.<\/p>\n<h2>Responsive Design Strategies<\/h2>\n<p>A performance-optimized image is only effective if the surrounding layout is equally resilient. To prevent <strong>Layout Shift (CLS)<\/strong> and ensure the \u201cSquircle\u201d aesthetic remains premium on all devices, we\u2019ll employ fluid design patterns.<\/p>\n<ul>\n<li>Instead of fixed widths, we\u2019ll use <code>container mx-auto px-4 sm:px-6 lg:px-8<\/code> to provide consistent breathing room across mobile and desktop.<\/li>\n<li>Using Tailwind\u2019s grid system (<code>grid-cols-1 md:grid-cols-2 lg:grid-cols-3<\/code>), our \u201cRecent Uploads\u201d and \u201cGallery\u201d sections stack vertically on phones while expanding horizontally on wider screens.<\/li>\n<li>By using the <code>aspect-4\/5<\/code> class, we\u2019ll reserve space for the image before it even loads, preventing the page content from \u201cjumping\u201d once Cloudinary delivers the asset.<\/li>\n<\/ul>\n<h2>Your Speed-to-Profit Roadmap<\/h2>\n<p>Optimizing for <strong>Device Pixel Ratio (DPR)<\/strong> is no longer a luxury, it\u2019s a requirement for modern, high-conversion web experiences. By automating image optimization with <strong>Cloudinary<\/strong> and <strong>Next.js 16<\/strong>, you\u2019ll move toward a faster, more profitable digital storefront.<\/p>\n<p>Deliver the perfect amount of pixels to every device and improve your bottom line. <a href=\"https:\/\/cloudinary.com\/contact\">Contact us today to learn more<\/a>.<\/p>\n<p><strong>Resources:<\/strong><\/p>\n<ul>\n<li>\n<strong>Live Demo:<\/strong> <a href=\"https:\/\/www.google.com\/search?q=https:\/\/dpr-optimizer.vercel.app\/\">dpr-optimizer.vercel.app<\/a>\n<\/li>\n<li>\n<strong>GitHub Repo:<\/strong> <a href=\"https:\/\/www.google.com\/search?q=https:\/\/github.com\/musebe\/dpr-optimizer\">musebe\/dpr-optimizer<\/a>\n<\/li>\n<li>\n<strong>Documentation:<\/strong> <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images\">Cloudinary Responsive Images Guide<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":39716,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[370,212,227],"class_list":["post-39703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image","tag-next-js","tag-performance-optimization"],"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>Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.<\/title>\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\/heavy-images-are-costing-you-sales\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-22T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-22T19:46:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/heavy-images-are-costing-you-sales#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.\",\"datePublished\":\"2026-01-22T15:00:00+00:00\",\"dateModified\":\"2026-01-22T19:46:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales\"},\"wordCount\":16,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA\",\"keywords\":[\"Image\",\"Next.js\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales\",\"url\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales\",\"name\":\"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA\",\"datePublished\":\"2026-01-22T15:00:00+00:00\",\"dateModified\":\"2026-01-22T19:46:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.\"}]},{\"@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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.","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\/heavy-images-are-costing-you-sales","og_locale":"en_US","og_type":"article","og_title":"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.","og_url":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales","og_site_name":"Cloudinary Blog","article_published_time":"2026-01-22T15:00:00+00:00","article_modified_time":"2026-01-22T19:46:25+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.","datePublished":"2026-01-22T15:00:00+00:00","dateModified":"2026-01-22T19:46:25+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales"},"wordCount":16,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA","keywords":["Image","Next.js","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales","url":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales","name":"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit.","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA","datePublished":"2026-01-22T15:00:00+00:00","dateModified":"2026-01-22T19:46:25+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/heavy-images-are-costing-you-sales#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Heavy Images Are Costing You Sales. Here\u2019s How to Optimize DPR for Speed and Profit."}]},{"@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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1769018833\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit\/Blog_Losing_Sales_to_Heavy_Images__Optimize_DPR_for_Speed_and_Profit.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39703","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=39703"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39703\/revisions"}],"predecessor-version":[{"id":39717,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/39703\/revisions\/39717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/39716"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=39703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=39703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=39703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}