[{"data":1,"prerenderedAt":149},["ShallowReactive",2],{"post-image-optimization-for-developers":3},{"id":4,"title":5,"body":6,"description":139,"extension":140,"meta":141,"navigation":143,"path":144,"seo":145,"sitemap":146,"stem":147,"__hash__":148},"blog/blog/image-optimization-for-developers.md","Image Optimization for Developers — A Practical Guide",{"type":7,"value":8,"toc":131},"minimark",[9,13,18,47,51,77,81,84,110,113,117],[10,11,12],"p",{},"Images account for 50%+ of page weight on most websites. Optimizing them is the single highest-impact performance improvement you can make.",[14,15,17],"h2",{"id":16},"the-formats-that-matter","The Formats That Matter",[19,20,21,29,35,41],"ul",{},[22,23,24,28],"li",{},[25,26,27],"strong",{},"WebP"," — 25-35% smaller than JPEG at equivalent quality. Supported by all modern browsers.",[22,30,31,34],{},[25,32,33],{},"AVIF"," — Even smaller than WebP, but slower to encode. Great for static assets.",[22,36,37,40],{},[25,38,39],{},"PNG"," — Lossless. Use only when you need transparency or pixel-perfect graphics.",[22,42,43,46],{},[25,44,45],{},"JPEG"," — Still the default for photos. Quality 75-85 is the sweet spot.",[14,48,50],{"id":49},"workflow-for-web-projects","Workflow for Web Projects",[52,53,54,57,60,67,70],"ol",{},[22,55,56],{},"Export from design tool at 2x resolution",[22,58,59],{},"Compress with quality settings (80% for hero images, 60% for thumbnails)",[22,61,62,63],{},"Generate multiple sizes for responsive ",[64,65,66],"code",{},"srcset",[22,68,69],{},"Convert to WebP with JPEG fallback",[22,71,72,73,76],{},"Serve with proper ",[64,74,75],{},"Cache-Control"," headers",[14,78,80],{"id":79},"why-local-optimization-matters","Why Local Optimization Matters",[10,82,83],{},"Cloud services like TinyPNG or Squoosh work well but:",[19,85,86,92,98,104],{},[22,87,88,91],{},[25,89,90],{},"Upload limits"," — usually 5-10MB per file",[22,93,94,97],{},[25,95,96],{},"Batch limitations"," — one image at a time",[22,99,100,103],{},[25,101,102],{},"Privacy"," — your images are uploaded to someone else's server",[22,105,106,109],{},[25,107,108],{},"Speed"," — network round-trip for every image",[10,111,112],{},"DevKitHub's Image Optimizer runs locally with no file size limits, batch processing, and format conversion. Your screenshots and client assets stay private.",[14,114,116],{"id":115},"quick-wins","Quick Wins",[19,118,119,122,125,128],{},[22,120,121],{},"Strip EXIF metadata (reduces size + removes GPS data)",[22,123,124],{},"Resize to actual display dimensions (don't serve a 4000px image in a 400px container)",[22,126,127],{},"Use CSS for simple shapes instead of images",[22,129,130],{},"Lazy-load below-the-fold images",{"title":132,"searchDepth":133,"depth":133,"links":134},"",2,[135,136,137,138],{"id":16,"depth":133,"text":17},{"id":49,"depth":133,"text":50},{"id":79,"depth":133,"text":80},{"id":115,"depth":133,"text":116},"Reduce image file sizes by 50-80% without visible quality loss. Formats, tools, and workflows for web performance.","md",{"date":142},"2026-06-08",true,"/blog/image-optimization-for-developers",{"title":5,"description":139},{"loc":144},"blog/image-optimization-for-developers","67H_ihoqI-DuBO7dFSgkdu8-0W5IFrDWinr0yCCH-qk",1782010899869]