Baguhin ang laki ng mga larawan _

Paano gumagana ang browser-based na image resizing

Ang bawat resize ay isang maikling 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 nagdi-decode ng file, nagre-redraw ito sa target na laki, at nagre-re-encode sa memorya, pagkatapos ay nagbibigay 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. Binabasa ang bawat na-upload na file bilang Blob at lumilikha 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. Kinukuwenta ang target na dimensyon mula sa iyong piniling mode — isang pinakamahabang gilid na cap, eksaktong lapad at taas, o percent scale. Pinapanatili ng aspect ratio lock ang mga proporsyon kapag nag-edit ng isang field.
3. Lumilikha ng offscreen Canvas sa target na laki at tinatawagan ang ctx.drawImage(source, 0, 0, width, height) para muling iguhit ang mga decoded na pixel. Ang browser ang humahawak ng interpolation na nagpapanatiling maayos ang scaled na resulta.
4. Tinatawagan ang canvas.toBlob para muling i-encode sa source format. Nananatiling lossless ang PNG, ang JPEG at WebP ay muling ine-encode sa mataas na kalidad. Pagkatapos ay nagpapakita ang page ng before/after card at nag-offer ng per-image download o isang ZIP na ginawa sa memorya gamit ang fflate.

Bakit mag-resize ng mga larawan?

• Ang mga masyadong malaking larawan ang pinakakaraniwang sanhi ng mabagal na page. Ang 4000×3000 na larawan mula sa telepono na direktang inilagay sa 600-pixel-wide na layout ay nagpapadala ng humigit-kumulang 40 beses na mas maraming pixel kaysa sa maipapakita ng screen. Ang pag-cap ng pinakamahabang gilid sa 1600 px bago mag-upload ay malaking nakatutulong sa bawat page weight at nagpapabuti ng Core Web Vitals LCP.
• Ang mga upload form ay nagpapatupad ng mahigpit na dimensyon. Ang mga avatar slot, ID-photo portal, marketplace listing, at OG social card ay lahat nagnanais ng partikular na pixel size: 1200×630 para sa Open Graph preview, 512×512 para sa app icon, 150×150 para sa thumbnail. Tamaan ang tamang numero at laktawan ang rejected-upload loop.
• Ang mga email at chat tool ay tahimik na nagko-compress muli ng kahit anong malaki, na maaaring makapinsala sa isang malinis na screenshot. Ang pag-resize sa sarili sa makatwirang lapad ay nagpapanatiling mahuhulaan ang resulta sa halip na iwan sa lossy pipeline ng ibang tao.
• Ang batch consistency ay mahalaga para sa mga gallery at catalogue. Ang pagpapatakbo ng folder ng mixed-size na larawan sa pamamagitan ng isang 800×800 na target ay nangangahulugang ang bawat card ay nakahanay sa grid, na walang napakalaking larawan na nasisirang layout.

Mga karaniwang paggamit

Ang resize ay lumilitaw sa tuwing ang source dimensions at ang inaasahan ng destination ay hindi tugma. Tatlong pattern ang madalas na lumilitaw.

• Paghahanda ng mga product photo para sa isang Shopify o WooCommerce store. Ang folder ng 4000-pixel na camera original ay cina-cap sa 1600 px na pinakamahabang gilid para mabilis na ma-load ang storefront, habang ang aspect ratio ay nananatiling hindi nagbabago para walang mukhang naka-stretch.
• Pag-generate ng social at app asset mula sa isang master file. Magtakda ng eksaktong 1200×630 para sa Open Graph card, pagkatapos 512×512 para sa app icon, at i-export ang bawat isa sa ilang click nang hindi binubuksan ang isang mabigat na editor.
• Pag-shrink ng isang batch ng QA o support screenshot bago i-attach sa isang tiket. Ang pag-scale ng isang 50-shot na folder sa 50% ay karaniwang nagpapababa ng archive size ng humigit-kumulang tatlong-kapat bago ito mapunta sa isang bug tracker.

Isang halimbawa: mula sa 4000 px na larawan patungong 1600 px na web image

Ang 4000×3000 na larawan mula sa telepono ay isang karaniwang payload na mas malaki kaysa sa kailangan ng anumang web layout. Ito ay isang magandang benchmark para sa kung ano ang naititipid ng resizing.

Mag-drop ng larawan sa upload zone, iwanan ang mode sa Limitahan ang pinakamahabang gilid, at itakda ang halaga sa 1600. Ang Canvas pipeline ay muling iginiguhit ang larawan sa 1600×1200 na may preserved aspect ratio, pagkatapos ay muling ine-encode ito sa orihinal na format. Ipinapakita ng output card ang mga bagong dimensyon at laki ng file, na para sa isang karaniwang JPEG ay bumabagsak mula sa ilang megabyte pababa sa ilang daang kilobyte. Mag-click ng I-download sa card para makuha ang single file, o mag-click ng I-download ang .zip kung nag-resize ka ng ilang larawan sa isang pass. Ang buong round-trip, mula sa drop hanggang download, ay tumatakbo sa loob ng isang maliit na bahagi ng segundo at walang ginagamit na bandwidth pagkatapos ma-load ang page mismo.

Aling mga resize mode ang available?

Tatlo. Limitahan ang pinakamahabang gilid ay nag-ca-cap ng mas mahabang lapad o taas sa isang pixel value at sine-scale ang kabilang gilid para tumugma — ito ang ligtas na default dahil hindi ito kailanman nagbabaluktot. Eksaktong lapad × taas ay nagpapahintulot sa iyo na mag-type ng dalawang numero, na may aspect ratio lock na muling kinukuwenta ang pangalawang field mula sa source ratio habang ine-edit mo ang una — i-off ang lock kapag ang isang form ay nangangailangan ng eksaktong non-proportional na laki. Mag-scale ayon sa porsyento ay pinarurusahan ang parehong dimensyon ng isang salik, kapaki-pakinabang para sa paghati o pagdoble ng isang buong batch nang sabay-sabay. Anim na one-click preset (mula 1920×1080 pababa sa isang 150×150 thumbnail) ang sumasaklaw sa mga pinakakaraniwang target.

Nangyayari ba ito sa aking device?

Oo, ganap. Ginagamit ng page ang native Canvas API at Web File API ng browser para i-decode, muling iguhit, at muling i-encode ang 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 resize. 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, na ginagawa itong ligtas para sa mga scanned ID, medical image, at iba pang materyal na hindi mo gustong i-upload.

Magpapababa ba ang resize ng kalidad?

Ang pagpapaliit ng larawan (downscaling) ay maganda ang hitsura — ina-average ng browser ang mga source pixel sa mas kaunting pixel, kaya nananatiling malinaw ang detalye at nagiging mas maliit ang file. Ang pagpapalaki nang higit sa source resolution (upscaling) ay hindi makakalikha ng detalye na hindi kailanman nakuha, kaya ang isang maliit na larawang pinalaki ay magmumukhang malambot — ito ay limitasyon ng bawat resizer, hindi partikular ng tool na ito. Pinapanatili ng output ang source format: nananatiling lossless ang PNG, ang JPEG at WebP ay muling ine-encode sa mataas na quality setting kaya mahirap mapansin ang visual na pagkakaiba mula sa orihinal.

Aling mga file 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 telepono, kamera, o screenshot tool. Pinapanatili ng output ang source format kung saan sinusuportahan ng Canvas encoder — ang PNG, JPEG, at WebP ay direktang gumagana. Ang GIF at BMP, na mabasa ng Canvas API ngunit hindi muling ma-encode, ay sine-save bilang lossless PNG. Kasama sa na-resize na filename ang mga bagong dimensyon (halimbawa photo-1600x1200.jpg) para madaling ayusin ang isang batch.

Mag-drop ng iyong mga larawan, pumili ng laki, i-resize. Lahat ay tumatakbo sa iyong tab. Walang upload, walang account, walang paghihintay sa server queue.