[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-categories":3,"post-optimizing-images-modern-web":73,"parsed-post-f3b09ee9-105b-4aad-9660-5e753fee9c8c":142},{"success":4,"data":5},true,{"items":6,"pagination":70},[7,16,24,32,40,48,56,63],{"id":8,"name":9,"description":10,"parentId":11,"createdAt":12,"updatedAt":12,"parent":11,"children":13,"_count":14},"ai-future","AI & The Future","Artificial intelligence and emerging technology",null,"2026-07-24T06:02:45.990Z",[],{"posts":15},1,{"id":17,"name":18,"description":19,"parentId":11,"createdAt":20,"updatedAt":20,"parent":11,"children":21,"_count":22},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":23},7,{"id":25,"name":26,"description":27,"parentId":11,"createdAt":28,"updatedAt":28,"parent":11,"children":29,"_count":30},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":31},3,{"id":33,"name":34,"description":35,"parentId":11,"createdAt":36,"updatedAt":36,"parent":11,"children":37,"_count":38},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":39},6,{"id":41,"name":42,"description":43,"parentId":11,"createdAt":44,"updatedAt":44,"parent":11,"children":45,"_count":46},"tutorials","Tutorials","Step-by-step learning guides","2026-07-24T06:02:44.965Z",[],{"posts":47},21,{"id":49,"name":50,"description":51,"parentId":11,"createdAt":52,"updatedAt":52,"parent":11,"children":53,"_count":54},"software-engineering","Software Engineering","Best practices, patterns, and principles","2026-07-24T06:02:44.689Z",[],{"posts":55},24,{"id":57,"name":58,"description":59,"parentId":11,"createdAt":60,"updatedAt":60,"parent":11,"children":61,"_count":62},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":39},{"id":64,"name":65,"description":66,"parentId":11,"createdAt":67,"updatedAt":67,"parent":11,"children":68,"_count":69},"web-development","Web Development","Frontend and backend web development tutorials and guides","2026-07-24T06:02:44.169Z",[],{"posts":55},{"page":15,"limit":71,"total":71,"totalPages":15,"hasNext":72,"hasPrev":72},8,false,{"success":4,"data":74},{"id":75,"slug":76,"title":77,"excerpt":78,"content":79,"status":80,"visibility":81,"featuredImage":82,"canonicalUrl":11,"readingTime":23,"viewCount":83,"commentEnabled":4,"publishedAt":84,"scheduledAt":11,"createdAt":85,"updatedAt":86,"seoTitle":87,"seoDescription":78,"seoKeywords":11,"authorId":88,"author":89,"coAuthors":94,"tags":95,"categories":106,"comments":109,"_count":110,"relatedPosts":112},"f3b09ee9-105b-4aad-9660-5e753fee9c8c","optimizing-images-modern-web","Optimizing Images for the Modern Web","Reduce page weight by 60% with modern image formats, responsive sizing, lazy loading, and CDN-based optimization strategies.","## Images Are the Biggest Offenders\n\nOn average, images account for 50% of page weight. Optimizing them is the single highest-impact performance improvement you can make.\n\n## Modern Formats\n\n| Format | Use Case | Size vs JPEG |\n|--------|----------|:------------:|\n| WebP | General purpose | 25-35% smaller |\n| AVIF | Photos, rich imagery | 40-50% smaller |\n| SVG | Icons, illustrations | Infinitely scalable |\n\n```html\n\u003Cpicture>\n  \u003Csource srcset=\"hero.avif\" type=\"image\u002Favif\" \u002F>\n  \u003Csource srcset=\"hero.webp\" type=\"image\u002Fwebp\" \u002F>\n  \u003Cimg src=\"hero.jpg\" alt=\"Hero image\" width=\"1200\" height=\"600\" \u002F>\n\u003C\u002Fpicture>\n```\n\n## Responsive Images\n\nDon't serve a 2400px image to a 375px phone:\n\n```html\n\u003Cimg\n  srcset=\"\n    hero-400.webp 400w,\n    hero-800.webp 800w,\n    hero-1200.webp 1200w,\n    hero-2400.webp 2400w\n  \"\n  sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 1200px\"\n  src=\"hero-1200.webp\"\n  alt=\"Descriptive alt text\"\n  width=\"1200\"\n  height=\"600\"\n  loading=\"lazy\"\n  decoding=\"async\"\n\u002F>\n```\n\n## With Nuxt Image\n\n```vue\n\u003Ctemplate>\n  \u003CNuxtImg\n    src=\"\u002Fimages\u002Fhero.jpg\"\n    width=\"1200\"\n    height=\"600\"\n    format=\"webp\"\n    quality=\"80\"\n    sizes=\"100vw md:50vw lg:1200px\"\n    loading=\"lazy\"\n    placeholder\n  \u002F>\n\u003C\u002Ftemplate>\n```\n\n::callout{icon=\"i-lucide-image\" color=\"primary\"}\nNuxt Image automatically generates responsive sizes, converts formats, and adds blur-up placeholders. It's the easiest path to optimized images.\n::\n\n## Lazy Loading Strategy\n\n- **Above the fold**: `loading=\"eager\"` + preload\n- **Below the fold**: `loading=\"lazy\"` + blur placeholder\n- **LCP image**: Never lazy load! Preload it.\n\n```html\n\u003C!-- Preload the LCP image in your head -->\n\u003Clink\n  rel=\"preload\"\n  as=\"image\"\n  href=\"\u002Fhero.avif\"\n  type=\"image\u002Favif\"\n  fetchpriority=\"high\"\n\u002F>\n```\n\n## CDN Optimization\n\nMost CDNs (Cloudflare, Vercel, Imgix) can transform images on the fly:\n\n```\nhttps:\u002F\u002Fcdn.example.com\u002Fimage.jpg?w=800&h=400&fit=cover&format=auto&quality=75\n```\n\nBenefits:\n- Store one high-res original\n- Serve optimized variants per device\n- Auto-format detection (AVIF for Chrome, WebP for Safari)\n\n## Quick Checklist\n\n- [ ] Use WebP\u002FAVIF with JPEG fallback\n- [ ] Set explicit width\u002Fheight (prevents CLS)\n- [ ] Serve responsive sizes\n- [ ] Lazy load below-the-fold images\n- [ ] Preload LCP image\n- [ ] Use a CDN with auto-optimization\n- [ ] Compress with quality 75-85 (imperceptible to humans)\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633356122544-f134324a6cee?w=1200&q=80",2088,"2026-06-01T06:03:48.905Z","2026-07-24T06:03:48.912Z","2026-07-28T17:15:19.729Z","Optimizing Images for the Modern Web | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":90,"bio":91,"id":88,"name":92,"avatarUrl":93},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[96,101],{"id":97,"name":98,"color":99,"description":100},"css","CSS","#1572b6","Cascading Style Sheets",{"id":102,"name":103,"color":104,"description":105},"performance","Performance","#e535ab","Web performance optimization",[107,108],{"id":64,"name":65,"description":66},{"id":41,"name":42,"description":43},[],{"comments":111},0,[113,122,132],{"id":114,"slug":115,"title":116,"excerpt":117,"featuredImage":118,"viewCount":119,"readingTime":71,"publishedAt":120,"author":121},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,"2026-07-23T06:02:46.910Z",{"id":88,"name":92,"avatarUrl":93},{"id":123,"slug":124,"title":125,"excerpt":126,"featuredImage":127,"viewCount":128,"readingTime":129,"publishedAt":130,"author":131},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",257,10,"2026-07-21T06:02:49.268Z",{"id":88,"name":92,"avatarUrl":93},{"id":133,"slug":134,"title":135,"excerpt":136,"featuredImage":137,"viewCount":138,"readingTime":139,"publishedAt":140,"author":141},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",990,12,"2026-07-19T06:02:51.753Z",{"id":88,"name":92,"avatarUrl":93},{"data":143,"body":145,"toc":507},{"title":144,"description":144},"",{"type":146,"children":147},"root",[148,157,163,169,257,270,276,281,289,295,305,316,322,373,381,387,392,402,407,425,431,502],{"type":149,"tag":150,"props":151,"children":153},"element","h2",{"id":152},"images-are-the-biggest-offenders",[154],{"type":155,"value":156},"text","Images Are the Biggest Offenders",{"type":149,"tag":158,"props":159,"children":160},"p",{},[161],{"type":155,"value":162},"On average, images account for 50% of page weight. Optimizing them is the single highest-impact performance improvement you can make.",{"type":149,"tag":150,"props":164,"children":166},{"id":165},"modern-formats",[167],{"type":155,"value":168},"Modern Formats",{"type":149,"tag":170,"props":171,"children":172},"table",{},[173,198],{"type":149,"tag":174,"props":175,"children":176},"thead",{},[177],{"type":149,"tag":178,"props":179,"children":180},"tr",{},[181,187,192],{"type":149,"tag":182,"props":183,"children":184},"th",{},[185],{"type":155,"value":186},"Format",{"type":149,"tag":182,"props":188,"children":189},{},[190],{"type":155,"value":191},"Use Case",{"type":149,"tag":182,"props":193,"children":195},{"align":194},"center",[196],{"type":155,"value":197},"Size vs JPEG",{"type":149,"tag":199,"props":200,"children":201},"tbody",{},[202,221,239],{"type":149,"tag":178,"props":203,"children":204},{},[205,211,216],{"type":149,"tag":206,"props":207,"children":208},"td",{},[209],{"type":155,"value":210},"WebP",{"type":149,"tag":206,"props":212,"children":213},{},[214],{"type":155,"value":215},"General purpose",{"type":149,"tag":206,"props":217,"children":218},{"align":194},[219],{"type":155,"value":220},"25-35% smaller",{"type":149,"tag":178,"props":222,"children":223},{},[224,229,234],{"type":149,"tag":206,"props":225,"children":226},{},[227],{"type":155,"value":228},"AVIF",{"type":149,"tag":206,"props":230,"children":231},{},[232],{"type":155,"value":233},"Photos, rich imagery",{"type":149,"tag":206,"props":235,"children":236},{"align":194},[237],{"type":155,"value":238},"40-50% smaller",{"type":149,"tag":178,"props":240,"children":241},{},[242,247,252],{"type":149,"tag":206,"props":243,"children":244},{},[245],{"type":155,"value":246},"SVG",{"type":149,"tag":206,"props":248,"children":249},{},[250],{"type":155,"value":251},"Icons, illustrations",{"type":149,"tag":206,"props":253,"children":254},{"align":194},[255],{"type":155,"value":256},"Infinitely scalable",{"type":149,"tag":258,"props":259,"children":264},"pre",{"className":260,"code":261,"language":262,"meta":144,"style":263},"language-html","\u003Cpicture>\n  \u003Csource srcset=\"hero.avif\" type=\"image\u002Favif\" \u002F>\n  \u003Csource srcset=\"hero.webp\" type=\"image\u002Fwebp\" \u002F>\n  \u003Cimg src=\"hero.jpg\" alt=\"Hero image\" width=\"1200\" height=\"600\" \u002F>\n\u003C\u002Fpicture>\n","html","undefined",[265],{"type":149,"tag":266,"props":267,"children":268},"code",{"__ignoreMap":144},[269],{"type":155,"value":261},{"type":149,"tag":150,"props":271,"children":273},{"id":272},"responsive-images",[274],{"type":155,"value":275},"Responsive Images",{"type":149,"tag":158,"props":277,"children":278},{},[279],{"type":155,"value":280},"Don't serve a 2400px image to a 375px phone:",{"type":149,"tag":258,"props":282,"children":284},{"className":260,"code":283,"language":262,"meta":144,"style":263},"\u003Cimg\n  srcset=\"\n    hero-400.webp 400w,\n    hero-800.webp 800w,\n    hero-1200.webp 1200w,\n    hero-2400.webp 2400w\n  \"\n  sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 1200px\"\n  src=\"hero-1200.webp\"\n  alt=\"Descriptive alt text\"\n  width=\"1200\"\n  height=\"600\"\n  loading=\"lazy\"\n  decoding=\"async\"\n\u002F>\n",[285],{"type":149,"tag":266,"props":286,"children":287},{"__ignoreMap":144},[288],{"type":155,"value":283},{"type":149,"tag":150,"props":290,"children":292},{"id":291},"with-nuxt-image",[293],{"type":155,"value":294},"With Nuxt Image",{"type":149,"tag":258,"props":296,"children":300},{"className":297,"code":298,"language":299,"meta":144,"style":263},"language-vue","\u003Ctemplate>\n  \u003CNuxtImg\n    src=\"\u002Fimages\u002Fhero.jpg\"\n    width=\"1200\"\n    height=\"600\"\n    format=\"webp\"\n    quality=\"80\"\n    sizes=\"100vw md:50vw lg:1200px\"\n    loading=\"lazy\"\n    placeholder\n  \u002F>\n\u003C\u002Ftemplate>\n","vue",[301],{"type":149,"tag":266,"props":302,"children":303},{"__ignoreMap":144},[304],{"type":155,"value":298},{"type":149,"tag":306,"props":307,"children":310},"callout",{"color":308,"icon":309},"primary","i-lucide-image",[311],{"type":149,"tag":158,"props":312,"children":313},{},[314],{"type":155,"value":315},"Nuxt Image automatically generates responsive sizes, converts formats, and adds blur-up placeholders. It's the easiest path to optimized images.",{"type":149,"tag":150,"props":317,"children":319},{"id":318},"lazy-loading-strategy",[320],{"type":155,"value":321},"Lazy Loading Strategy",{"type":149,"tag":323,"props":324,"children":325},"ul",{},[326,346,363],{"type":149,"tag":327,"props":328,"children":329},"li",{},[330,336,338,344],{"type":149,"tag":331,"props":332,"children":333},"strong",{},[334],{"type":155,"value":335},"Above the fold",{"type":155,"value":337},": ",{"type":149,"tag":266,"props":339,"children":341},{"className":340},[],[342],{"type":155,"value":343},"loading=\"eager\"",{"type":155,"value":345}," + preload",{"type":149,"tag":327,"props":347,"children":348},{},[349,354,355,361],{"type":149,"tag":331,"props":350,"children":351},{},[352],{"type":155,"value":353},"Below the fold",{"type":155,"value":337},{"type":149,"tag":266,"props":356,"children":358},{"className":357},[],[359],{"type":155,"value":360},"loading=\"lazy\"",{"type":155,"value":362}," + blur placeholder",{"type":149,"tag":327,"props":364,"children":365},{},[366,371],{"type":149,"tag":331,"props":367,"children":368},{},[369],{"type":155,"value":370},"LCP image",{"type":155,"value":372},": Never lazy load! Preload it.",{"type":149,"tag":258,"props":374,"children":376},{"className":260,"code":375,"language":262,"meta":144,"style":263},"\u003C!-- Preload the LCP image in your head -->\n\u003Clink\n  rel=\"preload\"\n  as=\"image\"\n  href=\"\u002Fhero.avif\"\n  type=\"image\u002Favif\"\n  fetchpriority=\"high\"\n\u002F>\n",[377],{"type":149,"tag":266,"props":378,"children":379},{"__ignoreMap":144},[380],{"type":155,"value":375},{"type":149,"tag":150,"props":382,"children":384},{"id":383},"cdn-optimization",[385],{"type":155,"value":386},"CDN Optimization",{"type":149,"tag":158,"props":388,"children":389},{},[390],{"type":155,"value":391},"Most CDNs (Cloudflare, Vercel, Imgix) can transform images on the fly:",{"type":149,"tag":258,"props":393,"children":397},{"className":394,"code":396,"language":155},[395],"language-text","https:\u002F\u002Fcdn.example.com\u002Fimage.jpg?w=800&h=400&fit=cover&format=auto&quality=75\n",[398],{"type":149,"tag":266,"props":399,"children":400},{"__ignoreMap":144},[401],{"type":155,"value":396},{"type":149,"tag":158,"props":403,"children":404},{},[405],{"type":155,"value":406},"Benefits:",{"type":149,"tag":323,"props":408,"children":409},{},[410,415,420],{"type":149,"tag":327,"props":411,"children":412},{},[413],{"type":155,"value":414},"Store one high-res original",{"type":149,"tag":327,"props":416,"children":417},{},[418],{"type":155,"value":419},"Serve optimized variants per device",{"type":149,"tag":327,"props":421,"children":422},{},[423],{"type":155,"value":424},"Auto-format detection (AVIF for Chrome, WebP for Safari)",{"type":149,"tag":150,"props":426,"children":428},{"id":427},"quick-checklist",[429],{"type":155,"value":430},"Quick Checklist",{"type":149,"tag":323,"props":432,"children":435},{"className":433},[434],"contains-task-list",[436,448,457,466,475,484,493],{"type":149,"tag":327,"props":437,"children":440},{"className":438},[439],"task-list-item",[441,446],{"type":149,"tag":442,"props":443,"children":445},"input",{"disabled":4,"type":444},"checkbox",[],{"type":155,"value":447}," Use WebP\u002FAVIF with JPEG fallback",{"type":149,"tag":327,"props":449,"children":451},{"className":450},[439],[452,455],{"type":149,"tag":442,"props":453,"children":454},{"disabled":4,"type":444},[],{"type":155,"value":456}," Set explicit width\u002Fheight (prevents CLS)",{"type":149,"tag":327,"props":458,"children":460},{"className":459},[439],[461,464],{"type":149,"tag":442,"props":462,"children":463},{"disabled":4,"type":444},[],{"type":155,"value":465}," Serve responsive sizes",{"type":149,"tag":327,"props":467,"children":469},{"className":468},[439],[470,473],{"type":149,"tag":442,"props":471,"children":472},{"disabled":4,"type":444},[],{"type":155,"value":474}," Lazy load below-the-fold images",{"type":149,"tag":327,"props":476,"children":478},{"className":477},[439],[479,482],{"type":149,"tag":442,"props":480,"children":481},{"disabled":4,"type":444},[],{"type":155,"value":483}," Preload LCP image",{"type":149,"tag":327,"props":485,"children":487},{"className":486},[439],[488,491],{"type":149,"tag":442,"props":489,"children":490},{"disabled":4,"type":444},[],{"type":155,"value":492}," Use a CDN with auto-optimization",{"type":149,"tag":327,"props":494,"children":496},{"className":495},[439],[497,500],{"type":149,"tag":442,"props":498,"children":499},{"disabled":4,"type":444},[],{"type":155,"value":501}," Compress with quality 75-85 (imperceptible to humans)",{"type":149,"tag":503,"props":504,"children":505},"style",{},[506],{"type":155,"value":144},{"title":144,"searchDepth":508,"depth":508,"links":509},2,[510,511,512,513,514,515,516],{"id":152,"depth":508,"text":156},{"id":165,"depth":508,"text":168},{"id":272,"depth":508,"text":275},{"id":291,"depth":508,"text":294},{"id":318,"depth":508,"text":321},{"id":383,"depth":508,"text":386},{"id":427,"depth":508,"text":430}]