[{"data":1,"prerenderedAt":102},["ShallowReactive",2],{"\u002Fdocs\u002Fhow-image-compression-works":3,"\u002Fdocs\u002Fhow-image-compression-works-adjacent":93},{"id":4,"title":5,"body":6,"category":82,"description":83,"extension":84,"eyebrow":85,"meta":86,"navigation":87,"path":88,"published":89,"seo":90,"stem":91,"__hash__":92},"docs\u002Fdocs\u002Fhow-image-compression-works.md","How image compression works",{"type":7,"value":8,"toc":74},"minimark",[9,13,18,21,30,33,40,44,47,51,54,58,61],[10,11,12],"p",{},"Image compression stores the same picture with fewer bytes, but the method depends on the format and the result you need. It helps to separate three decisions: what pixels the output contains, how those pixels are encoded, and which metadata remains.",[14,15,17],"h2",{"id":16},"lossless-and-lossy-encoding","Lossless and lossy encoding",[10,19,20],{},"Lossless encoding represents pixel information without intentionally discarding it. PNG is commonly used for screenshots, diagrams, and transparency, although a lossless re-encode is not guaranteed to make every PNG smaller.",[10,22,23,24,29],{},"Lossy encoding removes information that an encoder predicts will be less noticeable. JPEG and WebP expose encoding quality controls; PNG quality in this tool controls color reduction instead. PNG color reduction is lossy and can change semi-transparent edges. A value such as 80 is not a universal visual measurement. Different encoders and formats can produce different sizes and artifacts at the same number. To compare settings on your own photo, use the ",[25,26,28],"a",{"href":27},"\u002Fimage-compressor\u002F","image compressor",", keep the format and dimensions unchanged, and inspect the downloaded copies at the same display size.",[10,31,32],{},"The results below were produced with the email preset, which uses Compress mode at quality 78. Each result keeps its original dimensions, so any size change comes from encoding rather than resizing. Compare the actual file sizes and inspect the downloads before deciding whether that setting suits your images.",[10,34,35],{},[36,37],"img",{"alt":38,"src":39},"JPEG and PNG compression results with original and output file sizes and unchanged dimensions","\u002Fdocs\u002Fimage\u002F2026\u002Femail-batch-results.webp",[14,41,43],{"id":42},"dimensions-change-the-problem","Dimensions change the problem",[10,45,46],{},"Width and height determine how many pixels an image contains. A 4000 × 3000 photo contains far more information than a 1200 × 900 version. Lowering quality changes how efficiently those pixels are represented; resizing reduces the number of pixels themselves. For a strict byte limit, it is usually sensible to preserve dimensions first and resize only when quality changes are insufficient.",[14,48,50],{"id":49},"format-choices-carry-constraints","Format choices carry constraints",[10,52,53],{},"JPEG is widely compatible but has no transparency. A transparent PNG or WebP must not be silently converted to JPEG. WebP can represent opaque or transparent images, but compatibility with the destination still matters. PNG is often a good semantic fit for sharp interface graphics and transparency, even when its file is larger.",[14,55,57],{"id":56},"metadata-is-separate-from-visible-pixels","Metadata is separate from visible pixels",[10,59,60],{},"EXIF, camera details, orientation instructions, thumbnails, and color profiles can live alongside image data. Browser re-encoding can remove or change this metadata. Keep the original and treat the output as a new derivative, not an archival replacement.",[10,62,63,64,68,69,73],{},"For a strict upload cap, see ",[25,65,67],{"href":66},"\u002Fdocs\u002Fhow-to-make-an-image-under-500kb\u002F","how to make an image under 500 KB",". For visible tradeoffs, continue with ",[25,70,72],{"href":71},"\u002Fdocs\u002Fimage-quality-vs-resolution\u002F","image quality versus resolution",".",{"title":75,"searchDepth":76,"depth":76,"links":77},"",2,[78,79,80,81],{"id":16,"depth":76,"text":17},{"id":42,"depth":76,"text":43},{"id":49,"depth":76,"text":50},{"id":56,"depth":76,"text":57},"file-size","Understand lossless and lossy encoding, quality controls, dimensions, transparency, and why results vary between images.","md","Fundamentals",{},true,"\u002Fdocs\u002Fhow-image-compression-works","2026-10-08",{"title":5,"description":83},"docs\u002Fhow-image-compression-works","pt9RCxy93Z0kBMtO-kQyP4wwM2OPbpK3zA4rFD_RzqY",[94,98],{"title":95,"path":96,"stem":97,"children":-1},"How to compress an image to 500 KB or less","\u002Fdocs\u002Fhow-to-make-an-image-under-500kb","docs\u002Fhow-to-make-an-image-under-500kb",{"title":99,"path":100,"stem":101,"children":-1},"How to compress images for a job application","\u002Fdocs\u002Fcompress-images-for-job-applications","docs\u002Fcompress-images-for-job-applications",1793623265328]