Paano mag-compress ng WebP images

Para mag-compress ng WebP, i-re-encode ito sa lossy mode sa quality na mga 75, ang default sa cwebp encoder ng Google, tapos i-resize ito sa width kung saan talaga ito ipinapakita. Gamitin ang lossless o near lossless mode para sa flat na graphics at screenshots. Para sa mahigpit na size limit, hahanapin para sa iyo ng WebP compressor na tumatanggap ng target sa KB ang tamang quality.

Kadalasan mas maliit na ang WebP kaysa JPEG at PNG, pero puwede pa ring mabigat ang WebP na hindi maayos ang pagkaka-save. Mahalaga ang mode, ang quality number at ang pixel dimensions, at kadalasang dimensions ang pinakamahalaga.

Paano mag-compress ng WebP images online

Kapag may nakatakdang numero ang form o page budget, mas mabilis ang target size tool kaysa trial and error. Tumatakbo sa browser mo ang Compress WebP tool, kaya hindi ina-upload sa server ang file.

1. Buksan ang tool at magdagdag ng isa o higit pang WebP file.
2. Ilagay ang size na kailangan mo sa KB, o manu-manong i-set ang quality.
3. Simulan ang compression. Ibinababa muna nito ang quality at babawasan lang ang dimensions kung hindi kayang bumaba sa target ng quality lang.
4. I-download ang resulta at i-check ito sa 100% zoom sa pinakadetalyadong bahagi, gaya ng buhok, dahon o maliliit na text.

Kung JPEG o PNG ang panimula mo, i-convert muna ito gamit ang PNG o JPG to WebP. Hangga't maaari, mag-convert mula sa original. Tapat na pinapanatili ng WebP ang blocky artifacts ng JPEG na na-compress na, at nagbabayad ka ng bytes para i-store ang mga iyon.

Bago sa format? Saklaw ng gabay kung ano ang WebP file kung saan ito nanggaling, ano ang sinusuportahan nito at aling apps ang nakakabukas nito.

Lossy, lossless o near lossless: aling WebP mode ang dapat gamitin?

Higit sa isa ang paraan ng WebP sa pag-store ng image, at mas mahalaga ang mode kaysa sa anumang iisang quality number.

Lossy WebP

Gumagana ito tulad ng JPEG. Itinatapon nito ang detalyeng malamang hindi mo mapapansin. Gamitin ito para sa photos, product shots, hero images at anumang may malambot na gradients. Sinusuportahan din nito ang transparency, na hindi kaya ng JPEG, kaya puwedeng manatiling lossy at maliit ang produktong naka-cut out sa transparent na background.

Lossless WebP

Eksaktong napapanatili ang bawat pixel, gaya ng PNG. Gamitin ito para sa logos, icons, diagrams at screenshots na may matalas na text. Kadalasang mas maliit ito kaysa parehong image na naka-save bilang PNG.

Near lossless WebP

Gitnang option sa encoder ng Google. Bahagya nitong ina-adjust ang pixel values para mas maayos itong ma-pack ng lossless encoder, nang halos walang nakikitang epekto. Bagay ito sa screenshots at illustrations kung saan pinapalabo ng lossy mode ang gilid pero masyado pang malaki ang lossless.

Hindi sigurado kung aling mode ang bagay? I-export ang image sa dalawang paraan at ikumpara. Itabi ang file na mas maliit at maayos pa ring tingnan sa full size. Ang screenshot na may naka-paste na photo ang klasikong mahirap na kaso, at madalas near lossless ang nananalo roon.

Dinodokumento ng Google ang tatlong mode, pati ang quality at target size options, sa cwebp reference page.

Anong quality setting ang dapat gamitin para mag-compress ng WebP?

Mula 0 hanggang 100 ang WebP quality, at 75 ang ginagamit ng cwebp kapag wala kang itinakda. Magandang panimula ang default na iyon para sa photos. Mula roon:

• Umakyat hanggang mga 80 hanggang 85 para sa malalaking hero image na tititigan nang malapitan, o images na may skin tones at pinong texture.
• Bumaba sa mga 60 hanggang 70 para sa thumbnails, card images at background photos na natatakpan ng text.
• Iwasan ang napakababang values sa images na may text. Mabilis maglabo ang letra sa lossy mode.

Hindi one to one ang katumbas ng WebP quality numbers sa JPEG quality numbers. Huwag kopyahin ang JPEG setting mo at isiping pareho ang ibig sabihin. Ikumpara ang output batay sa tingin sa size kung saan ito ipapakita, mas mabuti kung sa phone at laptop.

Paano paliitin ang WebP size sa pamamagitan ng pag-resize

Kadalasang mas mahalaga ang dimensions kaysa quality. Ang image na na-save nang 3000 pixels ang lapad para sa espasyong 800 pixels ang lapad sa screen ay may halos 14 na beses na mas maraming pixels kaysa kailangan. Walang quality setting na makakapuno sa ganoong agwat.

1. Hanapin ang pinakamalaking width kung saan lumalabas ang image sa site mo. Karaniwang sinasabi ito ng theme o layout settings mo.
2. I-double ito kung gusto mong malinaw sa high density na phone at laptop screens.
3. I-resize sa width na iyon gamit ang Resize Image tool o ang editor mo, na naka-lock ang aspect ratio.
4. I-compress ang na-resize na kopya.

Para sa responsive sites, mag-export ng ilang width at hayaang ang browser ang pumili gamit ang srcset. Ipinaliliwanag ng gabay ng MDN sa responsive images kung paano gumagana ang markup na iyon. Ida-download ng browser ang maliit na file sa phone at ang malaki sa malapad na monitor.

Ganito rin ang dapat isipin sa animated WebP files. Nagdadagdag ng bigat ang bawat frame, kaya mas malaki ang naitutulong ng pagbawas sa bilang ng frames o sa pixel size kaysa sa pag-adjust ng quality. Kadalasang maikling loop sa mas maliit na size ang praktikal na solusyon.

Bakit mas malaki ang WebP file ko kaysa sa original?

Mas madalas itong mangyari kaysa inaakala ng mga tao. Mga karaniwang sanhi:

• Maliit at maayos na na-optimize na PNG na kaunti ang kulay ang source, na kinonvert sa lossy mode sa mataas na quality. Subukan ang lossless mode para sa ganoong uri ng image.
• Low quality na JPEG na ang source. Kapag ni-re-encode ito sa mas mataas na quality, idedetalye ng WebP ang lahat ng JPEG noise.
• Naka-set sa 100 ang quality. Sa lossy mode, malaking file ang kinalalabasan na halos walang nakikitang pakinabang.
• Nanatili ang buong camera dimensions ng image.

May ilang tool na awtomatikong itinatabi ang original kung mas lumaki ang bagong bersyon. Kung hindi ganoon ang sa iyo, ikaw mismo ang magkumpara ng dalawang size bago palitan ang kahit ano sa site mo.

Bihirang metadata ang sanhi sa WebP. Sa default, walang kinokopyang EXIF, XMP o color profile data ang cwebp mula sa source, pero baka mayroon ang ibang apps. Kung mukhang kupas ang kulay pagkatapos mag-convert, malamang nawawalang color profile ang dahilan. Mag-export ulit nang kasama ang profile (may -metadata icc option ang cwebp para dito).

Aling WebP compressor settings ang bagay sa websites at forms?

Para sa website, isipin ang page weight. Ang hero image ang pinakamabigat sa karamihan ng pages, kaya ito ang bigyan ng pinakamaraming atensyon: tamang width, lossy mode, quality sa 70s o mababang 80s. Puwedeng mas mababa nang husto o lumipat sa lossless ang thumbnails at icons. Mas malalim na tinatalakay ng gabay sa WebP vs PNG ang pagpili ng format para sa site performance.

Naipapakita ng lahat ng kasalukuyang major browsers ang WebP, kaya safe ito para sa websites. Iba ang kuwento sa upload forms. Marami pa ring portal at lumang desktop app ang tumatanggi rito. Sa Mac, nabubuksan ng Preview ang WebP files, pero walang WebP bilang output format sa export menu nito, kaya hindi mo ito mase-save ulit doon.

Kung tinatanggihan ng portal o app ang file mo, i-convert ito gamit ang WebP to image. Piliin ang JPG para sa photos at PNG kung may transparency ang image. Tapos i-compress ang JPG o PNG sa limit ng form gaya ng dati.

Mga madalas itanong