Ang malalaking larawan ang numero-unong dahilan kung bakit mabagal mag-load ang mga page. Ang solusyon ay halos palaging dalawang hakbang: gawing tamang sukat ang larawan, tapos i-compress ang natitira. Gawin pareho at ang 4 MB na litrato ay nagiging 150 KB na litratong magkapareho ang hitsura sa screen.
Maglagay tayo ng tunay na numero rito.
Mga target na sukat na dapat layunin
Hindi mo kailangang hulaan. Narito ang mga praktikal na budget ng bigat na nagpapanatiling mabilis ang page:
- Hero / full-width banner: wala sa 200 KB, ideal na ~100–150 KB.
- Litrato sa loob ng artikulo: 80–150 KB bawat isa.
- Thumbnail / avatar: 10–30 KB.
- Logo o icon (PNG/SVG): wala sa 30 KB; kadalasang mas mababa pa.
At mga sukat:
- Full-width hero: 1600–2000 px ang lapad ay sapat na para sa karamihan ng layout (doblihin lang kung tinatarget mo ang Retina at kaya mo ang mga byte).
- Litrato sa column: itugma sa iyong content width — kadalasang 800–1200 px.
- Thumbnail: ang sukat na talagang ipinapakita, hal. 300–400 px.
Kung anumang solong larawan sa page ay lampas sa ~300 KB, kadalasang pagkakamali iyon na sulit ayusin.
Hakbang 1: I-resize sa tunay na display width
Ito ang hakbang na nilalaktawan ng mga tao, at ito ang pinakamalaking pumapalya. Ang litrato mula sa telepono ay kadalasang 4000+ pixels ang lapad. Kung ipinapakita ito sa 800-pixel na column, nagpapadala ka ng 25 beses na mas maraming pixel kaysa ipinapakita ng screen — at ang bilang ng pixel ang nagpapatakbo sa laki ng file higit sa lahat.
Gamitin ang Image Resizer para paliitin ang larawan sa lapad na talagang lumalabas ito. I-resize ayon sa pixels o porsyento, panatilihing naka-lock ang aspect ratio, at hayaang panatilihing malinis ng mataas na kalidad na downscaler ang mga gilid.
Ang tamang-sukat lang ay kadalasang binabawasan ang laki ng file ng 80–90% bago ka pa nag-compress ng isang byte.
Hakbang 2: I-compress ang natitira
Ngayon paliitin ang datos sa loob ng tamang sukat na iyon.
- Litrato (JPG/WebP): itakda ang quality slider sa 75–85. Iyon ay visually lossless para sa karamihan ng larawan habang matinding binabawasan ang laki.
- PNG (screenshot, graphics): binabawasan sila ng Image Compressor sa 256-na-kulay na palette, karaniwang nagtitipid ng 60–80% nang walang nakikitang pagbabago at pinapanatili ang transparency.
Nililimitahan din ng compressor ang output sa orihinal na sukat — hindi ito kailanman nagbabalik ng mas malaki — at may opsyonal itong width cap, kaya kaya mong gawin ang dalawang hakbang sa isang pass: itakda ang cap sa iyong target na lapad at i-compress nang sabay. I-batch ang buong folder at i-download ito bilang ZIP.
Piliin ang tamang format habang nandiyan ka
Kung ihahatid ang iyong larawan sa modernong browser, ang pag-convert ng litrato sa WebP ay karaniwang nadadaig ang JPEG ng isa pang 25–35% sa parehong quality. Ang flat na graphics ay nananatiling PNG (o WebP). Huwag i-save ang litrato bilang PNG — iyon ang klasikong pagkakamali sa bigat, madaling 5–10× na parusa.
Isang makatotohanang workflow
Para sa blog post na may limang litrato:
- I-resize ang bawat isa sa iyong column width (sabihin nating 1200 px).
- I-compress sa quality 80, o i-convert sa WebP.
- Kumpirmahing dumapo ang bawat isa sa ilalim ng ~150 KB.
- Suriin ang 100% crop ng isang larawan para makasiguro na tumagal ang kalidad.
Ang limang litratong nagsimula sa 20 MB kabuuan ay dadapo sa mga 600 KB — isang page na naglo-load sa isang kurap sa halip na huminto.
Pribado at offline
Lahat ng nasa itaas ay tumatakbo nang buong-buo sa iyong browser gamit ang Canvas at WebAssembly. Walang larawang ina-upload sa server, at pagkatapos ng iyong unang pagbisita ay naka-cache ang mga tool at gumagana offline. Kaya mong i-optimize ang mga larawan sa isang buong post nang walang koneksyon at walang umaalis sa iyong makina.