[{"data":1,"prerenderedAt":601},["ShallowReactive",2],{"blog-post-reduce-image-file-size-for-web":3,"blog-post-summaries":561},{"id":4,"title":5,"body":6,"category":540,"date":541,"description":542,"extension":543,"meta":544,"navigation":545,"path":546,"readingMinutes":547,"related":548,"seo":552,"seoDescription":553,"seoTitle":5,"stem":554,"tool":555,"updated":541,"visual":559,"__hash__":560},"blog/blog/reduce-image-file-size-for-web.md","How to Reduce Image File Size for the Web",{"type":7,"value":8,"toc":520},"minimark",[9,13,16,21,24,35,43,46,50,55,58,62,65,74,78,88,166,169,173,182,185,204,212,216,219,222,226,235,253,256,377,383,387,426,429,433,477,481,485,488,492,495,499,502,506,509,513,516],[10,11,12],"p",{},"The most reliable way to reduce an image for the web is to remove unnecessary pixels first, then choose an appropriate format and compression level. Moving a quality slider before checking dimensions often spends time optimizing data the browser never needed.",[10,14,15],{},"File size is shaped by several independent inputs: pixel dimensions, image content, format, encoder settings, transparency, animation, and metadata. Work through them in that order instead of chasing a single target percentage.",[17,18,20],"h2",{"id":19},"start-with-a-pixel-budget","Start with a pixel budget",[10,22,23],{},"Suppose a product photo is 4000 × 3000 pixels. That is 12,000,000 pixels. The largest layout slot displays it at 800 CSS pixels wide, and you want a two-times-density source for sharper high-density screens. A 1600 × 1200 derivative contains 1,920,000 pixels.",[25,26,32],"pre",{"className":27,"code":29,"language":30,"meta":31},[28],"language-text","Original pixels:  4000 × 3000 = 12,000,000\nUseful derivative: 1600 × 1200 = 1,920,000\nReduction in pixel count: 1 - (1,920,000 / 12,000,000) = 84%\n","text","",[33,34,29],"code",{"__ignoreMap":31},[10,36,37,38,42],{},"That is 84% fewer pixels for the encoder to describe. It does ",[39,40,41],"strong",{},"not"," guarantee an 84% reduction in file bytes: formats, image detail, noise, metadata, and settings affect the final result. It does show why resizing is often a higher-value first step than repeatedly recompressing the full camera export.",[10,44,45],{},"Do not resize to the CSS width alone when the design needs a higher-density candidate. Conversely, do not send the largest high-density asset to every screen. Create a small set of useful widths and let responsive markup select among them.",[17,47,49],{"id":48},"use-this-order-of-operations","Use this order of operations",[51,52,54],"h3",{"id":53},"_1-preserve-the-original","1. Preserve the original",[10,56,57],{},"Keep the camera file, design export, or other master unchanged. Produce web derivatives from that source so you can revise dimensions and settings without recompressing an already compressed copy.",[51,59,61],{"id":60},"_2-resize-to-realistic-dimensions","2. Resize to realistic dimensions",[10,63,64],{},"Find the largest CSS width the asset can occupy and decide which device densities you support. A content image capped at 720 CSS pixels might need candidates around 480, 720, and 1440 pixels, rather than an arbitrary 4000-pixel original.",[10,66,67,68,73],{},"TinyImage's ",[69,70,72],"a",{"href":71},"/tools/resize-image","image resize tool"," can create a smaller-dimension PNG in the browser. If the source is a photograph, treat that PNG as an intermediate and follow it with an appropriate JPEG, WebP, or AVIF conversion and compression step.",[51,75,77],{"id":76},"_3-match-the-format-to-the-content","3. Match the format to the content",[10,79,80,81,87],{},"The ",[69,82,86],{"href":83,"rel":84},"https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types",[85],"nofollow","MDN image format guide"," recommends choosing by image characteristics rather than using one raster format for everything.",[89,90,91,107],"table",{},[92,93,94],"thead",{},[95,96,97,101,104],"tr",{},[98,99,100],"th",{},"Image content",[98,102,103],{},"Good starting formats",[98,105,106],{},"Watch for",[108,109,110,122,133,144,155],"tbody",{},[95,111,112,116,119],{},[113,114,115],"td",{},"Photograph",[113,117,118],{},"JPEG, lossy WebP, or lossy AVIF",[113,120,121],{},"Fine texture, faces, and smooth gradients at aggressive settings",[95,123,124,127,130],{},[113,125,126],{},"Screenshot or interface capture",[113,128,129],{},"PNG or lossless WebP",[113,131,132],{},"Small text and high-contrast edges",[95,134,135,138,141],{},[113,136,137],{},"Transparent raster graphic",[113,139,140],{},"PNG, WebP, or AVIF with alpha",[113,142,143],{},"JPEG removes transparency",[95,145,146,149,152],{},[113,147,148],{},"Logo or icon that can remain vector",[113,150,151],{},"SVG",[113,153,154],{},"Embedded raster content, complex filters, and unsafe untrusted markup",[95,156,157,160,163],{},[113,158,159],{},"Animation",[113,161,162],{},"Animated WebP, AVIF, APNG, or GIF where compatibility requires it",[113,164,165],{},"Frame count, dimensions, duration, and fallback support",[10,167,168],{},"The file extension is not a guarantee of size. A photo stored as PNG may shrink substantially when converted to JPEG or WebP. A flat illustration with sharp edges may be smaller and cleaner as PNG or SVG. Compare representative output rather than relying on a format ranking.",[51,170,172],{"id":171},"_4-adjust-quality-in-small-steps","4. Adjust quality in small steps",[10,174,175,176,181],{},"Quality values are encoder controls, not percentages of original quality. The ",[69,177,180],{"href":178,"rel":179},"https://web.dev/learn/images/jpeg",[85],"web.dev JPEG guide"," notes that different tools do not interpret a value such as 75 identically, and the visible result depends on the image itself.",[10,183,184],{},"Start from a moderate setting, inspect the image at its intended display size, and change the setting in small increments. Pay particular attention to:",[186,187,188,192,195,198,201],"ul",{},[189,190,191],"li",{},"text and hard boundaries;",[189,193,194],{},"skin, hair, leaves, and fabric;",[189,196,197],{},"skies, shadows, and other smooth gradients;",[189,199,200],{},"saturated colors beside neutral backgrounds;",[189,202,203],{},"semi-transparent edges.",[10,205,206,207,211],{},"TinyImage starts its quality control at 75 and offers five-point steps. That makes 75 a practical test point within TinyImage, not a universal standard for other encoders. The guide to ",[69,208,210],{"href":209},"/blog/best-image-compression-settings","image compression settings"," explains a fuller comparison method.",[51,213,215],{"id":214},"_5-review-metadata-deliberately","5. Review metadata deliberately",[10,217,218],{},"Camera and editing files may include location data, capture settings, embedded thumbnails, color profiles, copyright fields, and orientation instructions. Removing nonessential metadata can save some bytes, but the effect varies and useful information can be lost.",[10,220,221],{},"Preserve the color profile when consistent appearance is important. Preserve rights information when a publishing workflow depends on it. If orientation metadata is removed, make sure the pixels have first been rotated into the correct display orientation.",[51,223,225],{"id":224},"_6-generate-responsive-variants","6. Generate responsive variants",[10,227,228,229,234],{},"One compressed file is still wasteful if it is sized for the widest desktop and sent to a narrow phone. The ",[69,230,233],{"href":231,"rel":232},"https://web.dev/learn/images/responsive-images",[85],"web.dev responsive image guidance"," separates two jobs:",[186,236,237,247],{},[189,238,239,242,243,246],{},[33,240,241],{},"srcset"," and ",[33,244,245],{},"sizes"," describe alternative dimensions so the browser can choose a candidate;",[189,248,249,252],{},[33,250,251],{},"\u003Cpicture>"," gives explicit control over format or art-direction alternatives.",[10,254,255],{},"For one image with the same crop at three widths:",[25,257,261],{"className":258,"code":259,"language":260,"meta":31,"style":31},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cimg\n  src=\"article-960.webp\"\n  srcset=\"article-480.webp 480w, article-960.webp 960w, article-1440.webp 1440w\"\n  sizes=\"(min-width: 960px) 960px, 100vw\"\n  width=\"1440\"\n  height=\"960\"\n  alt=\"Close-up of a printed photo beside its web export\"\n>\n","html",[33,262,263,276,296,311,326,341,356,371],{"__ignoreMap":31},[264,265,268,272],"span",{"class":266,"line":267},"line",1,[264,269,271],{"class":270},"sMK4o","\u003C",[264,273,275],{"class":274},"swJcz","img\n",[264,277,279,283,286,289,293],{"class":266,"line":278},2,[264,280,282],{"class":281},"spNyl","  src",[264,284,285],{"class":270},"=",[264,287,288],{"class":270},"\"",[264,290,292],{"class":291},"sfazB","article-960.webp",[264,294,295],{"class":270},"\"\n",[264,297,299,302,304,306,309],{"class":266,"line":298},3,[264,300,301],{"class":281},"  srcset",[264,303,285],{"class":270},[264,305,288],{"class":270},[264,307,308],{"class":291},"article-480.webp 480w, article-960.webp 960w, article-1440.webp 1440w",[264,310,295],{"class":270},[264,312,314,317,319,321,324],{"class":266,"line":313},4,[264,315,316],{"class":281},"  sizes",[264,318,285],{"class":270},[264,320,288],{"class":270},[264,322,323],{"class":291},"(min-width: 960px) 960px, 100vw",[264,325,295],{"class":270},[264,327,329,332,334,336,339],{"class":266,"line":328},5,[264,330,331],{"class":281},"  width",[264,333,285],{"class":270},[264,335,288],{"class":270},[264,337,338],{"class":291},"1440",[264,340,295],{"class":270},[264,342,344,347,349,351,354],{"class":266,"line":343},6,[264,345,346],{"class":281},"  height",[264,348,285],{"class":270},[264,350,288],{"class":270},[264,352,353],{"class":291},"960",[264,355,295],{"class":270},[264,357,359,362,364,366,369],{"class":266,"line":358},7,[264,360,361],{"class":281},"  alt",[264,363,285],{"class":270},[264,365,288],{"class":270},[264,367,368],{"class":291},"Close-up of a printed photo beside its web export",[264,370,295],{"class":270},[264,372,374],{"class":266,"line":373},8,[264,375,376],{"class":270},">\n",[10,378,379,380,382],{},"Replace the example ",[33,381,245],{}," rule with the real rendered slot. An inaccurate value can lead the browser to select a larger candidate than necessary.",[17,384,386],{"id":385},"a-practical-tinyimage-workflow","A practical TinyImage workflow",[388,389,390,398,401,404,412,420,423],"ol",{},[189,391,392,393,397],{},"Use the ",[69,394,396],{"href":395},"/analyzer","website image analyzer"," to identify possible same-format compression savings on a public page.",[189,399,400],{},"Check the displayed and intrinsic dimensions in browser developer tools.",[189,402,403],{},"Resize a copy when the source is materially larger than its useful high-density width.",[189,405,406,407,411],{},"Choose a delivery format. For a photo-heavy PNG that does not need transparency, the ",[69,408,410],{"href":409},"/convert/png-to-jpeg","PNG to JPEG converter"," is one option. For a modern website, compare WebP or AVIF as well.",[189,413,414,415,419],{},"Run the chosen derivative through the relevant ",[69,416,418],{"href":417},"/compress","image compressor",".",[189,421,422],{},"Compare appearance, bytes, transparency, and dimensions before replacing the published asset.",[189,424,425],{},"Add responsive candidates and verify which source the browser selects at representative layouts.",[10,427,428],{},"The analyzer estimates compression opportunity; it does not determine the right dimensions, format, loading priority, or Core Web Vitals result. Those checks remain part of the publishing workflow.",[17,430,432],{"id":431},"mistakes-that-leave-files-larger-than-necessary","Mistakes that leave files larger than necessary",[186,434,435,441,447,453,459,465,471],{},[189,436,437,440],{},[39,438,439],{},"Changing only CSS dimensions."," The browser still downloads the full source unless responsive image markup selects another file.",[189,442,443,446],{},[39,444,445],{},"Converting every image to PNG."," Lossless PNG is often a poor delivery choice for detailed photographs.",[189,448,449,452],{},[39,450,451],{},"Assuming every conversion is smaller."," An already efficient source can produce a larger output in another format.",[189,454,455,458],{},[39,456,457],{},"Recompressing the latest derivative."," Return to the master to avoid compounding lossy artifacts.",[189,460,461,464],{},[39,462,463],{},"Removing transparency by accident."," JPEG has no alpha channel; transparent pixels must be flattened against a background.",[189,466,467,470],{},[39,468,469],{},"Using quality 100 by habit."," It can add bytes without a visible benefit at the final display size.",[189,472,473,476],{},[39,474,475],{},"Optimizing one image and ignoring selection."," A good 1440-pixel file is still the wrong response for a 320-pixel slot if no smaller candidate exists.",[17,478,480],{"id":479},"common-questions","Common questions",[51,482,484],{"id":483},"does-changing-dpi-reduce-image-file-size-for-a-website","Does changing DPI reduce image file size for a website?",[10,486,487],{},"Changing only a DPI metadata value usually does not remove pixels. Browsers size raster images using pixel dimensions and CSS layout. Reduce the actual width and height when the source contains unnecessary pixels.",[51,489,491],{"id":490},"can-i-reduce-file-size-without-changing-dimensions","Can I reduce file size without changing dimensions?",[10,493,494],{},"Yes. Re-encoding, adjusting lossy quality, optimizing a lossless representation, reducing a palette, or removing metadata may help. The available savings depend on the source.",[51,496,498],{"id":497},"why-did-conversion-make-my-image-larger","Why did conversion make my image larger?",[10,500,501],{},"The original may already be efficiently encoded, or the new format and settings may be a poor match for its content. Compare the bytes and keep the original when conversion offers no useful benefit.",[51,503,505],{"id":504},"should-website-images-be-below-a-specific-number-of-kilobytes","Should website images be below a specific number of kilobytes?",[10,507,508],{},"There is no single useful limit for every placement. A full-width editorial hero and a small icon have different visual and layout requirements. Set budgets by component and total page weight, then measure real loading behavior.",[51,510,512],{"id":511},"should-i-compress-first-or-resize-first","Should I compress first or resize first?",[10,514,515],{},"Resize a copy to its required dimensions first, then encode and compress the derivative. This prevents spending work on pixels that will be discarded and avoids an additional lossy generation.",[517,518,519],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":31,"searchDepth":278,"depth":278,"links":521},[522,523,531,532,533],{"id":19,"depth":278,"text":20},{"id":48,"depth":278,"text":49,"children":524},[525,526,527,528,529,530],{"id":53,"depth":298,"text":54},{"id":60,"depth":298,"text":61},{"id":76,"depth":298,"text":77},{"id":171,"depth":298,"text":172},{"id":214,"depth":298,"text":215},{"id":224,"depth":298,"text":225},{"id":385,"depth":278,"text":386},{"id":431,"depth":278,"text":432},{"id":479,"depth":278,"text":480,"children":534},[535,536,537,538,539],{"id":483,"depth":298,"text":484},{"id":490,"depth":298,"text":491},{"id":497,"depth":298,"text":498},{"id":504,"depth":298,"text":505},{"id":511,"depth":298,"text":512},"Web Performance","2026-09-06","A practical workflow for reducing web image size through correct dimensions, format selection, compression, metadata review, and responsive delivery.","md",{},true,"/blog/reduce-image-file-size-for-web","8",[549,550,551],"compress-images-without-losing-quality","image-optimization-website-performance","best-image-compression-settings",{"title":5,"description":542},"Reduce image file size for websites with a repeatable process covering dimensions, formats, quality settings, metadata, and responsive image variants.","blog/reduce-image-file-size-for-web",{"title":556,"description":557,"label":558,"to":71},"Remove unnecessary pixels first","Resize an oversized source to useful web dimensions before choosing its final delivery format and compression settings.","Resize an image","reduce-file-size","DM3DuOKjORK9ioyI9ghUBOdoHq66fN2Br3QR2pt9hWU",[562,567,574,579,584,590,595,596],{"path":209,"title":563,"description":564,"category":565,"date":541,"readingMinutes":547,"visual":566},"Best Image Compression Settings for Websites","Use a repeatable comparison method to choose image compression settings by format, content type and display size instead of trusting one universal quality number.","Compression","compression-settings",{"path":568,"title":569,"description":570,"category":571,"date":541,"readingMinutes":572,"visual":573},"/blog/best-image-format-for-websites","Best Image Format for Websites","Choose the right web image format for photographs, transparent graphics, logos, screenshots, animation, and browser fallbacks.","Formats","9","best-web-format",{"path":575,"title":576,"description":577,"category":565,"date":541,"readingMinutes":547,"visual":578},"/blog/compress-images-without-losing-quality","How to Compress Images Without Losing Quality","A practical workflow for making images smaller while protecting the detail, dimensions, and transparency that matter.","compress-quality",{"path":580,"title":581,"description":582,"category":540,"date":541,"readingMinutes":547,"visual":583},"/blog/image-optimization-website-performance","How Image Optimization Improves Website Performance","See how image size, dimensions, responsive delivery, loading priority, and layout sizing affect real website performance metrics.","image-performance",{"path":585,"title":586,"description":587,"category":565,"date":541,"readingMinutes":588,"visual":589},"/blog/lossy-vs-lossless-image-compression","Lossy vs Lossless Image Compression","Understand what lossy and lossless compression change, which formats use each method, and how to choose the right approach for photos, graphics, and web images.","7","lossy-vs-lossless",{"path":591,"title":592,"description":593,"category":571,"date":541,"readingMinutes":547,"visual":594},"/blog/png-vs-jpg","PNG vs JPG: Which Format Should You Use?","Choose between PNG and JPG based on transparency, image content, file size, editing needs, and where the image will be used.","png-vs-jpg",{"path":546,"title":5,"description":542,"category":540,"date":541,"readingMinutes":547,"visual":559},{"path":597,"title":598,"description":599,"category":571,"date":541,"readingMinutes":572,"visual":600},"/blog/webp-vs-avif","WebP vs AVIF: Which Is Better for the Web?","Compare WebP and AVIF by visual quality, file size, browser delivery, transparency, animation, and production workflow.","webp-vs-avif",1790175605474]