§

Mag-drop ng larawan o mag-click para pumili

PNG, JPEG, WebP, GIF, BMP — hanggang 30 MB bawat file. Sinusuportahan ang batch.

Mag-drop ng maramihang larawan para mag-convert sa batch — lahat ng conversion ay nangyayari sa iyong device.

Target na format
JPEG at WebP lamang — lossless ang PNG

Ang mga Philippine developer at designer na nagtatayo ng e-commerce site para sa mga Pinoy na consumer ay regular na nangangailangan ng format conversion — ang isang designer ay nagde-deliver ng Figma export bilang PNG, ngunit ang site ay nangangailangan ng WebP para sa mas magandang Lighthouse Core Web Vitals score, lalo na para sa mga user na nasa mobile data. Ang mga negosyo sa Shopee PH, Lazada, at Shopify PH ay madalas na may format na kinakailangan para sa mga product listing. Ang mga developer na nagtatrabaho sa mga DICT digital government project ay gumagamit din ng browser-based conversion na ito para hindi mapadala ang mga sensitibong larawan sa mga external na server.

Paano gumagana ang browser-based na image conversion

Ang bawat conversion ay isang apat na hakbang na pipeline na tumatakbo nang buo sa JavaScript. Walang codec library na dina-download at walang server na kasama. Ang sariling Canvas API ng browser ang humahawak ng decode, resize, at re-encode sa memorya, pagkatapos ay nagbibigay sa iyo ng Blob na maaaring i-preview o i-zip ng page. Dahil ang bawat hakbang ay nasa loob ng sandbox ng tab, ang mga orihinal na file ay hindi kailanman umabot sa network.

  1. Basahin ang bawat na-upload na file bilang Blob at lumikha ng object URL para mabasa ng browser ito nang lokal, nang hindi kinokopya ang mga byte sa isang server o pinapanatili ang mga ito sa disk.
  2. I-draw ang decoded na larawan sa isang offscreen Canvas element, inilalapat ang anumang resize constraint habang pinapanatili ang orihinal na aspect ratio. Kung pumili ka ng max width o max dimension, dito nangyayari ang downscale.
  3. Tawagan ang canvas.toBlob(callback, targetMimeType, quality) para muling i-encode ang mga pixel. Ang PNG output ay palaging lossless; ang JPEG at WebP ay sumusunod sa quality slider, na direktang nami-map sa quantization setting ng encoder.
  4. Magpakita ng before/after na thumbnail na may output dimension at laki ng file, pagkatapos ay nag-offer ng per-image download button o isang ZIP para sa buong batch. Ang ZIP ay ginagawa sa memorya gamit ang fflate, isang 8 KB na library na tumatakbo nang buo sa tab.

Bakit mag-convert ng mga image format?

  • Ang paglipat mula sa PNG patungong WebP ay nagpapababa ng karaniwang laki ng file ng 25 hanggang 35% nang walang nakikitang pagkawala ng kalidad sa 0.8 quality, na direktang nagpapababa ng bigat ng page at nagpapabuti ng Core Web Vitals LCP score. Sa isang karaniwang product-detail page na may walong hero image, iyon ang pagkakaiba ng isang 4 MB na unang paint at isang 2.6 MB na isa.
  • Pinapanatili ng PNG ang transparency kung saan itinatalpog ito ng JPEG. Ang paglipat mula sa PNG patungong JPEG ay nagre-render ng mga transparent na pixel laban sa puting background, na eksakto ang gusto mo kapag ang destination (isang email client, isang mas lumang CMS, isang print template) ay hindi puwedeng tumanggap ng PNG sa simula pa.
  • Ang mga social platform at ad network ay may mahigpit na format na kinakailangan. Ang Facebook at LinkedIn ay mas gusto ang JPEG para sa mga photo upload, tinatanggap ng Twitter OG preview pipeline ang WebP, at ang ilang programmatic na ad server ay tumatanggi sa kahit ano na hindi JPEG. Ang isang mabilis na conversion pass bago mag-upload ay iniiwasan ang rejected-creative ping-pong.
  • Ang pag-standardize ng isang batch ng mixed-format na larawan (PNG screenshot, JPEG photo, WebP export mula sa isang designer) sa isang output format bago mag-upload sa isang CMS o DAM ay nag-aalis ng mga format-handling branch mula sa ingest pipeline. Isang format ang papasok, isang format ang lalabas, mas kaunting conditional na code path sa downstream.

Mga karaniwang paggamit

Ang format conversion ay lumilitaw sa tuwing ang source format at ang inaasahan ng destination ay hindi tugma. Tatlong pattern ang madalas naming nakikita.

  • Paghahanda ng mga product photo para sa isang Shopify o WooCommerce store. Ang mga orihinal na JPEG ay kino-convert sa WebP sa quality na 0.85 para sa pampublikong storefront, habang ang mga kopya ng PNG ay iniingatan para sa mga print-ready na export at marketplace listing na tumatanggi pa rin sa WebP.
  • Pag-convert ng designer-supplied na PNG export sa JPEG o WebP bago sila pumasok sa isang React o Next.js build. Ang image pipeline ng framework ay kumukuha ng mas maliit na source at ang production bundle ay nagsi-ship ng mas kaunting byte bawat ruta.
  • Batch-processing ng isang folder ng screenshot mula sa isang QA run. Ang PNG patungong JPEG sa quality 0.9 ay karaniwang nagpapaliit ng isang 50-screenshot na archive mula sa humigit-kumulang 120 MB pababa sa ilalim ng 20 MB bago ito i-attach sa isang bug tracker ticket.

Isang halimbawang trabaho: 2 MB PNG patungong 300 KB WebP

Ang isang 2 MB na PNG hero image sa 2400×1600 pixel ay isang karaniwang payload sa mga marketing landing page. Ito ay isang magandang benchmark para sa kung ano ang naititipid ng conversion sa isang tunay na page.

Mag-drop ng PNG sa upload zone, pumili ng WebP bilang target na format, itakda ang quality sa 0.8, at itakda ang max width sa 1200 para mahaluan ang pixel dimension. Ini-draw ng Canvas pipeline ang larawan sa 1200×800 na may preserved na aspect, pagkatapos ay muling nag-e-encode sa WebP. Ipinapakita ng output card ang resulta, karaniwang nasa 280 hanggang 320 KB ang hanay, na humigit-kumulang 85% na pagbabawas laban sa orihinal. Mag-click ng I-download sa card para makuha ang single file, o mag-click ng I-download ang .zip sa ibaba ng panel kung nag-convert ka ng ilang larawan sa isang pass. Ang buong round-trip, mula sa drop hanggang download, ay tumatakbo sa loob ng ilang daang millisecond para sa larawang ganito ang laki at walang ginagamit na bandwidth pagkatapos ma-load ang page mismo.

Aling mga format ang sinusuportahan?

Sa input side, tinatanggap ang anumang format na mabasa ng browser: ang PNG, JPEG, WebP, GIF, at BMP ay sumasaklaw sa halos bawat file na ginagawa ng isang designer o screenshot tool. Ang mga output format ay PNG (palaging lossless), JPEG, at WebP. Hindi pa sinusuportahan ang AVIF output dahil ang AVIF encoder ng Canvas API ay nasa Chrome 105 at mas bago lamang at wala sa Safari at Firefox. Ang isang WebAssembly-based na AVIF path ay nakaplano para sa v1.1 para gumana ang feature sa bawat modernong browser.

Nangyayari ba ito sa aking device?

Oo, ganap. Ginagamit ng page ang native Canvas API at Web File API ng browser para mag-decode at muling mag-encode ng bawat larawan sa memorya. Walang image data na ipinapadala sa isang server, walang pansamantalang upload, walang cloud round-trip. Maaari mo itong beripikahin mismo: buksan ang DevTools, lumipat sa Network panel, at magpatakbo ng conversion. Ang mga outbound request lamang na makikita mo ay ang paunang pag-load ng page at mga ad call. Walang image-shaped na lumalabas sa tab.

Ano ang kalidad na trade-off sa pagitan ng PNG at JPEG?

Ang PNG ay isang lossless na format. Ang bawat pixel ay nakakaligtas sa encode cycle nang eksakto, na ginagawang tamang pagpipilian ang PNG para sa mga screenshot, UI capture, at anumang larawan na may matutulis na gilid o malalaking flat-colour na rehiyon. Gumagamit ang JPEG ng DCT compression at itinatalpog ang maingat na detalye na bihirang mapansin ng mata, na ginagawa itong tamang pagpipilian para sa mga larawan. Ang Quality 0.8 ay isang karaniwang sweet spot kung saan ang visual na pagkakaiba mula sa orihinal ay mahirap mapansin ngunit ang file ay 4 hanggang 6 beses na mas maliit kaysa sa katumbas na PNG. Maaaring gumana ang WebP sa parehong lossless at lossy mode; ang quality slider dito ay nagpapatakbo ng lossy encoder, at sa quality 0.85 ang WebP ay karaniwang nananalo sa JPEG ng 25 hanggang 30% sa natural-photo content.

Kailan darating ang suporta sa AVIF?

Ang AVIF encoding sa pamamagitan ng canvas.toBlob(…, 'image/avif') ay gumagana lamang sa Chrome 105 at mas bago ngayon; hindi ito sinusuportahan nang native ng Safari at Firefox. Ang isang v1.1 na release ay magdaragdag ng opt-in AVIF path gamit ang isang magaan na WebAssembly encoder para gumana ang feature sa bawat modernong browser nang hindi naghihintay sa native parity. Hanggang sa noon, ang AVIF na opsyon sa format picker ay ipinapakita bilang 'darating na' at ang WebP encoder ang inirekomendang alternatibo. Sinusuportahan ang WebP ng bawat browser na isinend mula 2026 at gumagawa ng mga file na 10 hanggang 20% ng laki ng AVIF para sa karamihang real-world na larawan.

Mag-drop ng iyong mga larawan, pumili ng format, mag-convert. Lahat ay tumatakbo sa iyong tab. Walang upload, walang account, walang paghihintay sa server queue.