[{"data":1,"prerenderedAt":280},["ShallowReactive",2],{"sanity-LevEgKvCUg3Ul3GKyhTsfZIfaGswLQ-qsmdjo9-lWe4":3,"sanity-CM5KXdu-lYlyOLTG_tapjkoNk1nq1Ppj6_i676kAp0g":42},{"data":4},{"_createdAt":5,"_id":6,"_rev":7,"_type":6,"_updatedAt":8,"acceptAllLink":9,"acceptNecessaryLink":18,"bannerColorSource":23,"bannerDescription":24,"bannerTitle":25,"categories":26,"declineAllLink":27,"managePreferencesLink":31,"modalColorSource":23,"modalTitle":35,"preferencesIconColorSource":23,"provider":36,"savePreferencesLink":37,"thirdPartyEmbedCode":26,"title":41},"2026-08-29T18:46:18Z","cookieSettings","C1Syut0iGaGX58H2hZvChS","2026-08-29T18:46:23Z",{"_type":10,"style":11,"title":16,"type":17},"link",{"_type":12,"stylePreset":13},"link.style",{"_ref":14,"_type":15},"link-style-primary","reference","Accept all","button",{"_type":10,"style":19,"title":22,"type":17},{"_type":12,"stylePreset":20},{"_ref":21,"_type":15},"link-style-tertiary-outline","Accept necessary","inherit","We use cookies to enhance your browsing experience and analyse our traffic. Please choose your cookie preferences below.","We use cookies",null,{"_type":10,"style":28,"title":30,"type":17},{"_type":12,"stylePreset":29},{"_ref":21,"_type":15},"Decline all",{"_type":10,"style":32,"title":34,"type":17},{"_type":12,"stylePreset":33},{"_ref":21,"_type":15},"Manage preferences","Cookie Preferences","custom",{"_type":10,"style":38,"title":40,"type":17},{"_type":12,"stylePreset":39},{"_ref":14,"_type":15},"Save preferences","Cookie Settings",{"data":43,"sourceMap":-1},[44],{"_createdAt":5,"_id":45,"_rev":7,"_type":46,"_updatedAt":8,"authorProfile":47,"authorRef":58,"body":60,"categories":189,"excerpt":200,"footer":26,"layout":201,"mainImage":205,"navigation":26,"publishedAt":209,"readTime":96,"relatedPosts":210,"routeOptions":264,"seo":270,"showOnWebsite":266,"slug":269,"tags":276,"title":279},"post-image-budget","post",{"avatar":48,"bio":53,"name":54,"role":55,"sameAs":56},{"_type":49,"alt":50,"asset":51},"image","Portrait of Jordan Hale",{"_ref":52,"_type":15},"image-3a10e41064c69525bf602e7eb0d241fe88c6c9f7-512x512-jpg","Jordan builds front ends that stay fast after launch, and spends most of that time deleting work the browser was never asked to do.","Jordan Hale","Front-end Engineer",[57],"https:\u002F\u002Fexample.com\u002Fjordan-hale",{"_ref":59,"_type":15},"author-jordan-hale",[61,72,81,89,99,107,115,124,149,157,173,181],{"_key":62,"_type":63,"children":64,"markDefs":70,"style":71},"b0057","block",[65],{"_key":66,"_type":67,"marks":68,"text":69},"s0058","span",[],"Run any content site through a slow connection and the waterfall tells the same story. The HTML arrives, the CSS arrives, the fonts arrive — and then a single hero image spends four seconds arriving at a size no phone can display.",[],"normal",{"_key":73,"_type":63,"children":74,"markDefs":79,"style":80},"b0059",[75],{"_key":76,"_type":67,"marks":77,"text":78},"s0060",[],"What a CMS can decide for you",[],"h2",{"_key":82,"_type":63,"children":83,"markDefs":88,"style":71},"b0061",[84],{"_key":85,"_type":67,"marks":86,"text":87},"s0062",[],"An asset pipeline that knows the original dimensions can do three things a hand-written tag cannot:",[],{"_key":90,"_type":63,"children":91,"level":96,"listItem":97,"markDefs":98,"style":71},"b0063",[92],{"_key":93,"_type":67,"marks":94,"text":95},"s0064",[],"Serve a width the device asked for, rather than the width that was uploaded.",1,"bullet",[],{"_key":100,"_type":63,"children":101,"level":96,"listItem":97,"markDefs":106,"style":71},"b0065",[102],{"_key":103,"_type":67,"marks":104,"text":105},"s0066",[],"Serve a modern format when the browser accepts one, and fall back when it does not.",[],{"_key":108,"_type":63,"children":109,"level":96,"listItem":97,"markDefs":114,"style":71},"b0067",[110],{"_key":111,"_type":67,"marks":112,"text":113},"s0068",[],"Crop around a hotspot the editor chose, so a 3:1 banner still has a face in it.",[],{"_key":116,"_type":63,"children":117,"markDefs":122,"style":123},"b0069",[118],{"_key":119,"_type":67,"marks":120,"text":121},"s0070",[],"Dimensions are not optional",[],"h3",{"_key":125,"_type":63,"children":126,"markDefs":148,"style":71},"b0076",[127,131,136,140,144],{"_key":128,"_type":67,"marks":129,"text":130},"s0071",[],"A responsive image without ",{"_key":132,"_type":67,"marks":133,"text":135},"s0072",[134],"code","width",{"_key":137,"_type":67,"marks":138,"text":139},"s0073",[]," and ",{"_key":141,"_type":67,"marks":142,"text":143},"s0074",[134],"height",{"_key":145,"_type":67,"marks":146,"text":147},"s0075",[]," reserves no space, so every image on the page is a layout shift waiting to happen. The aspect ratio is known at build time; there is no reason for the browser to guess it.",[],{"_key":150,"_type":63,"children":151,"markDefs":156,"style":123},"b0077",[152],{"_key":153,"_type":67,"marks":154,"text":155},"s0078",[],"One image is eager, the rest are not",[],{"_key":158,"_type":63,"children":159,"markDefs":172,"style":71},"b0082",[160,164,168],{"_key":161,"_type":67,"marks":162,"text":163},"s0079",[],"Exactly one image on a page should be ",{"_key":165,"_type":67,"marks":166,"text":167},"s0080",[134],"fetchpriority=\"high\"",{"_key":169,"_type":67,"marks":170,"text":171},"s0081",[]," — the one already in the viewport. Marking three of them urgent is the same as marking none of them.",[],{"_key":174,"_type":63,"children":175,"markDefs":180,"style":80},"b0083",[176],{"_key":177,"_type":67,"marks":178,"text":179},"s0084",[],"The part that is not technical",[],{"_key":182,"_type":63,"children":183,"markDefs":188,"style":71},"b0085",[184],{"_key":185,"_type":67,"marks":186,"text":187},"s0086",[],"None of it survives an editor uploading a 12 MB screenshot as a thumbnail. Validation on asset size, and a description saying what the image is for, does more for a page-speed score than any amount of tuning further down.",[],[190,196],{"_createdAt":5,"_id":191,"_rev":192,"_type":193,"_updatedAt":5,"slug":194,"title":195},"category-performance","2d20vp0kUSy7uZjqDieLmb","category","performance","Performance",{"_createdAt":5,"_id":197,"_rev":192,"_type":193,"_updatedAt":5,"slug":198,"title":199},"category-design-systems","design-systems","Design Systems","Almost every page that feels slow is slow because of its images. Everything else on the budget is rounding error by comparison.",{"_type":202,"layout":203,"pageDesign":204},"post.layout.options","default","design1",{"_type":49,"alt":206,"asset":207},"Abstract green gradient suggesting layered image tiles",{"_ref":208,"_type":15},"image-6c0abb272e46ebd287a2e6a3e738561c7ed18a2b-1600x900-jpg","2026-01-15T09:00:00.000Z",[211,229,249],{"_id":212,"authorProfile":213,"categories":216,"excerpt":221,"mainImage":222,"publishedAt":226,"readTime":96,"slug":227,"title":228},"post-preview-without-token",{"avatar":214,"name":54,"role":55},{"_type":49,"alt":50,"asset":215},{"_ref":52,"_type":15},[217,220],{"slug":218,"title":219},"developer-experience","Developer Experience",{"slug":194,"title":195},"A read token in the browser bundle is readable by everyone who loads the page. Preview does not need one — the Studio is already logged in.",{"_type":49,"alt":223,"asset":224},"Abstract magenta gradient suggesting a secure channel",{"_ref":225,"_type":15},"image-9d093d7046bd2c85ee744fbbf5abd458e7e85b75-1600x900-jpg","2026-07-28T09:00:00.000Z","draft-preview-without-shipping-a-token","Draft preview without shipping a token to every visitor",{"_id":230,"authorProfile":231,"categories":238,"excerpt":241,"mainImage":242,"publishedAt":246,"readTime":96,"slug":247,"title":248},"post-dark-mode-axis",{"avatar":232,"name":236,"role":237},{"_type":49,"alt":233,"asset":234},"Portrait of Priya Raman",{"_ref":235,"_type":15},"image-cfc7cc28fea565890fb3a5986f7d299c7704a12a-512x512-jpg","Priya Raman","Design Systems Engineer",[239,240],{"slug":198,"title":199},{"slug":194,"title":195},"The server cannot know which colour scheme a visitor prefers. Anything you render that depends on it will hydrate differently than it painted.",{"_type":49,"alt":243,"asset":244},"Abstract indigo gradient split between light and dark",{"_ref":245,"_type":15},"image-96db9eded5277118c54a29e63593a6d24a382797-1600x900-jpg","2026-07-09T09:00:00.000Z","dark-mode-is-a-second-axis","Dark mode is a second axis, not a second stylesheet",{"_id":250,"authorProfile":251,"categories":254,"excerpt":256,"mainImage":257,"publishedAt":261,"readTime":96,"slug":262,"title":263},"post-static-generation",{"avatar":252,"name":54,"role":55},{"_type":49,"alt":50,"asset":253},{"_ref":52,"_type":15},[255],{"slug":194,"title":195},"Prerendering makes a site fast and cheap. It also quietly bakes every assumption your code makes about the request into the HTML you ship.",{"_type":49,"alt":258,"asset":259},"Abstract green gradient suggesting speed and layered caching",{"_ref":260,"_type":15},"image-e6a24a7111f8dd00b29b9257b2a3ed4cd8d1352d-1600x900-jpg","2026-06-02T09:00:00.000Z","static-generation-is-a-caching-strategy","Static generation is a caching strategy, not an architecture",{"_type":265,"includeInSitemap":266,"slug":267},"page.routing.options",true,{"_type":268,"current":269},"slug","the-image-pipeline-is-the-performance-budget",{"_type":271,"description":272,"favicon":273,"image":26,"socialImages":274,"title":275},"seo","Responsive sizing, modern formats, reserved space and one eager image — where the real page-speed wins are.",{"mimeType":26,"url":26},{"facebook":26,"linkedin":26,"twitter":26},"Images are the performance budget",[195,277,278],"Images","Core Web Vitals","The image pipeline is the performance budget",1788029820307]