[{"data":1,"prerenderedAt":587},["ShallowReactive",2],{"h1518005927":3,"h3632632924":373,"h2084763879":575},{"id":4,"title":5,"body":6,"description":28,"extension":364,"meta":365,"navigation":368,"path":369,"seo":370,"stem":371,"__hash__":372},"docs\u002Fen\u002Ftips\u002F2026\u002F10\u002F08\u002Freducing-image-sizes-with-webp.md","How WebP helped us reduce image sizes on the LINE Developers site",{"type":7,"value":8,"toc":330},"minimark",[9],[10,11,12,20,25,29,34,44,58,62,65,68,90,94,120,123,149,160,164,167,174,179,198,214,218,229,240,244,247,258,269,272,276,279,282,285,289,302,321,324],"Tips",{},[13,14,17],"h1",{"id":15,"class":16},"","!mb-4",[18,19],"page-title",{},[21,22],"display-date",{"date":23,"class":24},"2026\u002F10\u002F08","!mb-20",[26,27,28],"p",{},"Hi, I'm Roman, the lead engineer of the LINE Developers site. Today we'll look at image file sizes and WebP conversion. Documentation needs screenshots and diagrams, but those images take up storage space and add to the data readers download. To reduce both, we recently converted many of our PNG, JPEG, and GIF images to WebP, saving over 200 MB in the process. Here's what WebP is, what we saved, and what to consider when using it on your own site.",[30,31,33],"h2",{"id":32},"about-webp","What is WebP?",[26,35,36,43],{},[37,38,42],"a",{"href":39,"rel":40},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp",[41],"nofollow","WebP"," is an image format introduced by Google in 2010. It grew out of the VP8 video codec and supports both lossy compression, which discards some image detail to reduce file size, and lossless compression, which preserves the original detail. WebP also supports transparency and animation. This makes it useful for photos, screenshots, diagrams, and animated images, though the best settings depend on the image.",[26,45,46,47,52,53,57],{},"According to ",[37,48,51],{"href":49,"rel":50},"https:\u002F\u002Fweb-platform-dx.github.io\u002Fweb-features-explorer\u002Ffeatures\u002Fwebp\u002F",[41],"WebDX's WebP compatibility data",", Safari 14 added WebP support in September 2020, and WebP has been ",[54,55,56],"strong",{},"Baseline Widely Available"," since March 16, 2023. With broad support across current browsers, WebP is a safe choice for website images today.",[30,59,61],{"id":60},"image-size-savings","What changed on this site?",[26,63,64],{},"We found that the LINE Developers site had accumulated images that were several hundred KB each, with some exceeding 1 MB. Between August and September 2026, we converted many of these large images to WebP.",[26,66,67],{},"Here are the results:",[69,70,71,78,84],"ul",{},[72,73,74,77],"li",{},[54,75,76],{},"Over 200 MB saved"," by converting over 700 images",[72,79,80,83],{},[54,81,82],{},"About 78% smaller per file on average",", calculated from the individual size reductions",[72,85,86,89],{},[54,87,88],{},"471 KB less image data per affected page at the median"," for pages using at least one converted image",[30,91,93],{"id":92},"conversion-methods","How we choose conversion settings",[26,95,96,97,105,106,111,112,119],{},"To convert still images to WebP, we use ",[37,98,101],{"href":99,"rel":100},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp\u002Fdocs\u002Fcwebp",[41],[102,103,104],"code",{},"cwebp",", a tool from the open-source ",[37,107,110],{"href":108,"rel":109},"https:\u002F\u002Fgithub.com\u002Fwebmproject\u002Flibwebp",[41],"libwebp project",". It converts images such as PNGs and JPEGs to WebP. For animated GIFs, we use ",[37,113,116],{"href":114,"rel":115},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp\u002Fdocs\u002Fgif2webp",[41],[102,117,118],{},"gif2webp"," from the same project to produce animated WebP files.",[26,121,122],{},"We follow these guidelines when converting images:",[69,124,125,132,139,146],{},[72,126,127,128,131],{},"For screenshots and photos, we use ",[102,129,130],{},"cwebp -q 80 -m 6",", a lossy encoding.",[72,133,134,135,138],{},"For diagrams with fine text or lines, we use ",[102,136,137],{},"cwebp -lossless -m 6"," to keep edges sharp.",[72,140,141,142,145],{},"For animated GIFs, we try ",[102,143,144],{},"gif2webp -min_size -m 6"," and check that the result still animates.",[72,147,148],{},"We keep the original resolution (more on that in the screenshot example below).",[26,150,151,152,155,156,159],{},"These settings are guidelines, not strict rules. If ",[102,153,154],{},"-q 80"," causes too much loss of detail, we can use ",[102,157,158],{},"-q 90"," or another value instead. If converting an image to WebP does not reduce its file size, we can keep the original format.",[30,161,163],{"id":162},"screenshot-example","A screenshot example",[26,165,166],{},"Suppose you want to add a screenshot of the LINE Developers home page to your documentation. We'll compare the screenshot at its original pixel dimensions with a smaller version to show how WebP conversion and downscaling affect file size and image quality.",[26,168,169,170,173],{},"The original screenshot was taken on macOS. The PNG measured 1736 × 1174 pixels, and its file size was ",[54,171,172],{},"1.34 MB",". That was far larger than acceptable for a documentation page image.",[175,176,178],"h3",{"id":177},"converting-at-original-resolution","Convert to WebP at the original resolution",[26,180,181,182,185,186,189,190,193,194,197],{},"I converted the PNG with ",[102,183,184],{},"cwebp -q 90 -m 6",". I chose quality 90 to keep the small text in the browser window clear. The WebP kept the original dimensions and shrank to ",[54,187,188],{},"115 KB",", saving about ",[54,191,192],{},"1.23 MB",", or ",[54,195,196],{},"91%",", with no noticeable loss of quality at its displayed size.",[26,199,200,208],{},[201,202],"img",{"alt":203,"className":204,"src":207},"LINE Developers screenshot at its original resolution",[205,206],"border","mb-2-important","\u002Fmedia\u002Ftips\u002F2026\u002Fwebp-sample-screenshot.webp",[209,210,213],"span",{"className":211},[212],"font-semibold","Screenshot converted to WebP at its original resolution: 1736 × 1174 pixels, 115 KB",[175,215,217],{"id":216},"reducing-resolution","Try reducing the resolution",[26,219,220,221,224,225,228],{},"As the 1736-pixel-wide image is wider than this page needs for display, I investigated whether reducing its dimensions would help. I made an 800 × 541-pixel version with the same encoder settings. The resized WebP is ",[54,222,223],{},"34 KB","; that is ",[54,226,227],{},"81 KB smaller"," than the full-resolution version.",[26,230,231,236],{},[201,232],{"alt":233,"className":234,"src":235},"The same screenshot reduced to 800 pixels wide",[205,206],"\u002Fmedia\u002Ftips\u002F2026\u002Fwebp-sample-screenshot-800.webp",[209,237,239],{"className":238},[212],"Reduced resolution WebP: 800 × 541 pixels, 34 KB",[175,241,243],{"id":242},"comparing-sharpness","Compare sharpness up close",[26,245,246],{},"When enlarged, the smaller image looks noticeably softer. The close-ups below show the same upper-left corner of the browser window at the same size; the crop from the 800-pixel version has been enlarged to match the original. Compare the window controls, address bar, and site title:",[26,248,249,254],{},[201,250],{"alt":251,"className":252,"src":253},"Upper-left browser window with sharp controls and text from the original resolution WebP",[205,206],"\u002Fmedia\u002Ftips\u002F2026\u002Fwebp-sample-screenshot-detail-full.webp",[209,255,257],{"className":256},[212],"Original resolution",[26,259,260,265],{},[201,261],{"alt":262,"className":263,"src":264},"The same upper-left browser window with softer controls and text from the enlarged 800-pixel WebP",[205,206],"\u002Fmedia\u002Ftips\u002F2026\u002Fwebp-sample-screenshot-detail-800.webp",[209,266,268],{"className":267},[212],"800-pixel version, enlarged",[26,270,271],{},"The close-ups show why we decided to generally keep the original dimensions of an image: WebP conversion delivered most of the savings. While resizing saved another 81 KB, there was a clear cost to image sharpness, so we recommend against resizing images.",[30,273,275],{"id":274},"keeping-new-images-small","How we keep new images small",[26,277,278],{},"To make image conversion easier in our everyday documentation work, we added a repository-specific image conversion skill for AI coding agents. When writing documentation, we can add screenshots as PNG or JPEG, then run the skill before submitting the change. It updates the image files and their references together.",[26,280,281],{},"The skill finds images added or changed on the current branch and, by default, selects those larger than 300 KB. It applies the settings described above, compares each WebP file with its source, and keeps the original format if conversion does not reduce the file size. It then updates references in the documentation, checks that the output is really WebP, and looks for stale image paths. It asks us before removing the original files.",[26,283,284],{},"We also added a CI check that flags large image files in pull requests. When it flags an image, we can run the conversion skill and reduce its file size before publication.",[30,286,288],{"id":287},"tips-for-your-images","Tips for your own images",[26,290,291,292,294,295,297,298,301],{},"If your site has image-heavy pages, start by converting a few representative images. For photos and screenshots, we recommend ",[102,293,104],{}," with lossy compression. Try quality settings from ",[102,296,154],{}," to ",[102,299,300],{},"-q 95",", then keep these points in mind as you compare the results:",[303,304,305,308,315,318],"ol",{},[72,306,307],{},"Inspect each result at its displayed size, especially small text in screenshots.",[72,309,310,311,314],{},"Try lossless compression with ",[102,312,313],{},"cwebp -lossless"," when small text, lines, or diagrams must stay crisp.",[72,316,317],{},"Compare file sizes before replacing an image. Keep the original format if it is smaller or looks better.",[72,319,320],{},"Update image references when you change file extensions, and check the page in a browser.",[26,322,323],{},"Smaller image files require less storage and can reduce the data readers need to download. When those images load, this should improve page load performance, especially on slower connections.",[325,326],"tags",{"tags":327,"lang":328,"section":329},"docs, line-developers-site","en","tips",{"title":15,"searchDepth":331,"depth":332,"links":333},4,5,[334,338,341,344,358,361],{"id":335,"depth":336,"text":337},"what-is-webp-about-webp",2,"What is WebP? {#about-webp}",{"id":339,"depth":336,"text":340},"what-changed-on-this-site-image-size-savings","What changed on this site? {#image-size-savings}",{"id":342,"depth":336,"text":343},"how-we-choose-conversion-settings-conversion-methods","How we choose conversion settings {#conversion-methods}",{"id":345,"depth":336,"text":346,"children":347},"a-screenshot-example-screenshot-example","A screenshot example {#screenshot-example}",[348,352,355],{"id":349,"depth":350,"text":351},"convert-to-webp-at-the-original-resolution-converting-at-original-resolution",3,"Convert to WebP at the original resolution {#converting-at-original-resolution}",{"id":353,"depth":350,"text":354},"try-reducing-the-resolution-reducing-resolution","Try reducing the resolution {#reducing-resolution}",{"id":356,"depth":350,"text":357},"compare-sharpness-up-close-comparing-sharpness","Compare sharpness up close {#comparing-sharpness}",{"id":359,"depth":336,"text":360},"how-we-keep-new-images-small-keeping-new-images-small","How we keep new images small {#keeping-new-images-small}",{"id":362,"depth":336,"text":363},"tips-for-your-own-images-tips-for-your-images","Tips for your own images {#tips-for-your-images}","md",{"date":366,"tags":327,"locale":328,"sidebar":367},"2026-10-08 00:00 UTC",false,true,"\u002Fen\u002Ftips\u002F2026\u002F10\u002F08\u002Freducing-image-sizes-with-webp",{"title":5,"description":28},"en\u002Ftips\u002F2026\u002F10\u002F08\u002Freducing-image-sizes-with-webp","7wYaL85mJrdxoWDUXcOkOdzB5PXnRMtBPIlgUyscm2Q",{"id":4,"title":5,"body":374,"description":28,"extension":364,"meta":573,"navigation":368,"path":369,"seo":574,"stem":371,"__hash__":372},{"type":7,"value":375,"toc":561},[376],[10,377,378,382,384,386,388,393,400,402,404,406,420,422,437,439,455,461,463,465,469,471,481,489,491,497,505,507,509,517,525,527,529,531,533,535,537,545,557,559],{},[13,379,380],{"id":15,"class":16},[18,381],{},[21,383],{"date":23,"class":24},[26,385,28],{},[30,387,33],{"id":32},[26,389,390,43],{},[37,391,42],{"href":39,"rel":392},[41],[26,394,46,395,52,398,57],{},[37,396,51],{"href":49,"rel":397},[41],[54,399,56],{},[30,401,61],{"id":60},[26,403,64],{},[26,405,67],{},[69,407,408,412,416],{},[72,409,410,77],{},[54,411,76],{},[72,413,414,83],{},[54,415,82],{},[72,417,418,89],{},[54,419,88],{},[30,421,93],{"id":92},[26,423,96,424,105,429,111,432,119],{},[37,425,427],{"href":99,"rel":426},[41],[102,428,104],{},[37,430,110],{"href":108,"rel":431},[41],[37,433,435],{"href":114,"rel":434},[41],[102,436,118],{},[26,438,122],{},[69,440,441,445,449,453],{},[72,442,127,443,131],{},[102,444,130],{},[72,446,134,447,138],{},[102,448,137],{},[72,450,141,451,145],{},[102,452,144],{},[72,454,148],{},[26,456,151,457,155,459,159],{},[102,458,154],{},[102,460,158],{},[30,462,163],{"id":162},[26,464,166],{},[26,466,169,467,173],{},[54,468,172],{},[175,470,178],{"id":177},[26,472,181,473,185,475,189,477,193,479,197],{},[102,474,184],{},[54,476,188],{},[54,478,192],{},[54,480,196],{},[26,482,483,486],{},[201,484],{"alt":203,"className":485,"src":207},[205,206],[209,487,213],{"className":488},[212],[175,490,217],{"id":216},[26,492,220,493,224,495,228],{},[54,494,223],{},[54,496,227],{},[26,498,499,502],{},[201,500],{"alt":233,"className":501,"src":235},[205,206],[209,503,239],{"className":504},[212],[175,506,243],{"id":242},[26,508,246],{},[26,510,511,514],{},[201,512],{"alt":251,"className":513,"src":253},[205,206],[209,515,257],{"className":516},[212],[26,518,519,522],{},[201,520],{"alt":262,"className":521,"src":264},[205,206],[209,523,268],{"className":524},[212],[26,526,271],{},[30,528,275],{"id":274},[26,530,278],{},[26,532,281],{},[26,534,284],{},[30,536,288],{"id":287},[26,538,291,539,294,541,297,543,301],{},[102,540,104],{},[102,542,154],{},[102,544,300],{},[303,546,547,549,553,555],{},[72,548,307],{},[72,550,310,551,314],{},[102,552,313],{},[72,554,317],{},[72,556,320],{},[26,558,323],{},[325,560],{"tags":327,"lang":328,"section":329},{"title":15,"searchDepth":331,"depth":332,"links":562},[563,564,565,566,571,572],{"id":335,"depth":336,"text":337},{"id":339,"depth":336,"text":340},{"id":342,"depth":336,"text":343},{"id":345,"depth":336,"text":346,"children":567},[568,569,570],{"id":349,"depth":350,"text":351},{"id":353,"depth":350,"text":354},{"id":356,"depth":350,"text":357},{"id":359,"depth":336,"text":360},{"id":362,"depth":336,"text":363},{"date":366,"tags":327,"locale":328,"sidebar":367},{"title":5,"description":28},{"toc":576,"fullToc":576},[577,578,579,580,585,586],{"id":32,"depth":336,"text":33},{"id":60,"depth":336,"text":61},{"id":92,"depth":336,"text":93},{"id":162,"depth":336,"text":163,"children":581},[582,583,584],{"id":177,"depth":350,"text":178},{"id":216,"depth":350,"text":217},{"id":242,"depth":350,"text":243},{"id":274,"depth":336,"text":275},{"id":287,"depth":336,"text":288},1791870924192]