--- title: When the CMS Gives You the Wrong Image: A Frontend... description: A decision framework for frontend developers dealing with CMS images that don't fit their intended use. It separates image problems into four categories -... canonical: https://daily.dev/posts/when-the-cms-gives-you-the-wrong-image-a-frontend-developer-s-decision-framework-aqsh7wxi9 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: When the CMS Gives You the Wrong Image: A Frontend Developer’s Decision Framework | daily.dev og:description: A decision framework for frontend developers dealing with CMS images that don't fit their intended use. It separates image problems into four categories -... og:url: https://daily.dev/posts/when-the-cms-gives-you-the-wrong-image-a-frontend-developer-s-decision-framework-aqsh7wxi9 og:image: https://api.daily.dev/og/posts/aqsh7wXi9.png og:image:alt: When the CMS Gives 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 Gives 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 for frontend developers dealing with CMS images that don't fit their intended use. It separates image problems into four categories - resolution, composition, delivery, and encoding - and argues each needs a different fix rather than a single 'optimize it' step. It recommends an asset hierarchy of original → approved master → web derivatives, using AI upscaling (e.g. Real-ESRGAN) only as a last resort for non-factual imagery like photography, while screenshots, diagrams, and logos should be recaptured or replaced with SVG rather than upscaled. It closes with a decision tree and a pipeline order: source review → remediation → master → derivatives → encoding → delivery, keeping masters out of production HTML and letting the browser pick responsive variants via srcset/sizes/picture. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Should I use AI upscaling tools like Real-ESRGAN on a low-resolution screenshot to make it sharper? No, screenshots should generally be recaptured rather than upscaled. AI upscaling synthesizes plausible detail that can subtly alter text, numbers, or icons in a screenshot, which is dangerous when pixel-level factual accuracy matters, such as account numbers, code, dates, or error messages. Recapturing at the intended size is the safer, preferred route for documentation and technical images. _For image pipeline decisions like this, daily.dev surfaces practical frontend engineering guidance in one place._ ### What is the right order of steps in an image processing pipeline for a frontend project? The recommended order is source review, remediation, master creation, generating responsive derivatives, encoding, then delivery. Deciding whether the source image is suitable comes first, followed by fixing or upscaling it only if necessary, preserving an approved master, generating sized variants (e.g. 480 to 1800 pixels), and only then compressing or converting formats like WebP or AVIF for delivery. _Developers building reliable image pipelines can track workflow patterns like this via daily.dev._ ### Should a blurry logo be upscaled or replaced with an SVG? A blurry raster logo should usually be replaced with its vector source rather than upscaled. If the logo originated as vector artwork, the SVG version scales without the fixed-resolution limits of JPEG or PNG, so checking whether a company-logo.svg exists is a better fix than enlarging a small JPEG copy. _Choosing between raster fixes and vector assets is easier when developers follow workflow write-ups like this on daily.dev._ ## Similar posts on daily.dev - [When the CMS Give You the Wrong Image: A Frontend Developer’s Decision Framework](https://daily.dev/posts/when-the-cms-give-you-the-wrong-image-a-frontend-developer-s-decision-framework-lyrgzmqhb) · SitePoint · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#cms](https://daily.dev/tags/cms) [View this post on daily.dev](https://daily.dev/posts/when-the-cms-gives-you-the-wrong-image-a-frontend-developer-s-decision-framework-aqsh7wxi9) ```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 Gives You the Wrong Image: A Frontend Developer’s Decision Framework","url":"https://daily.dev/posts/when-the-cms-gives-you-the-wrong-image-a-frontend-developer-s-decision-framework-aqsh7wxi9","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/when-the-cms-gives-you-the-wrong-image-a-frontend-developer-s-decision-framework-aqsh7wxi9"},"datePublished":"2026-08-30T15:19:42.048Z","dateModified":"2026-08-30T15:20:08.603Z","description":"A decision framework for frontend developers dealing with CMS images that don't fit their intended use. It separates image problems into four categories -...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a70ede4b7e093e7c089ca9f32f5600ca?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a70ede4b7e093e7c089ca9f32f5600ca?_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-gives-you-the-wrong-image-a-frontend-developer-s-decision-framework-aqsh7wxi9","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,cms","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 Gives You the Wrong Image: A Frontend Developer’s Decision Framework"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/when-the-cms-gives-you-the-wrong-image-a-frontend-developer-s-decision-framework-aqsh7wxi9#faq","mainEntity":[{"@type":"Question","name":"Should I use AI upscaling tools like Real-ESRGAN on a low-resolution screenshot to make it sharper?","acceptedAnswer":{"@type":"Answer","text":"No, screenshots should generally be recaptured rather than upscaled. AI upscaling synthesizes plausible detail that can subtly alter text, numbers, or icons in a screenshot, which is dangerous when pixel-level factual accuracy matters, such as account numbers, code, dates, or error messages. Recapturing at the intended size is the safer, preferred route for documentation and technical images. For image pipeline decisions like this, daily.dev surfaces practical frontend engineering guidance in one place."}},{"@type":"Question","name":"What is the right order of steps in an image processing pipeline for a frontend project?","acceptedAnswer":{"@type":"Answer","text":"The recommended order is source review, remediation, master creation, generating responsive derivatives, encoding, then delivery. Deciding whether the source image is suitable comes first, followed by fixing or upscaling it only if necessary, preserving an approved master, generating sized variants (e.g. 480 to 1800 pixels), and only then compressing or converting formats like WebP or AVIF for delivery. Developers building reliable image pipelines can track workflow patterns like this via daily.dev."}},{"@type":"Question","name":"Should a blurry logo be upscaled or replaced with an SVG?","acceptedAnswer":{"@type":"Answer","text":"A blurry raster logo should usually be replaced with its vector source rather than upscaled. If the logo originated as vector artwork, the SVG version scales without the fixed-resolution limits of JPEG or PNG, so checking whether a company-logo.svg exists is a better fix than enlarging a small JPEG copy. Choosing between raster fixes and vector assets is easier when developers follow workflow write-ups like this on daily.dev."}}]} ```