1. Tafsiri aina ya picha kabla ya kuiboresha
Fanya orodha ya picha kwa kila templati. Rekodi jukumu la kila picha, upana wake uliotumika mkubwa na mdogo, hali ya kuonekana kwenye skrini ya awali, na kama skrini ndogo zinahitaji kukatwa tofauti. Hii inageuza kazi ya ukubwa wa faili kuwa maamuzi ambayo unaweza kupima kwenye kurasa za umuhimu.
Picha za foto mara nyingi zinaweza kuvumilia ukandamizaji wa lossy uliohakikishwa. Nembo, alama za interface, sanaa ya mistari, na chati zinafaa zaidi kwa SVG au muundo wa raster unaolinda mipaka mkali. SVG inafaa kwa sanaa ya mistari, michoro, na chati, si kwa picha zenye undani mwingi.
Hifadhi undani muhimu na toa maandishi yanayotuma kusudi la picha.
Tumia alt="" (maandishi ya kivunjari ya mbadala), usifanye kuwa chanzo pekee cha habari muhimu.
Taja kitendo au hatua inayofanywa, sio tu pikseli za picha.
2. Weka ukubwa kwa nafasi inayotumika, kisha toa wagombea wa kujibu (responsive)
Linganishwa vipimo vya ndani (intrinsic dimensions) na nafasi katika CSS. Faili ya kiwango cha desktop kwenye kadi nyembamba hutokwa kwa uhamisho; raster ndogo iliyofanywa upanuzi inakuwa laini. Angalia uwiano wa pikseli za kifaa (device pixel ratio), lakini hakikisha kwa kuona badala ya kudhani kila skrini inahitaji mgombea mkubwa zaidi.
Kwa muundo mmoja katika upana kadhaa, tumia srcset na viashiria vya width, na tumia sizes kuonyesha upana halisi wa nafasi. Kivinjari kisha kina-chagua mgombea. Tumia picture kwa art direction: kukatwa kwa skrini ndogo ili kuhifadhi somo kunaweza kuwa tofauti na kupunguza tu picha ya desktop. Weka img ya akiba yenye src na alt ndani ya picture.
Muundo ule ule, tofauti kwa vipimo vya pikseli.
Kukata au muundo tofauti wakati kupanua kunaficha ujumbe.
Weka src kwenye img kwa wateja wasioutumia vigezo vya kujibu.
3. Chagua muundo na ukandamizaji kulingana na sifa za picha
WebP na AVIF zinaweza kupunguza uhamisho wa raster kwenye kesi zinazofaa, lakini muundo si dhamana ya ubora. Jaribu uso wa watu wa mfano, msisitizo wa muundo, gradients za chapa, maandishi yaliyotiwa ndani, na uwazi. JPEG bado ni chaguo la kawaida kwa foto za nyuma; PNG inaweza kufaa kwa undani wa raster isiyopoteza au uwazi. Angalia uunganishaji wa AVIF na ustahiki wa kiendeshaji kwa hadhira yako na mnyororo wa utoaji.
Ukandamizaji wa lossy unatenga taarifa ili kuokoa baiti na kwa kawaida unavumiliwa zaidi kwenye picha zenye undani kuliko mistari nyembamba au maandishi. Ukandamizaji usiopoteza (lossless) unahifadhi pikseli zilizoencoded lakini unaweza kuokoa kidogo zaidi. Chagua ubora kwa kupitia pande kwa pande kwa ukubwa uliotumika, sio mipangilio nambari ya kufunga. Ondoa metadata tu baada ya kuthibitisha mwelekeo, rangi, na mahitaji ya mtiririko wa kazi.
Linganishwa AVIF na WebP lossy na JPEG kama akiba kwa ukubwa wa kuonyeshwa.
Pendelea SVG inayofaa au linda mipaka ya raster kupitia majaribio.
Thibitisha kuonekana kwa alpha katika kila muundo uliotumwa na akiba.
4. Fanya maandishi ya HTML yalinde kasi na utulivu wa muundo
Weka kwa kila img ya maudhui vigezo width na height vinavyoendana na uwiano wake wa ukubwa wa ndani. Kivinjari kinaweza kuhifadhi nafasi kabla faili haijafika, kupunguza mwendo wa muundo. CSS bado inaweza kuweka vipimo vya kuonyeshwa.
Tumia loading=lazy tu kwa picha nje ya skrini ya awali. Usifanye lazy-load picha inayoweza kuonekana wakati wa mzigo, hasa mgombea wa Largest Contentful Paint. LCP ni wakati wa kuonyesha kipengele kikubwa zaidi cha maudhui (picha, block ya maandishi, au video) kinachoonekana kwenye kivinjari. fetchpriority=high ni tu kidokezo cha ukoo; tumia kwa wingi mdogo na pima matokeo. Tumia maandishi ya picha ya HTML kwa maudhui yanayohitaji alt au kugunduliwa; Google inaelezea kuwa haiingizi picha za CSS.
Weka width na height, hata kwa picha za gallery zinazopakiwa kwa lazy.
Weka picha zinazoweza kuwa LCP zikipakiwa kwa haraka na angalia kipaumbele cha ombi.
Lazy-load picha zilizo nje ya skrini na jaribu kuscroll kwenye mtandao mwenye vizuizi.
5. Hifadhi maana, ugunduzi, na ubora wa kuona
Maandishi ya mbadala (alt) hutegemea kusudi na muktadha. Eleza taarifa muhimu kwa picha ya taarifa, tumia alt="" kwa mapambo, na taja kazi ya picha ya kiungo au kitufe. Kwa chati au mchoro mgumu, toa maelezo sawa karibu kwenye maandishi ya ukurasa. Usitumie orodha za maneno muhimu.
Kwa picha zinazopimika kugunduliwa, tumia vipengele vya kawaida vya HTML, maandishi yanayofaa karibu, majina mafupi ya faili pale inapofaa, na chanzo cha akiba pamoja na maandishi ya kujibu. Usibadilishe mandhari ya ziada (decorative backgrounds) kuwa maudhui rudufu kwa ajili ya ugunduzi pekee.
Kagua faili zilizokandamizwa kwa ukubwa mkubwa na mdogo uliokusudiwa.
Pendelea maandishi ya kawaida; vinginevyo toa neno sawa mahali pengine.
Weka picha za taarifa karibu na maandishi yanayohusiana.
6. Thibitisha ukurasa, si asset pekee
Jaribu kurasa za mfano kwa sehemu nyembamba na pana. Katika zana za wazalishaji kivinjari (browser developer tools), angalia mgombea wa srcset ulioteuliwa, ukubwa wa kuhamishwa, vipimo vilivyoonyeshwa, na mwendo wa muundo. Punguza mtandao (throttle) kufichua picha za hero zilizochelewa na galeria zinazochelewa. Kulinganisha kwa nje ya uingizaji haiwezi kuonyesha sizes isiyo sahihi, kukatwa kisichotarajiwa, au tatizo la mabadiliko ya uzalishaji.
Tumia ishara za lab na uwanja (lab and field) unapopatikana. Lighthouse na PageSpeed Insights zinaweza kubainisha picha zisizofaa kwa ukubwa; LCP ya uwanja inaakisi ziara halisi kwa muda. Linganisha templati ile ile, darasa la kifaa, toleo la kurusha, na dirisha la upimaji. Usilipe sifa kwa picha kwa mabadiliko ya metric wakati wakati wa seva, skripti, fonti, au wahusika wa tatu pia walibadilika. Panga mabadiliko kwenye templati za pamoja na kuweka njia ya kurudisha hadi validation imekamilika.
Thibitisha kuwa nafasi haichague mgombea mkubwa kupita kiasi bila kutarajia.
Angalia kukatwa, msharifu, rangi, mbadala, na utulivu wa muundo.
Taja mmiliki, ishara inayotarajiwa, na njia ya kuirudisha nyuma.