[{"data":1,"prerenderedAt":470},["ShallowReactive",2],{"blog-post-lossy-vs-lossless-image-compression":3,"blog-post-summaries":431},{"id":4,"title":5,"body":6,"category":409,"date":410,"description":411,"extension":412,"meta":413,"navigation":414,"path":415,"readingMinutes":416,"related":417,"seo":421,"seoDescription":422,"seoTitle":423,"stem":424,"tool":425,"updated":410,"visual":429,"__hash__":430},"blog/blog/lossy-vs-lossless-image-compression.md","Lossy vs Lossless Image Compression",{"type":7,"value":8,"toc":392},"minimark",[9,13,16,21,32,110,113,117,120,136,139,147,150,154,163,166,184,187,190,194,277,280,284,329,352,356,361,364,368,371,375,378,382,385,389],[10,11,12],"p",{},"Lossy and lossless describe what an encoder is allowed to do with image data. Lossless compression preserves enough information to reconstruct the encoded pixels exactly. Lossy compression deliberately discards or approximates information to make a smaller file.",[10,14,15],{},"That distinction is useful, but it is not the whole decision. A lossless file can still be unnecessarily large, while a carefully encoded lossy image can look unchanged at its intended display size. The right choice depends on what the image contains, whether it will be edited again, and how much fidelity the final use requires.",[17,18,20],"h2",{"id":19},"the-practical-difference","The practical difference",[10,22,23,24,31],{},"The ",[25,26,30],"a",{"href":27,"rel":28},"https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types",[29],"nofollow","MDN image format guide"," identifies PNG as a lossless format, JPEG as lossy, and WebP and AVIF as formats that can use either mode. In day-to-day work, those modes behave differently:",[33,34,35,51],"table",{},[36,37,38],"thead",{},[39,40,41,45,48],"tr",{},[42,43,44],"th",{},"Question",[42,46,47],{},"Lossless compression",[42,49,50],{},"Lossy compression",[52,53,54,66,77,88,99],"tbody",{},[39,55,56,60,63],{},[57,58,59],"td",{},"Can the encoded pixels be reconstructed exactly?",[57,61,62],{},"Yes",[57,64,65],{},"No",[39,67,68,71,74],{},[57,69,70],{},"Where do file-size savings come from?",[57,72,73],{},"More efficient representation of repeated or predictable data",[57,75,76],{},"Efficient representation plus discarded or approximated detail",[39,78,79,82,85],{},[57,80,81],{},"What happens after repeated encoding?",[57,83,84],{},"Re-encoding should not introduce visual degradation if pixels and settings stay unchanged",[57,86,87],{},"Each new lossy encode can introduce more artifacts",[39,89,90,93,96],{},[57,91,92],{},"Typical web formats",[57,94,95],{},"PNG; lossless WebP; lossless AVIF",[57,97,98],{},"JPEG; lossy WebP; lossy AVIF",[39,100,101,104,107],{},[57,102,103],{},"Best fit",[57,105,106],{},"Masters, screenshots, line art, text, and graphics that need exact edges",[57,108,109],{},"Photographs and delivery files where smaller size matters more than pixel-for-pixel reproduction",[10,111,112],{},"Lossless does not mean uncompressed. A PNG can be much smaller than its raw pixel data because its encoder represents that data efficiently. It simply has fewer ways to reduce the file than a lossy encoder, which may also simplify fine texture, color detail, or other information.",[17,114,116],{"id":115},"the-format-name-does-not-tell-the-whole-story","The format name does not tell the whole story",[10,118,119],{},"It is tempting to treat every PNG as lossless and every WebP as lossy. That can lead to incorrect conclusions because image processing often has several stages:",[121,122,123,127,130,133],"ol",{},[124,125,126],"li",{},"The application may resize the image.",[124,128,129],{},"It may reduce the number of colors or change chroma sampling.",[124,131,132],{},"It may remove metadata.",[124,134,135],{},"It encodes the resulting pixels in the selected format.",[10,137,138],{},"A PNG encoder can store its input pixels losslessly after an earlier step has reduced the color palette. The result is a valid PNG, but it is not necessarily pixel-identical to the original file. The same principle applies to resizing: lossless encoding cannot recover pixels removed before encoding.",[10,140,141,142,146],{},"TinyImage's ",[25,143,145],{"href":144},"/compress/png","PNG compressor"," may reduce the color palette while searching for a smaller output. That is useful for many web graphics, but it means you should inspect subtle gradients, shadows, and brand colors instead of assuming the result is mathematically lossless. Keep the source file if exact color values matter.",[10,148,149],{},"Metadata is separate from rendered pixels. Removing an embedded camera location, author field, thumbnail, or editing record can make a file smaller without changing what is displayed. It can also remove information you intended to keep. Check the metadata requirements of archival, legal, and publishing workflows before stripping it.",[17,151,153],{"id":152},"what-lossy-compression-changes","What lossy compression changes",[10,155,156,157,162],{},"JPEG divides image information into blocks and quantizes detail. The ",[25,158,161],{"href":159,"rel":160},"https://web.dev/learn/images/jpeg",[29],"web.dev JPEG guide"," explains why this works well for the gradual changes found in photographs and why aggressive settings expose block boundaries, ringing, or blur.",[10,164,165],{},"Common warning signs include:",[167,168,169,172,175,178,181],"ul",{},[124,170,171],{},"halos around text and high-contrast edges;",[124,173,174],{},"block patterns in smooth skies or walls;",[124,176,177],{},"smeared hair, grass, fabric, or other fine texture;",[124,179,180],{},"color bleeding around saturated edges;",[124,182,183],{},"banding where a smooth gradient becomes a set of visible steps.",[10,185,186],{},"These artifacts are content-dependent. A setting that looks clean on a portrait may damage a screenshot containing small text. This is also why a quality value should not be treated as a percentage of detail retained.",[10,188,189],{},"Lossy compression is most vulnerable to generational loss. Suppose a product photograph is exported as JPEG, uploaded to a service that recompresses it, downloaded, edited, and exported as JPEG again. Each encoder works from the already altered result rather than the original camera data. Keeping a high-quality master avoids that chain.",[17,191,193],{"id":192},"choose-by-the-job-the-image-has-to-do","Choose by the job the image has to do",[33,195,196,209],{},[36,197,198],{},[39,199,200,203,206],{},[42,201,202],{},"Use case",[42,204,205],{},"Sensible starting point",[42,207,208],{},"Reason",[52,210,211,222,233,244,255,266],{},[39,212,213,216,219],{},[57,214,215],{},"Photograph used once on a website",[57,217,218],{},"Lossy JPEG, WebP, or AVIF",[57,220,221],{},"Fine photographic detail usually tolerates perceptual compression well",[39,223,224,227,230],{},[57,225,226],{},"Screenshot with small text",[57,228,229],{},"PNG or lossless WebP",[57,231,232],{},"Sharp edges reveal lossy artifacts quickly",[39,234,235,238,241],{},[57,236,237],{},"Transparent logo or interface asset",[57,239,240],{},"PNG or a WebP/AVIF mode that preserves alpha",[57,242,243],{},"JPEG cannot store an alpha channel",[39,245,246,249,252],{},[57,247,248],{},"Working file that will be edited repeatedly",[57,250,251],{},"Original project file or a lossless master",[57,253,254],{},"Avoids compounding lossy changes between edits",[39,256,257,260,263],{},[57,258,259],{},"Downloadable archival or print source",[57,261,262],{},"A format and profile required by that workflow",[57,264,265],{},"Web delivery size is secondary to preservation and interoperability",[39,267,268,271,274],{},[57,269,270],{},"Thumbnail derived from a retained master",[57,272,273],{},"Lossy modern format",[57,275,276],{},"The derivative can be regenerated if settings change",[10,278,279],{},"For most publishing workflows, the strongest approach is not choosing one mode forever. Keep a lossless or original master, then create smaller delivery derivatives for each placement.",[17,281,283],{"id":282},"a-repeatable-comparison-workflow","A repeatable comparison workflow",[121,285,286,293,299,305,311,317,323],{},[124,287,288,292],{},[289,290,291],"strong",{},"Preserve the source."," Work from a copy and keep the original outside the output folder.",[124,294,295,298],{},[289,296,297],{},"Set final dimensions first."," Comparing an oversized original with a correctly sized derivative mixes resizing and compression into one decision.",[124,300,301,304],{},[289,302,303],{},"Choose a format for the content."," Start with PNG or lossless WebP for sharp graphics, and JPEG, WebP, or AVIF for photographs.",[124,306,307,310],{},[289,308,309],{},"Inspect at the intended display size."," This is the view the audience will see.",[124,312,313,316],{},[289,314,315],{},"Check vulnerable details at 100%."," Look at text, facial features, high-contrast borders, gradients, and transparency.",[124,318,319,322],{},[289,320,321],{},"Compare bytes as well as appearance."," A conversion is not useful if it creates a larger file without another benefit.",[124,324,325,328],{},[289,326,327],{},"Record the chosen format and settings."," Repeatable rules are easier to maintain than manually guessing for every upload.",[10,330,331,332,336,337,341,342,346,347,351],{},"You can run that process with the general ",[25,333,335],{"href":334},"/compress","image compressor",", or start with the format-specific ",[25,338,340],{"href":339},"/compress/jpeg","JPEG compressor"," and ",[25,343,345],{"href":344},"/compress/webp","WebP compressor",". For practical starting values and a result-comparison workflow, see the guide to ",[25,348,350],{"href":349},"/blog/best-image-compression-settings","image compression settings",".",[17,353,355],{"id":354},"common-questions","Common questions",[357,358,360],"h3",{"id":359},"is-png-always-lossless","Is PNG always lossless?",[10,362,363],{},"PNG's encoding is lossless, but an application can resize the image or reduce its palette before writing the PNG. Check whether a tool promises pixel-identical optimization or uses visual optimization to reach a smaller result.",[357,365,367],{"id":366},"is-webp-lossy-or-lossless","Is WebP lossy or lossless?",[10,369,370],{},"It can be either. WebP also supports transparency and animation, so the extension alone does not reveal which mode or settings produced a particular file.",[357,372,374],{"id":373},"can-i-make-a-jpeg-lossless-by-converting-it-to-png","Can I make a JPEG lossless by converting it to PNG?",[10,376,377],{},"No. PNG will preserve the pixels it receives, but it cannot reconstruct detail discarded by the earlier JPEG encode. The new PNG may also be larger.",[357,379,381],{"id":380},"should-every-website-image-use-lossy-compression","Should every website image use lossy compression?",[10,383,384],{},"No. Lossy delivery is often suitable for photographs, while screenshots, diagrams, small text, and precise graphic assets may need lossless output. Select by content and inspect the result.",[357,386,388],{"id":387},"can-compressed-detail-be-restored-later","Can compressed detail be restored later?",[10,390,391],{},"Not reliably. Sharpening or enhancement may change the appearance, but it does not recover the original discarded data. Retain the source or a high-quality master.",{"title":393,"searchDepth":394,"depth":394,"links":395},"",2,[396,397,398,399,400,401],{"id":19,"depth":394,"text":20},{"id":115,"depth":394,"text":116},{"id":152,"depth":394,"text":153},{"id":192,"depth":394,"text":193},{"id":282,"depth":394,"text":283},{"id":354,"depth":394,"text":355,"children":402},[403,405,406,407,408],{"id":359,"depth":404,"text":360},3,{"id":366,"depth":404,"text":367},{"id":373,"depth":404,"text":374},{"id":380,"depth":404,"text":381},{"id":387,"depth":404,"text":388},"Compression","2026-09-06","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.","md",{},true,"/blog/lossy-vs-lossless-image-compression","7",[418,419,420],"compress-images-without-losing-quality","png-vs-jpg","best-image-compression-settings",{"title":5,"description":411},"Compare lossy and lossless image compression, including quality, file size, common formats, generational loss, and practical use cases.","Lossy vs Lossless Image Compression: Key Differences","blog/lossy-vs-lossless-image-compression",{"title":426,"description":427,"label":428,"to":334},"Compare compression results","Compress a copy of your image, then compare the output with the original at the size where it will actually be used.","Open the image compressor","lossy-vs-lossless","rH1u3GfEo3PIcWfjcKV5CoIDG0mfP-OVWhR4kQ4SjVM",[432,437,444,449,455,456,460,465],{"path":349,"title":433,"description":434,"category":409,"date":410,"readingMinutes":435,"visual":436},"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.","8","compression-settings",{"path":438,"title":439,"description":440,"category":441,"date":410,"readingMinutes":442,"visual":443},"/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":445,"title":446,"description":447,"category":409,"date":410,"readingMinutes":435,"visual":448},"/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":450,"title":451,"description":452,"category":453,"date":410,"readingMinutes":435,"visual":454},"/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.","Web Performance","image-performance",{"path":415,"title":5,"description":411,"category":409,"date":410,"readingMinutes":416,"visual":429},{"path":457,"title":458,"description":459,"category":441,"date":410,"readingMinutes":435,"visual":419},"/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.",{"path":461,"title":462,"description":463,"category":453,"date":410,"readingMinutes":435,"visual":464},"/blog/reduce-image-file-size-for-web","How to Reduce Image File Size for the Web","A practical workflow for reducing web image size through correct dimensions, format selection, compression, metadata review, and responsive delivery.","reduce-file-size",{"path":466,"title":467,"description":468,"category":441,"date":410,"readingMinutes":442,"visual":469},"/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",1790175605555]