Sa karamihan ng website, ang mga larawan ang pinakamabigat na bagay sa page, kadalasan mas malaki pa kaysa sa pinagsamang HTML, CSS, at JavaScript. Kung mabagal ang pakiramdam ng isang page, ang mga larawan ang unang dapat tingnan, at karaniwang mabilis ang mga solusyon.
Tatlong teknik ang gumagawa ng halos lahat ng trabaho: i-resize ang larawan sa sukat na talagang ipinapakita, i-compress ito, at ihatid ito sa modernong format. Kapag pinagsama, madalas nitong binabawasan ang bigat ng larawan nang 70% o higit pa.
I-resize sa sukat na talagang ipinapakita mo
Ito ang pinakakaraniwan at pinakamasagwang pagkakamali. Ang larawan mula sa kamera ay maaaring 6000 pixels ang lapad, pero ipinapakita ito ng iyong artikulo sa isang column na 800 pixels lang ang lapad. Dina-download ng browser ang lahat ng anim na libong pixel at itinatapon ang karamihan kapag pinaliliit nito ang larawan para kumasya.
Ang paghahatid ng 6000-pixel na larawan sa isang 800-pixel na puwang ay maaaring mangahulugan ng pag-download ng lima hanggang sampung beses na mas maraming data kaysa kailangan. Simple ang solusyon: i-resize ang file sa halos lapad na sasakupin nito, kasama ang kaunting headroom para sa high-density na screen.
Isang praktikal na tuntunin:
- Full-width na hero image: 1600–2000 px ang lapad ay sapat na.
- Larawan sa loob ng artikulo: 1000–1400 px.
- Thumbnail: 300–500 px.
Gamitin ang Image Resizer para paliitin ang bawat larawan bago pa ito umabot sa iyong page. Pinapanatili nitong naka-lock ang aspect ratio para walang nabababat.
I-compress para tanggalin ang sobra
Kapag tama na ang sukat, tinatanggal ng compression ang detalyeng hindi kayang makita ng mata. Para sa mga litrato, ang quality na 75–85% ang tamang punto: bumababa nang malaki ang file habang parehong ganda pa rin ng larawan. Para sa flat na graphics at screenshot na naka-save bilang PNG, ang pagbawas ng bilang ng kulay (pag-quantize sa 256 na kulay) ay makakapagpaliit ng file sa maliit na bahagi ng orihinal na sukat.
Kinakaya ng Image Compressor ang dalawa. Muli nitong nine-encode ang JPEG at WebP ayon sa quality, kina-quantize ang mga PNG, at garantisadong hindi ito gagawa ng file na mas malaki kaysa sa pinagsimulan mo. Kung may buong gallery ka, patakbuhin ang mga ito bilang batch at i-download ang isang ZIP.
Lumipat sa modernong format
Ang pagpili ng format lang ay maaaring makapaghati sa isang file. Narito kung paano naghahambing ang mga karaniwang opsyon para sa mga litrato.
| Format | Karaniwang sukat kumpara sa JPEG | Pinakamainam para sa |
|---|---|---|
| JPEG | Baseline | Pangkalahatang fallback; mga litrato |
| WebP | ~25–35% mas maliit | Mga litrato at graphics; malawak na suporta ng browser |
| AVIF | ~50% mas maliit | Mga litrato kung saan mahalaga ang pinakamaliit na sukat |
| PNG | Mas malaki para sa litrato | Logo, icon, flat na graphics, transparency |
Ang WebP ang ligtas na default sa 2026 — binabasa ito ng bawat kasalukuyang browser at kumpiyansang natatalo nito ang JPEG. Mas maliit pa ang AVIF pero mas matagal i-encode at bahagyang mas makitid ang suporta. Pinapayagan ka ng Image Converter na tumarget ng AVIF at tahimik na bumabalik sa WebP kapag hindi tama ang AVIF, kaya makakakuha ka ng pinakamagandang available na resulta nang hindi humuhula.
Isang babala: huwag gumamit ng PNG para sa mga litrato. Kumikinang ang PNG para sa logo, icon, at anumang nangangailangan ng transparency, pero para sa litrato ay maaaring ilang beses itong mas malaki kaysa sa WebP na may parehong quality.
Pagsamahin ang lahat
Isang maaasahang pipeline para sa anumang larawang papunta sa web:
- I-resize sa display width (kasama ang headroom para sa retina screen).
- I-convert sa WebP, o AVIF kung gusto mo ng pinakamaliit na file.
- I-compress sa 75–85% quality para tanggalin ang huling sobra.
Gawin iyon at ang isang 5 MB na litrato mula sa kamera ay maaaring maging 120 KB na WebP na magkapareho ang hitsura sa isang column ng artikulo. Pagparamihin sa isang buong page at kapansin-pansin ang pagkakaiba sa oras ng pag-load.
Lahat ay tumatakbo sa iyong browser gamit ang Canvas at WebAssembly, kaya walang ina-upload at patuloy na gumagana ang mga tool offline pagkatapos ng iyong unang pagbisita. Nangangahulugan iyon na maaari kang maghanda ng folder ng mga larawan para sa iyong site nang hindi ito ibinibigay sa anumang server.
Higit pa sa mga file
May dalawa pang ugali na nakakatulong, at wala itong bayad:
- Lazy-load ang mga larawan sa ibaba ng fold gamit ang
loading="lazy"para kunin lang ng browser ang mga ito habang malapit nang mag-scroll ang mambabasa. - Itakda ang width at height na attribute para hindi tumalon ang layout habang naglo-load ang mga larawan, na nakakatulong din sa iyong Core Web Vitals score.
Gusto mong malaman kung aling mga larawan ang eksaktong nagpapabagal sa isang page? Sinasaklaw ng aming image SEO guide ang pag-audit, at maglilista ang isang page speed check ng mga pinakamabigat na asset para malaman mo kung saan unang itutok.