--- title: Swapping a lightweight image for an animated SVG | daily.dev description: A web developer shares a pattern for improving page performance by initially loading a lightweight AVIF image as a placeholder, then conditionally replacing it... canonical: https://daily.dev/posts/swapping-a-lightweight-image-for-an-animated-svg-cgmsfndei twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Swapping a lightweight image for an animated SVG | daily.dev og:description: A web developer shares a pattern for improving page performance by initially loading a lightweight AVIF image as a placeholder, then conditionally replacing it... og:url: https://daily.dev/posts/swapping-a-lightweight-image-for-an-animated-svg-cgmsfndei og:image: https://api.daily.dev/og/posts/CGmsfnDEI.png og:image:alt: Swapping a lightweight image for an animated SVG 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. # Swapping a lightweight image for an animated SVG **[Blogging and all that Malarkey](https://daily.dev/sources/stuffandnonsense)** · 5 min read · 5 upvotes · 0 comments ## Summary A web developer shares a pattern for improving page performance by initially loading a lightweight AVIF image as a placeholder, then conditionally replacing it with an animated inline SVG only on larger viewports after first paint. The technique uses data attributes for declarative configuration, double requestAnimationFrame() to defer DOM work until after initial render, fetch() to lazily load the SVG fragment, DOMParser for efficient DOM replacement, and a media query listener to restore the static image if the viewport shrinks. This avoids forcing all visitors to download heavy animation markup upfront, keeping mobile fast while preserving the richer animated experience on desktop. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Replace Your Animated GIFs with SVGs – Frontend Masters Blog](https://daily.dev/posts/replace-your-animated-gifs-with-svgs-frontend-masters-blog-lxqgp5qyh) · Frontend Masters · 12 upvotes · 1 comments - [SVG sprites: improve performance \(and keep configurability\)](https://daily.dev/posts/svg-sprites-improve-performance-and-keep-configurability--wnngwxmxo) · RUBYLAND · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#svg](https://daily.dev/tags/svg) [View this post on daily.dev](https://daily.dev/posts/swapping-a-lightweight-image-for-an-animated-svg-cgmsfndei) ```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":"Swapping a lightweight image for an animated SVG","url":"https://daily.dev/posts/swapping-a-lightweight-image-for-an-animated-svg-cgmsfndei","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/swapping-a-lightweight-image-for-an-animated-svg-cgmsfndei"},"datePublished":"2026-07-26T14:36:15.383Z","dateModified":"2026-07-26T14:36:36.342Z","description":"A web developer shares a pattern for improving page performance by initially loading a lightweight AVIF image as a placeholder, then conditionally replacing it...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/e191661d7ea3e6eb1ac87d52e2b5b01c?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/e191661d7ea3e6eb1ac87d52e2b5b01c?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Blogging and all that Malarkey","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":"Blogging and all that Malarkey","logo":"https://media.daily.dev/image/upload/s--EAFiC7C---/f_auto/v1764512231/logos/stuffandnonsense","url":"https://daily.dev/sources/stuffandnonsense"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/swapping-a-lightweight-image-for-an-animated-svg-cgmsfndei","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,svg","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Blogging and all that Malarkey","item":"https://daily.dev/sources/stuffandnonsense"},{"@type":"ListItem","position":3,"name":"Swapping a lightweight image for an animated SVG"}]} ```