--- title: When the CMS Give You the Wrong Image: A Frontend... description: A decision framework helps frontend developers diagnose why an image doesn't fit a component: resolution shortage, composition mismatch, delivery inefficiency,... canonical: https://daily.dev/posts/when-the-cms-give-you-the-wrong-image-a-frontend-developer-s-decision-framework-lyrgzmqhb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: When the CMS Give You the Wrong Image: A Frontend Developer’s Decision Framework | daily.dev og:description: A decision framework helps frontend developers diagnose why an image doesn't fit a component: resolution shortage, composition mismatch, delivery inefficiency,... og:url: https://daily.dev/posts/when-the-cms-give-you-the-wrong-image-a-frontend-developer-s-decision-framework-lyrgzmqhb og:image: https://api.daily.dev/og/posts/lyRgZMqHB.png og:image:alt: When the CMS Give You the Wrong Image: A Frontend Developer’s Decision Framework og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # When the CMS Give You the Wrong Image: A Frontend Developer’s Decision Framework **[SitePoint](https://daily.dev/sources/sitepoint)** · 12 min read · 0 upvotes · 0 comments ## Summary A decision framework helps frontend developers diagnose why an image doesn't fit a component: resolution shortage, composition mismatch, delivery inefficiency, or encoding bloat are four distinct problems requiring different fixes. The recommended workflow prioritizes finding a better original source before compressing or resizing, maintains a separate original-master-derivative asset hierarchy, and treats images as build pipeline inputs rather than static files. It covers when AI upscaling is reasonable (decorative photography) versus risky (screenshots, diagrams, logos with text or factual content), why vector formats like SVG suit logos better than raster upscaling, and how responsive image techniques (srcset, picture element) should generate delivery variants from a high-quality master rather than serving one oversized file to everyone. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### When is it safe to use AI upscaling tools like Real-ESRGAN on a low-resolution image instead of finding the original? AI upscaling is reasonable when the original source is genuinely unavailable and the image type tolerates synthesized detail, such as ordinary editorial photography, decorative backgrounds, or older marketing assets. It becomes risky for screenshots, diagrams, documents, or medical imagery, where generated detail could subtly alter text, numbers, or meaning. Any upscaled output should still go through visual review rather than being trusted automatically as a replacement master. _daily.dev surfaces practical image-pipeline guidance for teams deciding when AI upscaling is safe to ship._ ### Why shouldn't I compress or convert an image format before checking if the source resolution is adequate? Compressing a JPEG more efficiently or converting it to WebP does not create missing resolution or fix a composition mismatch, it only optimizes the file that already exists. The recommended order is source review, remediation, master creation, generating responsive derivatives, then encoding and delivery optimization, since reordering these steps hides one problem behind another. _Developers refining image pipelines can track ordering pitfalls like this one on daily.dev._ ### Should a blurry logo be upscaled or replaced with a vector file? A blurry raster logo, such as a small JPEG, is usually better replaced with its vector SVG source rather than upscaled, since SVG lets the browser scale geometry without fixed-resolution limits. Before enlarging a raster logo, check whether a vector original already exists; a CMS can even flag a JPEG uploaded to a logo field and prompt an editor to supply the SVG instead. _Frontend teams weighing raster versus vector asset choices can follow workflow tips like this on daily.dev._ ## Similar posts on daily.dev - [When the CMS Gives You the Wrong Image: A Frontend Developer’s Decision Framework](https://daily.dev/posts/when-the-cms-gives-you-the-wrong-image-a-frontend-developer-s-decision-framework-aqsh7wxi9) · SitePoint · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#cms](https://daily.dev/tags/cms), [#svg](https://daily.dev/tags/svg) [View this post on daily.dev](https://daily.dev/posts/when-the-cms-give-you-the-wrong-image-a-frontend-developer-s-decision-framework-lyrgzmqhb) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"When the CMS Give You the Wrong Image: A Frontend Developer’s Decision Framework","url":"https://daily.dev/posts/when-the-cms-give-you-the-wrong-image-a-frontend-developer-s-decision-framework-lyrgzmqhb","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/when-the-cms-give-you-the-wrong-image-a-frontend-developer-s-decision-framework-lyrgzmqhb"},"datePublished":"2026-09-01T15:26:49.706Z","dateModified":"2026-09-01T15:27:21.249Z","description":"A decision framework helps frontend developers diagnose why an image doesn't fit a component: resolution shortage, composition mismatch, delivery inefficiency,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/84721eabfc0f74009dd9192834d3209a?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/84721eabfc0f74009dd9192834d3209a?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"SitePoint","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"SitePoint","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/sitepoint","url":"https://daily.dev/sources/sitepoint"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/when-the-cms-give-you-the-wrong-image-a-frontend-developer-s-decision-framework-lyrgzmqhb","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,cms,svg","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"SitePoint","item":"https://daily.dev/sources/sitepoint"},{"@type":"ListItem","position":3,"name":"When the CMS Give You the Wrong Image: A Frontend Developer’s Decision Framework"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/when-the-cms-give-you-the-wrong-image-a-frontend-developer-s-decision-framework-lyrgzmqhb#faq","mainEntity":[{"@type":"Question","name":"When is it safe to use AI upscaling tools like Real-ESRGAN on a low-resolution image instead of finding the original?","acceptedAnswer":{"@type":"Answer","text":"AI upscaling is reasonable when the original source is genuinely unavailable and the image type tolerates synthesized detail, such as ordinary editorial photography, decorative backgrounds, or older marketing assets. It becomes risky for screenshots, diagrams, documents, or medical imagery, where generated detail could subtly alter text, numbers, or meaning. Any upscaled output should still go through visual review rather than being trusted automatically as a replacement master. daily.dev surfaces practical image-pipeline guidance for teams deciding when AI upscaling is safe to ship."}},{"@type":"Question","name":"Why shouldn't I compress or convert an image format before checking if the source resolution is adequate?","acceptedAnswer":{"@type":"Answer","text":"Compressing a JPEG more efficiently or converting it to WebP does not create missing resolution or fix a composition mismatch, it only optimizes the file that already exists. The recommended order is source review, remediation, master creation, generating responsive derivatives, then encoding and delivery optimization, since reordering these steps hides one problem behind another. Developers refining image pipelines can track ordering pitfalls like this one on daily.dev."}},{"@type":"Question","name":"Should a blurry logo be upscaled or replaced with a vector file?","acceptedAnswer":{"@type":"Answer","text":"A blurry raster logo, such as a small JPEG, is usually better replaced with its vector SVG source rather than upscaled, since SVG lets the browser scale geometry without fixed-resolution limits. Before enlarging a raster logo, check whether a vector original already exists; a CMS can even flag a JPEG uploaded to a logo field and prompt an editor to supply the SVG instead. Frontend teams weighing raster versus vector asset choices can follow workflow tips like this on daily.dev."}}]} ```