{"id":37418,"date":"2025-05-14T07:00:00","date_gmt":"2025-05-14T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=37418"},"modified":"2025-05-13T11:07:55","modified_gmt":"2025-05-13T18:07:55","slug":"mobile-vs-desktop-product-images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images","title":{"rendered":"Testing Mobile vs. Desktop Product Images in Cloudinary"},"content":{"rendered":"\n<p>When a customer browses an online store, every image influences their first impression of your brand and the product. A report from <a href=\"https:\/\/www.retailtechnologyreview.com\/articles\/2022\/10\/14\/75-of-online-shoppers-rely-on-product-photography-to-make-purchasing-decisions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Retail Technology Review<\/a> shared <strong>75% of online shoppers <\/strong>rely on product photos to make purchasing decisions, and high-quality product photos had a <strong>94% higher conversion rate<\/strong> than low-quality photos. That&#8217;s a lot of potential revenue you&#8217;re missing out on if your images aren&#8217;t up to snuff. But serving the same image size to all users, whether on a mobile phone, tablet, or desktop, negatively impacts performance.<\/p>\n\n\n\n<p>Here\u2019s why:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If a mobile user loads a large, high-resolution image meant for desktops, it can slow down page speed and increase bounce rates.<\/li>\n\n\n\n<li>If a desktop user receives a small, compressed image, it might look pixelated or stretched.<\/li>\n\n\n\n<li>Delivering large images to all devices increases bandwidth usage, leading to slower performance and higher costs.<\/li>\n<\/ul>\n\n\n\n<p>That&#8217;s why you need to optimize your images and deliver the best version suited to each customer\u2019s device and network. And, instead of manually resizing and uploading multiple image versions, leverage <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images\" target=\"_blank\" rel=\"noreferrer noopener\">responsive image breakpoints<\/a> to help deliver appropriate product images for your devices with optimized file sizes that reduce bandwidth usage.<\/p>\n\n\n\n<p>To follow along, <a href=\"https:\/\/cloudinary.com\/users\/register_free\" target=\"_blank\" rel=\"noreferrer noopener\">set up a free Cloudinary account<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create Responsive Assets With Adaptive Breakpoints in Cloudinary<\/h2>\n\n\n\n<p>A single image size doesn\u2019t work well across different devices. Mobile users need smaller images that load quickly, while desktop users need higher-resolution images that look sharp on large screens.<\/p>\n\n\n\n<p>Cloudinary\u2019s responsive breakpoints automatically generates multiple image versions of different sizes so that each device gets the most suitable image without manual resizing.<\/p>\n\n\n\n<p>There are two ways to generate breakpoints. You can use the <a target=\"_blank\" href=\"https:\/\/www.responsivebreakpoints.com\/\" rel=\"noreferrer noopener\">Responsive Image Breakpoints Generator<\/a>, a UI-based tool, or <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/blog\/introducing_intelligent_responsive_image_breakpoints_solutions#breakpoints_generation_automation_with_cloudinary_s_api\" rel=\"noreferrer noopener\">Cloudinary\u2019s API<\/a>, which allows you to request breakpoints when uploading images programmatically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Create Responsive Assets W<\/strong>ith Breakpoints Generator<\/h2>\n\n\n\n<p>Cloudinary\u2019s Responsive Image Breakpoint Generator is an interactive tool that allows you to upload an image and define its settings. As seen in the screenshot below, you can define settings like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Minimum and maximum image widths.<\/li>\n\n\n\n<li>File size step for optimization.<\/li>\n\n\n\n<li>The number of breakpoints to generate.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845619\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-1.png\" alt=\"Cloudinary's Responsive Image Breakpoint Generator tool\"\/><figcaption class=\"wp-element-caption\">Cloudinary responsive image breakpoints generator<\/figcaption><\/figure>\n\n\n\n<p>Once the image is uploaded and processed, the generator provides a downloadable ZIP file containing all the optimized image versions and a visual table showing the generated breakpoints.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744846142\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-2.png\" alt=\"Responsive Breakpoints results\"\/><figcaption class=\"wp-element-caption\">Generated breakpoints overview.<\/figcaption><\/figure>\n\n\n\n<p>The generator tool also creates an HTML5 &lt;img&gt; tag with srcset, allowing browsers to choose the best image version according to the available space of the image in your responsive web layout.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n\n\u00a0 <span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"(max-width: 1400px) 100vw, 1400px\"<\/span>\n\n\u00a0 <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"\n\n\u00a0 \u00a0 woman_glasses_c_scale,w_200.jpg 200w,\n\n\u00a0 \u00a0 woman_glasses_c_scale,w_556.jpg 556w,\n\n\u00a0 \u00a0 woman_glasses_c_scale,w_819.jpg 819w,\n\n\u00a0 \u00a0 woman_glasses_c_scale,w_1019.jpg 1019w,\n\n\u00a0 \u00a0 woman_glasses_c_scale,w_1227.jpg 1227w,\n\n\u00a0 \u00a0 woman_glasses_c_scale,w_1345.jpg 1345w,\n\n\u00a0 \u00a0 woman_glasses_c_scale,w_1400.jpg 1400w\"<\/span>\n\n\u00a0 <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"woman_glasses_c_scale,w_1400.jpg\"<\/span>\n\n\u00a0 <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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\n\n<p>This tool is an ideal quick solution for static images, but if your website has dynamically uploaded images, you will need to use Cloudinary\u2019s API.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create Breakpoints With Cloudinary\u2019s API<\/h2>\n\n\n\n<p>Cloudinary\u2019s API allows you to programmatically request the breakpoints for newly uploaded images or existing ones. You can use any of <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_sdks\" rel=\"noreferrer noopener\">Cloudinary\u2019s open-source SDKs<\/a>, such as Node.js, which will be used in this tutorial.<\/p>\n\n\n\n<p>To get started, create a project folder and spin up a basic Node project with npm init -y. Once this is done, install the Cloudinary <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/node_integration\" rel=\"noreferrer noopener\">Node.js SDK<\/a>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" 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\">code<\/span>&gt;<\/span>npm install cloudinary<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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\n\n<p>Next, copy your API credentials from your <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/users\/login\" rel=\"noreferrer noopener\">Cloudinary dashboard<\/a>, as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744846142\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-3.png\" alt=\"Cloudinary dashboard, where you can grab your API credentials\"\/><figcaption class=\"wp-element-caption\">Retrieving Cloudinary API credentials.<\/figcaption><\/figure>\n\n\n\n<p>Once you have the API credentials, create a new file named upload.js in your project folder and configure Cloudinary:<\/p>\n\n\n<pre class=\"wp-block-code\" 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-keyword\">const<\/span> cloudinary = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'cloudinary'<\/span>).v2;\n\ncloudinary.config({\n\n\u00a0 <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'your_cloud_name'<\/span>,\n\n\u00a0 <span class=\"hljs-attr\">api_key<\/span>: <span class=\"hljs-string\">'your_api_key'<\/span>,\n\n\u00a0 <span class=\"hljs-attr\">api_secret<\/span>: <span class=\"hljs-string\">'your_api_secret'<\/span>\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\n\n<p>Now, create a folder named assets inside your project directory and place an image inside it. For this example, an image named <code>smiling-lady.jpg<\/code> will be used, but you can replace it with any image from your account. Then, add the following code to the upload.js file to upload and generate breakpoints:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudinary.uploader.upload(<span class=\"hljs-string\">\".\/assets\/smiling-lady.jpg\"<\/span>, {\n\n\u00a0 <span class=\"hljs-attr\">public_id<\/span>: <span class=\"hljs-string\">\"smiling-lady\"<\/span>,\n\n\u00a0 <span class=\"hljs-attr\">responsive_breakpoints<\/span>: &#91;\n\n\u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">create_derived<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">bytes_step<\/span>: <span class=\"hljs-number\">20000<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">min_width<\/span>: <span class=\"hljs-number\">200<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">max_width<\/span>: <span class=\"hljs-number\">1000<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">transformation<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">'fill'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">aspect_ratio<\/span>: <span class=\"hljs-string\">'16:9'<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">'auto'<\/span>\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 }\n\n\u00a0 ]\n\n}).then(<span class=\"hljs-function\"><span class=\"hljs-params\">result<\/span> =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.log(result))\n\n\u00a0 .catch(<span class=\"hljs-function\"><span class=\"hljs-params\">error<\/span> =&gt;<\/span> <span class=\"hljs-built_in\">console<\/span>.error(error));\n\nRun the script <span class=\"hljs-keyword\">with<\/span>:\n\nnode upload.js<\/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\n\n<p>Once the script runs, the image will upload to Cloudinary and generate multiple breakpoints dynamically as an Array with URLs for the different image sizes:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">{\n\n\u00a0 <span class=\"hljs-attr\">\"public_id\"<\/span>: <span class=\"hljs-string\">\"smiling-lady\"<\/span>,\n\n\u00a0 <span class=\"hljs-attr\">\"responsive_breakpoints\"<\/span>: &#91;\n\n\u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"breakpoints\"<\/span>: &#91;\n\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"width\"<\/span>: <span class=\"hljs-number\">1000<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"height\"<\/span>: <span class=\"hljs-number\">563<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"bytes\"<\/span>: <span class=\"hljs-number\">69741<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_1000\/v1738430393\/smiling-lady.jpg\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"secure_url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_1000\/v1738430393\/smiling-lady.jpg\"<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"width\"<\/span>: <span class=\"hljs-number\">977<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"height\"<\/span>: <span class=\"hljs-number\">550<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"bytes\"<\/span>: <span class=\"hljs-number\">64449<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_977\/v1738430393\/smiling-lady.jpg\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"secure_url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_977\/v1738430393\/smiling-lady.jpg\"<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"width\"<\/span>: <span class=\"hljs-number\">769<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"height\"<\/span>: <span class=\"hljs-number\">433<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"bytes\"<\/span>: <span class=\"hljs-number\">45553<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_769\/v1738430393\/smiling-lady.jpg\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"secure_url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_769\/v1738430393\/smiling-lady.jpg\"<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"width\"<\/span>: <span class=\"hljs-number\">535<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"height\"<\/span>: <span class=\"hljs-number\">301<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"bytes\"<\/span>: <span class=\"hljs-number\">25960<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_535\/v1738430393\/smiling-lady.jpg\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"secure_url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_535\/v1738430393\/smiling-lady.jpg\"<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 },\n\n\u00a0 \u00a0 \u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"width\"<\/span>: <span class=\"hljs-number\">200<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"height\"<\/span>: <span class=\"hljs-number\">113<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"bytes\"<\/span>: <span class=\"hljs-number\">6083<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_200\/v1738430393\/smiling-lady.jpg\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"secure_url\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_200\/v1738430393\/smiling-lady.jpg\"<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 ],\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"transformation\"<\/span>: <span class=\"hljs-string\">\"ar_16:9,c_fill,g_auto\"<\/span>\n\n\u00a0 \u00a0 }\n\n\u00a0 ]\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now, you can use these URLs in your frontend or CMS to serve responsive images dynamically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Test Performance of Image Variations on Mobile and Desktop<\/h2>\n\n\n\n<p>After generating responsive images, the next step is to test if they are correctly delivered based on the screen size. <a target=\"_blank\" href=\"https:\/\/developer.chrome.com\/docs\/devtools\" rel=\"noreferrer noopener\">Chrome DevTools<\/a> provides a simple way to check which image version is loading and how fast it loads on different devices.<\/p>\n\n\n\n<p>To test how images are loaded across different screen sizes, create a simple HTML page that includes a Cloudinary image with breakpoints.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span> \/&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/span> \/&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Responsive Image Test<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-selector-tag\">body<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attribute\">text-align<\/span>: center;\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attribute\">font-family<\/span>: Arial, sans-serif;\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Responsive Image Test<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 Resize your browser or use Chrome DevTools to see how different image\n\n\u00a0 \u00a0 \u00a0 sizes load.\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1738430393\/smiling-lady.jpg\"<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"\n\n\u00a0 \u00a0 \u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_200\/v1738430393\/smiling-lady.jpg \u00a0 200w,\n\n\u00a0 \u00a0 \u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_535\/v1738430393\/smiling-lady.jpg \u00a0 535w,\n\n\u00a0 \u00a0 \u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_769\/v1738430393\/smiling-lady.jpg \u00a0 769w,\n\n\u00a0 \u00a0 \u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_977\/v1738430393\/smiling-lady.jpg \u00a0 977w,\n\n\u00a0 \u00a0 \u00a0 \u00a0 https:\/\/res.cloudinary.com\/demo\/image\/upload\/ar_16:9,c_fill,g_auto\/c_scale,w_1000\/v1738430393\/smiling-lady.jpg 1000w\n\n\u00a0 \u00a0 \u00a0 \"<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"(max-width: 480px) 100vw,\u00a0\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0(max-width: 768px) 80vw,\u00a0\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0(max-width: 1024px) 60vw,\u00a0\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a01000px\"<\/span>\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Responsive Test Image\"<\/span>\n\n\u00a0 \u00a0 \/&gt;<\/span>\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n\u00a0 \u00a0 \u00a0 Open Chrome DevTools (Ctrl + Shift + I), go to the Network tab, and filter\n\n\u00a0 \u00a0 \u00a0 by 'Img' to see which version of the image is being loaded.\n\n\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n\u00a0 <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><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\n\n<p>This code uses Cloudinary\u2019s responsive breakpoints to deliver different image sizes via the <code>srcset<\/code> attribute. The sizes attribute makes sure that the appropriate image size is loaded based on the screen width.<\/p>\n\n\n\n<p>To test, open <strong>Google Chrome<\/strong> or your preferred browser and load the test HTML file. Press <strong>Ctrl + Shift + I <\/strong>(Windows\/Linux) or <strong>Cmd + Option + I (Mac)<\/strong> to open <strong>DevTools<\/strong>, then click the <strong>Network<\/strong> tab at the top. In the filter options, click <strong>Img<\/strong> to display only images, as shown in the GIF below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845623\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-4.gif\" alt=\"Testing breakpoints generated by Cloudinary\"\/><figcaption class=\"wp-element-caption\">Testing breakpoints generated by Cloudinary<\/figcaption><\/figure>\n\n\n\n<p>In the GIF above, you can see that as the screen is resized and the page is reloaded, a different image is loaded based on the screen width. You can also see how long each image takes to load.<\/p>\n\n\n\n<p>Here are the loading times recorded for each image size:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Image Size<\/strong><strong>(Width)<\/strong><\/td><td><strong>File Size<\/strong><\/td><td><strong>Load Time<\/strong><strong>(ms)<\/strong><\/td><\/tr><tr><td><strong>w_200<\/strong><\/td><td>6083 bytes (<strong>5.94<\/strong><strong> KB<\/strong>)<\/td><td>5ms<\/td><\/tr><tr><td><strong>w_535<\/strong><\/td><td>25960 bytes (<strong>25.35<\/strong><strong> KB<\/strong>)<\/td><td>8ms<\/td><\/tr><tr><td><strong>w_769<\/strong><\/td><td>45553 bytes (<strong>44.49<\/strong><strong> KB<\/strong>)<\/td><td>4ms<\/td><\/tr><tr><td><strong>w_977<\/strong><\/td><td>64449 bytes (<strong>62.94<\/strong><strong> KB<\/strong>)<\/td><td>3ms<\/td><\/tr><tr><td><strong>w_1000<\/strong><\/td><td>69741 bytes (<strong>68.11<\/strong><strong> KB<\/strong>)<\/td><td>45ms<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>The larger the image, the longer it takes to load. However, after an image is loaded once, the next request for the same size loads much faster due to caching.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up Device-Specific Workflows with MediaFlows<\/h2>\n\n\n\n<p>After optimizing and testing responsive images, the next step is to automate the entire process using <a target=\"_blank\" href=\"https:\/\/home.mediaflows.cloudinary.com\/\" rel=\"noreferrer noopener\">Cloudinary MediaFlows<\/a>. This makes sure every uploaded image is automatically processed and optimized for different devices without manual intervention.<\/p>\n\n\n\n<p>Cloudinary\u2019s <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/mediaflows\" rel=\"noreferrer noopener\">MediaFlows<\/a> helps automate image transformations, resizing, and optimization by creating workflows that handle these tasks automatically. It offers two types of workflows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>EasyFlows.<\/strong> A simple, no-code automation tool for predefined actions.<\/li>\n\n\n\n<li><strong>PowerFlow<\/strong><strong>s<\/strong><strong>.<\/strong> A more advanced, flexible workflow builder that allows for custom automation and logic.<\/li>\n<\/ul>\n\n\n\n<p>To access Cloudinary\u2019s MediaFlows, open the <strong>Cloudinary console<\/strong> and click the <strong>MediaFlows<\/strong> logo as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845620\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-5.png\" alt=\"Red arrow pointing at the MediaFlows logo on the Cloudinary console\"\/><figcaption class=\"wp-element-caption\">Accessing MediaFlows in Cloudinary<\/figcaption><\/figure>\n\n\n\n<p>The MediaFlows dashboard will open, where you can create workflows. Since you need a workflow that dynamically triggers image processing upon upload, you\u2019ll use <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/mediaflows_build_flow\" rel=\"noreferrer noopener\"><strong>PowerFl<\/strong><\/a><a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/mediaflows_build_flow\" rel=\"noreferrer noopener\"><strong>o<\/strong><\/a><a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/mediaflows_build_flow\" rel=\"noreferrer noopener\"><strong>w<\/strong><\/a><a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/mediaflows_build_flow\" rel=\"noreferrer noopener\"><strong>s<\/strong><\/a>. Click the <strong>+ Create New<\/strong> button, select <strong>PowerFlow<\/strong>, and the UI will open, where you can drag and configure blocks for your workflow.<\/p>\n\n\n\n<p>For this guide, two blocks will be used: <strong>Cloudinary Upload<\/strong> and <strong>Apply Actions<\/strong>.<\/p>\n\n\n\n<p>First, drag the <strong>Cloudinary Upload<\/strong> block to the workspace. This block will detect when an image is uploaded to Cloudinary.&nbsp;<\/p>\n\n\n\n<p>For the workflow to trigger correctly, you need to set up a webhook by clicking the <strong>Set Webhook<\/strong> button. Once enabled, the webhook will send a notification whenever an image is uploaded, activating the workflow.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845619\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-6.png\" alt=\"Red arrow pointing at Set Webhook button\"\/><figcaption class=\"wp-element-caption\">Configuring webhook for Cloudinary Upload block<\/figcaption><\/figure>\n\n\n\n<p>Next, drag the <strong>Apply Actions<\/strong> block to the workspace and connect it to the <strong>Cloudinary Upload<\/strong> block.&nbsp;<\/p>\n\n\n\n<p>Click the <strong>Apply Actions<\/strong> block to see the various options to be configured. Since you need to generate responsive breakpoints, you must extract the <strong>Public ID<\/strong> from the uploaded image.<\/p>\n\n\n\n<p>Click the {} icon at the top of the field to select {{$.Cloudinary_Upload.result.public_id}} from the suggested data, which only appears when both blocks are connected. Then, in the <strong>Optional Parameters<\/strong> field, paste the following configuration:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">{\n\n\u00a0 <span class=\"hljs-attr\">\"responsive_breakpoints\"<\/span>: &#91;\n\n\u00a0 \u00a0 {\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"create_derived\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"bytes_step\"<\/span>: <span class=\"hljs-number\">20000<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"min_width\"<\/span>: <span class=\"hljs-number\">200<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"max_width\"<\/span>: <span class=\"hljs-number\">1000<\/span>,\n\n\u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"transformation\"<\/span>: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"crop\"<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"aspect_ratio\"<\/span>: <span class=\"hljs-string\">\"16:9\"<\/span>,\n\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hljs-attr\">\"gravity\"<\/span>: <span class=\"hljs-string\">\"auto\"<\/span>\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 }\n\n\u00a0 ]\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Once you fill all the fields correctly, the block settings should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845619\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-7.png\" alt=\"One red arrow pointing at the Public ID and the other pointing at Optional Parameters\"\/><figcaption class=\"wp-element-caption\">Configuring Apply Actions block in MediaFlows<\/figcaption><\/figure>\n\n\n\n<p>With the workflow set up, you can now test it by clicking the <strong>Test<\/strong> button. This will send a sample image to your Cloudinary account, and the specified actions will be applied.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845670\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-8.png\" alt=\"Red arrow pointing at Test button\"\/><figcaption class=\"wp-element-caption\">Testing the workflow in Cloudinary MediaFlows.<\/figcaption><\/figure>\n\n\n\n<p>Once the test is successful, you can verify if the workflow triggers correctly when a new image is uploaded to Cloudinary. Upload an image either manually via the UI or programmatically through the API, then check your MediaFlows dashboard for a production log confirming that the process was executed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845902\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-9.png\" alt=\"Red arrow pointing at the executed production process\"\/><figcaption class=\"wp-element-caption\">Workflow execution log<\/figcaption><\/figure>\n\n\n\n<p>With this setup, you have successfully automated responsive image generation. Every uploaded image will now be processed with breakpoints dynamically so that optimized images are delivered for different devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using Analytics to Identify Top-Performing Formats<\/h2>\n\n\n\n<p>Now that you\u2019ve automated responsive image generation, the final step is to analyze how well these images are performing.&nbsp;<\/p>\n\n\n\n<p>Cloudinary provides a built-in <a target=\"_blank\" href=\"https:\/\/cloudinary.com\/documentation\/programmable_media_asset_usage_data\" rel=\"noreferrer noopener\">usage analytics<\/a> dashboard that helps you track which image formats, sizes, and transformations are being used the most. This allows you to see which versions are frequently requested, which ones are consuming the most bandwidth, and whether any image breakpoints are unnecessary.<\/p>\n\n\n\n<p>To access this dashboard, navigate to <strong>Programmable Media<\/strong> &gt; <strong>Delivery Reports,<\/strong> as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845902\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-10.png\" alt=\"One red arrow pointing at Programmable Media icon, and the other red arrow pointing at Delivery Reports\"\/><figcaption class=\"wp-element-caption\">Cloudinary usage analytics dashboard.<\/figcaption><\/figure>\n\n\n\n<p>One of the most important sections here is the Transformations Breakdown, which lists all the different variations of images that have been requested, as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1744845902\/blog-Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary-11.png\" alt=\"A breakdown of top transformations in Cloudinary analytics\"\/><figcaption class=\"wp-element-caption\">Transformations breakdown in Cloudinary analytics<\/figcaption><\/figure>\n\n\n\n<p>If, after checking the analytics, you notice that certain breakpoints or transformations are rarely accessed, that means they may not be necessary. You can then adjust your workflow in MediaFlows to stop generating those versions, saving both processing time and storage.<\/p>\n\n\n\n<p>It\u2019s important to know that the analytics page provides more information, such as bandwidth usage per resource type. All of this information helps you understand how images are being used across different devices and formats, allowing you to refine your workflow for better efficiency.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>With this setup, every image you upload is automatically optimized for mobile and desktop users without extra manual work. Whether you\u2019re a marketer or developer, this makes sure your images loads fast, looks great, and performs well across all screen sizes.<\/p>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/cloudinary.com\/users\/register_free\" rel=\"noreferrer noopener\">Sign up for Cloudinary<\/a> to test and optimize responsive media assets today!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/digital_asset_management_overview\" target=\"_blank\" rel=\"noreferrer noopener\">Digital Asset Management Overview<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images\" target=\"_blank\" rel=\"noreferrer noopener\">Responsive Image Breakpoints<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cloudinary.com\/documentation\/mediaflows\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary MediaFlows<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When a customer browses an online store, every image influences their first impression of your brand and the product. A report from Retail Technology Review shared 75% of online shoppers rely on product photos to make purchasing decisions, and high-quality product photos had a 94% higher conversion rate than low-quality photos. That&#8217;s a lot of [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":37532,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[202,227,251],"class_list":["post-37418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-mobile","tag-performance-optimization","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 Test Mobile and Desktop Assets in Cloudinary<\/title>\n<meta name=\"description\" content=\"What if your product images loaded perfectly on every device? See how Cloudinary delivers optimized visuals without extra work.\" \/>\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\/mobile-vs-desktop-product-images\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Testing Mobile vs. Desktop Product Images in Cloudinary\" \/>\n<meta property=\"og:description\" content=\"What if your product images loaded perfectly on every device? See how Cloudinary delivers optimized visuals without extra work.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-14T14:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.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\/mobile-vs-desktop-product-images#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Testing Mobile vs. Desktop Product Images in Cloudinary\",\"datePublished\":\"2025-05-14T14:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images\"},\"wordCount\":1669,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA\",\"keywords\":[\"Mobile\",\"Performance Optimization\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images\",\"url\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images\",\"name\":\"How to Test Mobile and Desktop Assets in Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA\",\"datePublished\":\"2025-05-14T14:00:00+00:00\",\"description\":\"What if your product images loaded perfectly on every device? See how Cloudinary delivers optimized visuals without extra work.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Testing Mobile vs. Desktop Product Images in Cloudinary\"}]},{\"@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":"How to Test Mobile and Desktop Assets in Cloudinary","description":"What if your product images loaded perfectly on every device? See how Cloudinary delivers optimized visuals without extra work.","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\/mobile-vs-desktop-product-images","og_locale":"en_US","og_type":"article","og_title":"Testing Mobile vs. Desktop Product Images in Cloudinary","og_description":"What if your product images loaded perfectly on every device? See how Cloudinary delivers optimized visuals without extra work.","og_url":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images","og_site_name":"Cloudinary Blog","article_published_time":"2025-05-14T14:00:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.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\/mobile-vs-desktop-product-images#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Testing Mobile vs. Desktop Product Images in Cloudinary","datePublished":"2025-05-14T14:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images"},"wordCount":1669,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA","keywords":["Mobile","Performance Optimization","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images","url":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images","name":"How to Test Mobile and Desktop Assets in Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA","datePublished":"2025-05-14T14:00:00+00:00","description":"What if your product images loaded perfectly on every device? See how Cloudinary delivers optimized visuals without extra work.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/mobile-vs-desktop-product-images#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Testing Mobile vs. Desktop Product Images in Cloudinary"}]},{"@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\/v1744320041\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary\/Blog_Testing_Mobile_vs._Desktop_Product_Images_in_Cloudinary.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37418","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=37418"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37418\/revisions"}],"predecessor-version":[{"id":37611,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37418\/revisions\/37611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/37532"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=37418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=37418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=37418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}