[{"data":1,"prerenderedAt":106},["ShallowReactive",2],{"\u002Fdocs\u002Fpng-vs-webp":3,"\u002Fdocs\u002Fpng-vs-webp-adjacent":97},{"id":4,"title":5,"body":6,"category":86,"description":87,"extension":88,"eyebrow":89,"meta":90,"navigation":91,"path":92,"published":93,"seo":94,"stem":95,"__hash__":96},"docs\u002Fdocs\u002Fpng-vs-webp.md","PNG vs WebP: transparency, screenshots, and file size",{"type":7,"value":8,"toc":79},"minimark",[9,13,18,21,24,28,31,35,44,56,63,66],[10,11,12],"p",{},"PNG and WebP both support transparency, but they solve different practical problems. PNG is a dependable lossless format for interface graphics, diagrams, and screenshots. WebP offers lossless and lossy choices and can be smaller, but the destination must support it.",[14,15,17],"h2",{"id":16},"keep-png-when-exact-pixel-values-matter","Keep PNG when exact pixel values matter",[10,19,20],{},"PNG is useful for sharp text, flat colors, line art, and alpha edges. Lossless encoding does not intentionally discard pixel information, but re-encoding a PNG is not guaranteed to make it smaller. A photographic PNG can remain large because lossless storage must retain detailed pixels.",[10,22,23],{},"This tool uses local PNG color reduction below quality 100. Fewer colors can reduce file size but may change gradients and semi-transparent edges. Quality 100 in Resize or Convert keeps all colors from the decoded image; it does not guarantee original metadata, pixel identity across browser decoding, or a smaller file.",[14,25,27],{"id":26},"consider-webp-for-compatible-destinations","Consider WebP for compatible destinations",[10,29,30],{},"WebP can retain alpha and may reduce file size for screenshots or mixed graphics. Lossy WebP can also introduce changes around text and edges, so inspect the result carefully. Compatibility is usually strong in current browsers, but upload forms and older desktop software can have narrower rules.",[14,32,34],{"id":33},"preserve-transparency-deliberately","Preserve transparency deliberately",[10,36,37,38,43],{},"Never switch a transparent image to JPEG without choosing how transparent pixels should be flattened. The ",[39,40,42],"a",{"href":41},"\u002Fpng-to-webp\u002F","PNG to WebP converter"," preserves transparent areas, while JPG output rejects transparent input.",[10,45,46,47,51,52,55],{},"Use ",[48,49,50],"strong",{},"Select images"," to add a PNG. WebP is already selected on this converter page. The result shows the output format, dimensions, and measured file size; use ",[48,53,54],{},"Download"," to inspect the converted image at its intended display size.",[10,57,58],{},[59,60],"img",{"alt":61,"src":62},"Conversion result listing the source PNG size and the completed 640 × 360 WebP output","\u002Fdocs\u002Fimage\u002F2026\u002Fpng-to-webp-transparent-conversion.webp",[10,64,65],{},"The generated text-and-gradient input used for this result keeps transparent pixels in the downloaded WebP. Transparency alone does not guarantee unchanged text or edge quality: place your own download over both light and dark backgrounds to check it.",[10,67,68,69,73,74,78],{},"Compare actual downloads rather than format reputation. Check transparency, small text, gradients, and destination support. See ",[39,70,72],{"href":71},"\u002Fdocs\u002Freduce-screenshot-file-size\u002F","reduce screenshot file size"," for screenshot-specific advice and ",[39,75,77],{"href":76},"\u002Fdocs\u002Fwhy-compressed-images-are-still-too-large\u002F","why compressed images stay large"," when lossless PNG output is still above a limit.",{"title":80,"searchDepth":81,"depth":81,"links":82},"",2,[83,84,85],{"id":16,"depth":81,"text":17},{"id":26,"depth":81,"text":27},{"id":33,"depth":81,"text":34},"formats","Choose between PNG and WebP by checking transparency, sharp interface details, destination support, and actual output size.","md","Format comparison",{},true,"\u002Fdocs\u002Fpng-vs-webp","2026-10-08",{"title":5,"description":87},"docs\u002Fpng-vs-webp","1ZEcbguanhMEM9n_TpCLN1dRUH_hNGQlYSirEb0sctc",[98,102],{"title":99,"path":100,"stem":101,"children":-1},"How to prepare images for an LMS upload","\u002Fdocs\u002Fprepare-images-for-lms-upload","docs\u002Fprepare-images-for-lms-upload",{"title":103,"path":104,"stem":105,"children":-1},"JPEG vs WebP: which format should you use?","\u002Fdocs\u002Fjpeg-vs-webp","docs\u002Fjpeg-vs-webp",1793623265331]