WebP vs PNG vs JPG: Aling Format ang Dapat Gamitin ng Website Mo?

Sa WebP vs PNG, nakadepende ang sagot sa kung saan mapupunta ang image. Sa website, kadalasang panalo ang WebP: ayon sa Google, mga 26% na mas maliit ang lossless WebP kaysa sa PNG, sinusuportahan nito ang transparency, at ipinapakita ito ng bawat kasalukuyang pangunahing browser. Para sa mga file na ie-email mo, ia-upload sa mga form o ipapadala sa iba, mas ligtas ang PNG at JPG, dahil hindi pa rin pare-pareho ang suporta sa labas ng browser.

Ano ang WebP format?

Ang WebP ay image format na ginawa ng Google, unang inanunsyo noong 2010. Isang format ang sumasakop sa ilang trabahong dating nangangailangan ng magkakaibang file:

• Lossy compression para sa mga photo, katulad ng JPG.
• Lossless compression para sa graphics at screenshot, katulad ng PNG.
• Transparency (alpha channel) sa parehong mode.
• Animation, bilang mas magaang kapalit ng GIF.

Ang mga file ay nagtatapos sa .webp. Ipinapakita ang mga ito ng Chrome, Edge, Firefox at Safari, at sumali ang Safari sa version 14. Nakikita ng sinumang bisita na may updated na browser ang WebP images nang wala kang kailangang gawing espesyal.

Malamang nakatagpo ka na ng WebP. Maraming site ang awtomatikong nagse-serve nito, kaya minsan nagda-download bilang .webp ang picture na sine-save mo mula sa web page kahit mukhang ordinaryong photo ito. Tinatalakay ng gabay namin sa ano ang WebP file ang pagbukas at pag-edit sa mga ito.

WebP vs PNG: alin ang mas maliit, at kailan gagamitin ang bawat isa

Ayon sa mga numero ng Google, mga 26% na mas maliit ang lossless WebP kaysa sa PNG. Parehong lossless ang dalawa, kaya parehong pixels ang makukuha mo sa mas maliit na espasyo. Para sa graphics na may transparency, mas malayo pa ang kaya ng lossy WebP: sinasabi ng Google na kadalasang mga tatlong beses na mas maliit ang file kaysa sa katumbas na PNG.

Gamitin ang WebP kaysa PNG kapag:

• Nasa sarili mong website ang image, gaya ng logo, illustration, product cutout o screenshot.
• Gusto mo ng transparency nang walang bigat ng PNG.
• Mahalaga ang bilis ng page at malaki ang image.

Manatili sa PNG kapag:

• Ipapadala mo ang file sa iba, ia-attach sa dokumento, o ia-upload sa form na naglilista ng mga tinatanggap na type.
• Kailangan mo ng master copy para sa pag-edit sa software na maaaring hindi makabukas ng WebP.
• Logo o icon ang graphic na puwede mo sanang i-serve bilang SVG, na kadalasan ay mas maliit pa at nananatiling malinaw sa anumang size.

Bagay ang lossy WebP na may transparency sa product cutouts at illustrations na malambot ang gilid. Para sa pixel-perfect na screenshots at UI mockups, pinapanatiling malinaw ng lossless WebP ang text, tulad ng PNG. Alamin pa ang lakas ng PNG sa ano ang PNG file.

WebP vs JPG para sa mga photo

Para sa photos, nasukat ng Google na 25 hanggang 34% na mas maliit ang lossy WebP kaysa sa katulad na JPG sa parehong SSIM quality score. Sa page na may isang dosenang product shot o malaking hero image, nagreresulta iyan sa mas mabilis na pag-load, lalo na sa mobile data.

May dalawang bentahe pa rin ang JPG. Nabubuksan ito kahit saan, mula sa lumang photo viewer hanggang printer, at ito ang ligtas na sagot para sa kahit anong upload portal. At mahusay na ang modernong JPG encoders, kaya medyo malapit na ang maayos na na-compress na JPG sa tamang dimensions. Kung isang bagay lang ang kaya mong gawin, mas mahalaga ang tamang size ng photo kaysa sa pagpapalit ng format. Mas maraming bytes ang nasasayang sa 4000 pixel na photo na ipinapakita sa 800 pixels na lapad kaysa sa pagpili ng format.

Isang praktikal na paraan para sa site: itago ang mga orihinal bilang JPG o PNG, at mag-publish ng WebP na bersyon na naka-size sa display width. Nakakatulong ang mas malawak na paghahambing ng PNG vs JPG kapag pumipili ka ng master format.

Mabilisang paghahambing

• File size sa web: kadalasang pinakamaliit ang WebP, sunod ang JPG para sa photos o PNG para sa graphics.
• Transparency: oo sa WebP at PNG, hindi sa JPG.
• Animation: oo sa WebP, hindi sa PNG at JPG (GIF o video na lang).
• Compatibility sa labas ng browser: pinakamahusay ang JPG, kasunod agad ang PNG, pinakamahina ang WebP sa mga lumang app at upload form.
• Pag-edit nang walang nawawala: PNG o lossless WebP.

Paano mag-convert ng PNG o JPG to WebP

Para sa iilang file, browser tool ang pinakamabilis na paraan. Lokal na gumagana sa browser mo ang image to WebP converter, kaya hindi naa-upload kahit saan ang images.

1. Mag-resize muna kung mas malaki ang image kaysa sa size kung saan ito ipapakita. Nagtatakda ng eksaktong lapad ang Resize Image tool at pinapanatili ang aspect ratio.
2. Buksan ang WebP converter at idagdag ang mga JPG o PNG file mo.
3. I-convert at i-download. Tiyaking transparent pa rin ang mga transparent na bahagi at malinaw ang text sa mga screenshot.
4. Kung mas mabigat pa rin ang WebP kaysa sa gusto mo, i-compress ulit ito na may target size sa KB.
5. I-upload ang WebP sa site mo at i-update ang mga image reference.

Para sa photos, makatwirang panimula ang lossy quality setting na mga 75 hanggang 85. Ikumpara ang resulta sa orihinal sa full size, at ibaba pa ang quality kung wala kang makitang pagkakaiba.

Maraming content management system at image CDN ang awtomatikong gumagawa ng WebP na kopya. Kung ganoon ang sa iyo, baka kailangan mo lang mag-upload ng magandang JPG o PNG at hayaan itong bahala sa iba.

Paano i-check kung nagse-serve ng WebP ang site mo

Baka sabihin ng CMS o CDN mo na gumagawa ito ng WebP, pero sulit itong kumpirmahin. Sa Chrome o Edge, buksan ang page, pindutin ang F12 para buksan ang developer tools, at lumipat sa Network tab. I-reload ang page at i-filter ayon sa Img. Ipinapakita ng Type column ang format kung saan dumating ang bawat image, at ng Size column kung ilang bytes ang nagamit nito.

Kung may makikita ka pa ring malalaking JPG o PNG file doon, hindi nase-serve ang WebP na kopya. Karaniwang dahilan ang caching plugin na nagse-serve ng lumang HTML, images na idinagdag sa custom code na lumalaktaw sa CMS, o theme na naka-hard-code ang image URLs. Ayusin muna ang mga page na iyon, simula sa pinakamabibigat na image.

Dapat bang WebP ang bawat image sa website mo?

Karamihan sa mga ito ay puwede. May ilang exception na mabuting malaman:

• Mas mainam kadalasan ang SVG para sa simpleng logo at icon.
• Mas madaling gamitin ang JPG o PNG para sa mga file na dapat i-download ng tao, tulad ng press kit photo o printable na graphic.
• Pinakaligtas bilang JPG o PNG ang social sharing images (ang Open Graph image na lumalabas kapag ni-share ang link), dahil hindi mo kontrolado ang bawat app na nagbabasa nito.
• Kung kailangan mong suportahan ang napakalumang browser, mag-serve ng JPG o PNG fallback gamit ang HTML picture element.

Baka makita mo ring nababanggit ang AVIF. Mas bagong format ito na puwedeng mas maliit pa kaysa sa WebP at malawak ang suporta sa mga kasalukuyang browser. Nananatiling mas madaling default ang WebP dahil mas maraming tool at platform ang tumatanggap dito.

Paano magbukas o mag-convert ng na-download na WebP file

Binubuksan ng mga kasalukuyang bersyon ng Windows Photos at Mac Preview ang WebP files, at ipinapakita ito ng kahit anong browser kapag dinrag mo sa isang tab. Nagsisimula ang problema kapag in-upload mo ang file sa lugar na JPG o PNG lang ang tinatanggap, o in-edit ito sa lumang program.

Mabilisang conversion ang solusyon. Kaya ng WebP to PNG o JPG converter ang iisang file o batch. Piliin ang PNG kung may transparency o matatalas na text ang image, at JPG para sa photo kung saan gusto mo ng mas maliit na file. Walang nako-convert kapag pinalitan lang ang extension, kaya laging mag-export ng totoong kopya.

Mga madalas itanong