[{"data":1,"prerenderedAt":451},["ShallowReactive",2],{"blog-post-compress-images-without-losing-quality":3,"blog-post-summaries":410},{"id":4,"title":5,"body":6,"category":387,"date":388,"description":389,"extension":390,"meta":391,"navigation":392,"path":393,"readingMinutes":394,"related":395,"seo":399,"seoDescription":400,"seoTitle":401,"stem":402,"tool":403,"updated":388,"visual":408,"__hash__":409},"blog/blog/compress-images-without-losing-quality.md","How to Compress Images Without Losing Quality",{"type":7,"value":8,"toc":364},"minimark",[9,13,24,29,32,67,70,148,152,157,160,164,167,190,194,197,220,224,227,236,240,243,260,263,267,276,280,283,286,290,293,296,300,332,336,340,343,347,350,354,357,361],[10,11,12],"p",{},"Compressing an image “without losing quality” can mean one of two things. You may need the decoded pixels to remain exactly the same, which calls for lossless compression. Or you may need a much smaller file that looks unchanged at its intended display size, which usually means careful lossy compression. Those are different goals, and choosing the right one is the first step.",[10,14,15,16,23],{},"For screenshots, diagrams, logos, or files that will be edited again, keep a lossless master and use PNG or another suitable lossless format. For photographs delivered on a website, a well-sized JPG, WebP, or AVIF can often discard data that viewers will not notice. The ",[17,18,22],"a",{"href":19,"rel":20},"https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types",[21],"nofollow","MDN image format guide"," explains which common formats support lossy compression, lossless compression, transparency, and animation.",[25,26,28],"h2",{"id":27},"decide-what-quality-must-preserve","Decide what “quality” must preserve",[10,30,31],{},"Quality is not a single setting. Before touching a slider, identify what the finished image must retain:",[33,34,35,43,49,55,61],"ul",{},[36,37,38,42],"li",{},[39,40,41],"strong",{},"Pixel accuracy:"," required for test fixtures, archival masters, technical imagery, and assets that will be compared pixel by pixel.",[36,44,45,48],{},[39,46,47],{},"Fine detail:"," important in hair, fabric, foliage, product texture, and low-contrast areas.",[36,50,51,54],{},[39,52,53],{},"Sharp edges and text:"," important in screenshots, interface captures, charts, and logos.",[36,56,57,60],{},[39,58,59],{},"Transparency:"," required when the image must sit cleanly on different backgrounds.",[36,62,63,66],{},[39,64,65],{},"Dimensions:"," important when the file must fill a particular layout or support high-density displays.",[10,68,69],{},"This distinction prevents a common mistake: selecting a high quality value while leaving an image far larger than it will ever be displayed. Excess dimensions can cost more bytes than a modest encoder adjustment saves.",[71,72,73,89],"table",{},[74,75,76],"thead",{},[77,78,79,83,86],"tr",{},[80,81,82],"th",{},"Image job",[80,84,85],{},"What must be preserved",[80,87,88],{},"Sensible starting point",[90,91,92,104,115,126,137],"tbody",{},[77,93,94,98,101],{},[95,96,97],"td",{},"Photograph on a web page",[95,99,100],{},"Natural detail at the rendered size",[95,102,103],{},"Resize to the largest required display size, then test JPG, WebP, or AVIF",[77,105,106,109,112],{},[95,107,108],{},"Screenshot with text",[95,110,111],{},"Crisp edges and readable type",[95,113,114],{},"Keep PNG; try lossless optimization first",[77,116,117,120,123],{},[95,118,119],{},"Logo with transparency",[95,121,122],{},"Clean edges and alpha transparency",[95,124,125],{},"Keep PNG if no vector source is available",[77,127,128,131,134],{},[95,129,130],{},"Image for repeated editing",[95,132,133],{},"Maximum source information",[95,135,136],{},"Preserve the original master; export separate delivery copies",[77,138,139,142,145],{},[95,140,141],{},"Email or form upload",[95,143,144],{},"Legibility within a file-size limit",[95,146,147],{},"Resize first, then lower lossy quality in small steps",[25,149,151],{"id":150},"a-reliable-compression-workflow","A reliable compression workflow",[153,154,156],"h3",{"id":155},"_1-preserve-the-original","1. Preserve the original",[10,158,159],{},"Work from a copy. Lossy encoding removes information, and saving the result again can compound artifacts. An untouched source also lets you produce a different size or format later without starting from an already compressed derivative.",[153,161,163],{"id":162},"_2-set-dimensions-for-the-real-use-case","2. Set dimensions for the real use case",[10,165,166],{},"If a photo is 4,000 × 3,000 pixels but will be displayed at no more than 1,200 × 900, the source contains 12 million pixels while the delivery image needs about 1.08 million. Resizing removes work the browser would otherwise do and avoids transferring pixels the layout never shows.",[10,168,169,170,174,175,180,181,185,186,189],{},"Use the ",[17,171,173],{"href":172},"/tools/resize-image","TinyImage resize tool"," when you know the target width. For responsive sites, create enough source sizes for the browser to choose an appropriate file rather than sending the largest version to every screen. The ",[17,176,179],{"href":177,"rel":178},"https://web.dev/learn/images/descriptive",[21],"web.dev guide to responsive image syntax"," shows how ",[182,183,184],"code",{},"srcset"," and ",[182,187,188],{},"sizes"," describe those alternatives.",[153,191,193],{"id":192},"_3-match-the-format-to-the-content","3. Match the format to the content",[10,195,196],{},"PNG is a strong fit for flat graphics, screenshots, and transparency. JPG remains practical for photographs and broad software compatibility. WebP and AVIF offer modern delivery options, but the best result depends on the source and encoder—not simply the file extension.",[10,198,199,200,204,205,209,210,214,215,219],{},"If exact pixels matter, preserve the source and use a tool documented to perform only lossless optimization. TinyImage's ",[17,201,203],{"href":202},"/compress/png","PNG compressor"," may test reduced-color palette candidates to find a smaller web image, so inspect gradients, transparency, and exact brand colors rather than treating its output as proof of pixel identity. For a photo, compare ",[17,206,208],{"href":207},"/compress/jpeg","JPG compression",", ",[17,211,213],{"href":212},"/compress/webp","WebP compression",", and ",[17,216,218],{"href":217},"/compress/avif","AVIF compression"," using the same source dimensions. Do not compare unrelated images or different crops.",[153,221,223],{"id":222},"_4-change-one-setting-at-a-time","4. Change one setting at a time",[10,225,226],{},"Start near the higher-quality end, export once, and inspect the result. Then lower quality in small steps until file size improves without damaging the details that matter. Quality numbers are encoder-specific: a value of 80 in one codec or application is not guaranteed to match 80 in another.",[10,228,229,230,235],{},"Lossless formats work differently. The ",[17,231,234],{"href":232,"rel":233},"https://www.w3.org/TR/png-3/",[21],"PNG specification"," defines PNG encoding as lossless, so a conforming decode reproduces the samples that were given to the encoder. An earlier resize or palette-reduction step can still change those samples. A workflow is only pixel-preserving when every processing step—not just the final file format—is lossless.",[153,237,239],{"id":238},"_5-inspect-at-the-intended-sizeand-at-100","5. Inspect at the intended size—and at 100%",[10,241,242],{},"Check the whole image at its final display size first. Then zoom to 100% around the areas most likely to reveal damage:",[33,244,245,248,251,254,257],{},[36,246,247],{},"edges around text or product silhouettes;",[36,249,250],{},"smooth skies and gradients, where banding can appear;",[36,252,253],{},"faces, hair, leaves, or fabric, where detail can smear;",[36,255,256],{},"dark areas, where block artifacts may be easy to miss;",[36,258,259],{},"transparent edges, where halos can appear against a new background.",[10,261,262],{},"The final display check answers “Will a viewer notice?” The 100% check catches defects that may become visible on a larger screen or after a later crop.",[153,264,266],{"id":265},"_6-measure-the-delivered-page-not-only-the-file","6. Measure the delivered page, not only the file",[10,268,269,270,275],{},"Compression is one part of image performance. A browser may still download an unnecessarily large source, delay an important image, or shift the layout if width and height are missing. The ",[17,271,274],{"href":272,"rel":273},"https://web.dev/learn/performance/image-performance",[21],"web.dev image performance guide"," covers transfer size, responsive delivery, lazy loading, and the effect images can have on page loading.",[25,277,279],{"id":278},"when-lossless-compression-is-the-right-answer","When lossless compression is the right answer",[10,281,282],{},"Use lossless compression when a changed pixel would be a defect rather than an acceptable tradeoff. Typical examples include a UI screenshot used in documentation, a diagram with small labels, a source asset moving between editors, or an image used for automated visual comparison.",[10,284,285],{},"Lossless does not guarantee a tiny file. A photo contains many subtle color changes, so a lossless PNG version can be much larger than a carefully encoded JPG or WebP. In that case, keep the lossless master privately and publish a separate lossy derivative.",[25,287,289],{"id":288},"when-visually-unchanged-is-enough","When “visually unchanged” is enough",[10,291,292],{},"For website photographs, marketplace images, social posts, and email attachments, viewers usually care about the appearance at a particular size—not whether every source pixel survived. A controlled lossy export can be the better delivery file.",[10,294,295],{},"The important word is controlled. Use the original once, resize deliberately, choose a format for the content, and inspect the output. Avoid the cycle of downloading a compressed image, editing it, and compressing it again.",[25,297,299],{"id":298},"common-reasons-compressed-images-look-worse","Common reasons compressed images look worse",[33,301,302,308,314,320,326],{},[36,303,304,307],{},[39,305,306],{},"The source was already heavily compressed."," Another lossy pass exposes existing block and ringing artifacts.",[36,309,310,313],{},[39,311,312],{},"Dimensions were reduced too far."," No quality setting can restore pixels removed during resizing.",[36,315,316,319],{},[39,317,318],{},"The wrong format was chosen."," JPG can blur hard text edges, while PNG can be inefficient for photographs.",[36,321,322,325],{},[39,323,324],{},"Transparency was flattened unexpectedly."," JPG has no alpha channel, so transparent areas need a chosen background.",[36,327,328,331],{},[39,329,330],{},"Only the file size was checked."," A small result is not useful if a product label or chart text is unreadable.",[25,333,335],{"id":334},"frequently-asked-questions","Frequently asked questions",[153,337,339],{"id":338},"can-an-image-become-smaller-with-absolutely-no-quality-loss","Can an image become smaller with absolutely no quality loss?",[10,341,342],{},"Yes, when a lossless encoder finds a more efficient representation or removes nonessential metadata. The amount saved depends on the source. If the pixels must remain identical, use a verified lossless workflow rather than a “high quality” lossy preset.",[153,344,346],{"id":345},"does-a-100-quality-setting-mean-lossless","Does a 100% quality setting mean lossless?",[10,348,349],{},"No. A quality slider belongs to a particular encoder and does not change a lossy format into a lossless one. It may also produce a much larger file for little visible improvement.",[153,351,353],{"id":352},"should-i-resize-or-compress-first","Should I resize or compress first?",[10,355,356],{},"Start from the original, resize to the required delivery dimensions, and then encode or compress that resized version. This avoids applying lossy compression twice and lets the encoder work on the pixels you will actually deliver.",[153,358,360],{"id":359},"why-should-i-keep-both-the-original-and-compressed-image","Why should I keep both the original and compressed image?",[10,362,363],{},"Keep the original when you may edit, crop, reformat, or export at another size later. Treat compressed web files as delivery copies, not replacement masters.",{"title":365,"searchDepth":366,"depth":366,"links":367},"",2,[368,369,378,379,380,381],{"id":27,"depth":366,"text":28},{"id":150,"depth":366,"text":151,"children":370},[371,373,374,375,376,377],{"id":155,"depth":372,"text":156},3,{"id":162,"depth":372,"text":163},{"id":192,"depth":372,"text":193},{"id":222,"depth":372,"text":223},{"id":238,"depth":372,"text":239},{"id":265,"depth":372,"text":266},{"id":278,"depth":366,"text":279},{"id":288,"depth":366,"text":289},{"id":298,"depth":366,"text":299},{"id":334,"depth":366,"text":335,"children":382},[383,384,385,386],{"id":338,"depth":372,"text":339},{"id":345,"depth":372,"text":346},{"id":352,"depth":372,"text":353},{"id":359,"depth":372,"text":360},"Compression","2026-09-06","A practical workflow for making images smaller while protecting the detail, dimensions, and transparency that matter.","md",{},true,"/blog/compress-images-without-losing-quality","8",[396,397,398],"lossy-vs-lossless-image-compression","reduce-image-file-size-for-web","best-image-compression-settings",{"title":5,"description":389},"Learn how to reduce image file size without visible quality loss by choosing the right dimensions, format, and compression settings.","How to Compress Images Without Losing Quality | TinyImage","blog/compress-images-without-losing-quality",{"title":404,"description":405,"label":406,"to":407},"Compress an image","Compare the original and optimized result, then download the version that fits your needs.","Open the image compressor","/compress","compress-quality","LIUUcgdK5nUkrassri-WOXHdI4I8O1ZgvsOd0n5TsZM",[411,416,423,424,430,436,441,446],{"path":412,"title":413,"description":414,"category":387,"date":388,"readingMinutes":394,"visual":415},"/blog/best-image-compression-settings","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-settings",{"path":417,"title":418,"description":419,"category":420,"date":388,"readingMinutes":421,"visual":422},"/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":393,"title":5,"description":389,"category":387,"date":388,"readingMinutes":394,"visual":408},{"path":425,"title":426,"description":427,"category":428,"date":388,"readingMinutes":394,"visual":429},"/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":431,"title":432,"description":433,"category":387,"date":388,"readingMinutes":434,"visual":435},"/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":437,"title":438,"description":439,"category":420,"date":388,"readingMinutes":394,"visual":440},"/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":442,"title":443,"description":444,"category":428,"date":388,"readingMinutes":394,"visual":445},"/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":447,"title":448,"description":449,"category":420,"date":388,"readingMinutes":421,"visual":450},"/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",1790175604694]