1. I-klasipika ang imahe bago i-optimize
Mag-inventory ng mga imahe ayon sa template. Itala ang papel ng bawat imahe, pinakamalaking at pinakamaliit na rendered width, estado sa initial viewport, at kung kailangan ng ibang crop ang maliliit na screen. Ginagawa nitong mga desisyon na masusuri sa mahahalagang pahina ang gawain sa laki ng file.
Kadalasang tumatanggap ng mas maluwag na lossy compression ang mga larawan na photographic. Maaaring mas angkop ang SVG o raster format na nagpro-protekta sa matutulis na gilid para sa mga logo, simbolo ng interface, line art, at tsart. Ang SVG ay angkop sa line art, diagram, at tsart, hindi sa detalyadong mga larawan.
Panatilihin ang mahalagang detalye at magbigay ng teksto na nagpapahayag ng layunin ng imahe.
Gumamit ng empty alternative text; huwag gawing tanging pinagmulan ng mahalagang impormasyon.
Ibigay ang pangalan ng aksyon o destinasyon, hindi lamang ang pixels ng imahe.
2. Sukatin para sa rendered slot, pagkatapos mag-alok ng mga responsive na kandidato
Itugma ang intrinsic dimensions sa CSS slot. Ang isang desktop-scale na file sa makitid na card ay nagsasayang ng transfer; ang maliit na raster na sobra ang pag-stretch ay nagiging malabo. Isaalang-alang ang device pixel ratio, ngunit beripikahin nang biswal sa halip na asuming bawat screen ay nangangailangan ng pinakamalaking kandidato.
Para sa isang komposisyon na may ilang lapad, gamitin ang srcset na may width descriptors at gamitin ang sizes upang ilahad ang aktwal na slot width. Pipili ang browser ng kandidatong angkop. Gamitin ang picture para sa art direction: ang crop sa maliit na screen na nagpapanatili sa subject ay iba kaysa sa simpleng pagpapaliit ng desktop image. Panatilihin ang isang img fallback na may src at alt sa loob ng picture.
Iisang komposisyon, magkakaibang pixel dimensions.
Ibang crop o komposisyon kapag ang scaling ay nagtatanong ng mensahe.
Panatilihin ang src sa img para sa mga kliyenteng hindi gumagamit ng responsive attributes.
3. Pumili ng format at compression ayon sa katangian ng imahe
Maaaring magbawas ang WebP at AVIF ng raster transfer sa angkop na mga kaso, ngunit ang format ay hindi garantiya ng kalidad. Subukan ang kinatawang mukha, pinong texture, mga brand gradient, naka-bake na teksto, at transparency. Nananatiling karaniwang fallback ang JPEG para sa mga larawan; ang PNG ay maaaring angkop para sa lossless raster detail o transparency. Suriin ang support ng AVIF at kung paano ito babagay sa iyong audience at delivery stack.
Ang lossy compression ay nag-aalis ng impormasyon para makatipid ng bytes at karaniwang mas mapagpatawad sa detalyadong mga larawan kaysa sa matutulis na linya o teksto. Pinapanatili ng lossless compression ang naka-encode na pixels ngunit maaaring mas kaunti ang matitipid. Pumili ng kalidad sa pamamagitan ng side-by-side review sa rendered size, hindi lamang sa numerong setting. Alisin ang metadata lamang kapag napatunayan muna ang orientation, color, at workflow needs.
Ihambing ang lossy AVIF, WebP, at JPEG fallback sa display size.
Mas gusto ang angkop na SVG o protektahan ang matutulis na gilid ng raster sa pamamagitan ng testing.
Kumpirmahin ang alpha appearance sa bawat ipapadalang format at fallback.
4. Gawing protektado ng markup ang bilis at katatagan ng layout
Bigyan ang bawat content img ng width at height attributes na tumutugma sa intrinsic aspect ratio nito. Makakapag-reserba ang browser ng espasyo bago dumating ang file, na nagpapabawas ng layout movement. Maaaring i-set pa rin ng CSS ang ipinapakitang sukat.
Gumamit ng loading=lazy lamang sa labas ng initial viewport. Huwag i-lazy-load ang imahe na malamang makikita habang naglo-load, partikular ang isang Largest Contentful Paint (LCP) candidate. Ang LCP ay ang oras ng pag-render ng pinakamalaking imahe, bloke ng teksto, o video na makikita sa viewport. Ang fetchpriority=high ay isang relative lang na hint; gamitin nang may pag-iingat at sukatin ang resulta. Gumamit ng HTML image markup para sa content na nangangailangan ng alternative text o image discovery; idokumento ng Google na hindi nito ini-index ang mga CSS images.
Itakda ang width at height, kabilang sa mga lazy-loaded na gallery images.
Panatilihing eager ang posibleng LCP images at suriin ang request priority.
Lazy-load ang mga offscreen na imahe at subukan ang pag-scroll sa isang network na may limitasyon.
5. Panatilihin ang kahulugan, discoverability, at kalidad ng biswal
Nakasalalay ang alternative text sa layunin at konteksto. Ilarawan ang mahahalagang impormasyon para sa isang impormatibong imahe, gamitin ang alt="" para sa dekorasyon, at pangalanan ang function ng isang naka-link o button na imahe. Para sa kumplikadong tsart o diagram, magbigay ng katumbas na paliwanag sa katabing teksto. Huwag gumamit ng listahan ng mga keyword.
Para sa discoverable content images, gamitin ang standard HTML image elements, may-katuturang katabing teksto, maiikling deskriptibong filenames kung praktikal, at isang fallback source na may responsive markup. Huwag gawing redundant na content ang dekoratibong backgrounds para lang sa discovery.
Suriin ang compressed files sa pinakamalaki at pinakamaliit na intensyong sukat.
Mas pinipili ang regular na teksto; kung hindi, magbigay ng katumbas na wording.
Ilagay ang impormatibong mga imahe malapit sa may-kaugnayang teksto sa pahina.
6. Beripikahin ang pahina, hindi lang ang asset
Subukan ang kinatawang mga pahina sa makitid at malapad na viewport. Sa browser developer tools, suriin ang srcset candidate, transfer size, rendered dimensions, at layout movement. I-throttle ang network upang makita ang mga late hero images at mabagal na gallery. Hindi maipapakita ng isang export comparison ang maling sizes value, unexpected crop, o production transformation problem.
Gumamit ng lab at field signals kung mayroon. Maaaring tukuyin ng Lighthouse at PageSpeed Insights ang mga maling sized na imahe; ang field LCP ay sumasalamin sa totoong pagbisita sa paglipas ng oras. Ihambingin ang parehong template, klase ng device, bersyon ng release, at measurement window. Huwag bigyan ng kredito ang mga imahe para sa pagbabago ng metric kapag nagbago rin ang server time, scripts, fonts, o third parties. I-stage ang mga pagbabago sa shared-template at panatilihin ang rollback path hanggang sa ma-validate.
Kumpirmahin na hindi pumipili ang slot ng hindi inaasahang oversized na kandidato.
Suriin ang crop, sharpness, color, alternatives, at layout stability.
Pangalanan ang may-ari, inaasahang signal, at reversal path.