Jinsi ya kubana picha kwa tovuti

Kwa mujibu wa Web Almanac ya 2025 ya HTTP Archive, ukurasa wa mwanzo wa kawaida (thamani ya kati) ulikuwa na uzito wa 2.56 MB kwenye simu, na 911 KB kati ya hizo zilikuwa picha. Kwenye kompyuta za mezani, ukurasa wa kawaida ulibeba 1,058 KB za picha. Picha pia ndizo wageni husubiri: kipengele kikubwa zaidi kwenye skrini ukurasa unapofunguka, yaani Largest Contentful Paint (LCP), kilikuwa picha katika 76% ya kurasa za simu.

Picha nyepesi hufunguka mapema kwenye muunganisho wa polepole, hutumia data kidogo ya simu ya wageni wako na hukugharimu kipimo data kidogo. LCP ni mojawapo ya Core Web Vitals za Google, vipimo ambavyo Google hutumia kutathmini uzoefu wa ukurasa, kwa hiyo picha nzito zinaweza kugharimu zaidi ya sekunde chache za subira.

Ubanaji hauwezi kuokoa picha iliyo kubwa mno kuliko nafasi inayoijaza. Picha ya kamera yenye upana wa pikseli 4000, ikionyeshwa katika safu yenye upana wa pikseli 800, hubeba pikseli mara 25 zaidi ya zile ukurasa unaweza kutumia. web.dev inaeleza kwamba kutuma picha za ukubwa wa kompyuta ya mezani kwenye simu kunaweza kutumia data mara 2–4 zaidi ya inavyohitajika.

• Mabango ya upana kamili: upana wa takriban pikseli 1600–2000 unatosha kwa mipangilio mingi ya kurasa.
• Picha ndani ya safu ya makala: takriban mara mbili ya upana wa safu, ili zibaki safi bila ukungu kwenye skrini zenye msongamano mkubwa wa pikseli (kwa mfano, pikseli 1400 kwa safu ya pikseli 700).
• Vijipicha na picha za wasifu: mara mbili ya ukubwa wa kuonyeshwa, mara nyingi pikseli 200–400.

Muundo huamua jinsi picha inavyoweza kuhifadhiwa kwa ufanisi. Kwa ufupi: picha za kamera zinafaa JPG au WebP; nembo, picha za skrini na chochote chenye uwazi vinafaa PNG au WebP. Ulinganisho wetu wa JPG, PNG na WebP unaeleza ni lini kila muundo unashinda.

Takriban 97% ya vivinjari vinavyotumika huonyesha WebP, na mara nyingi faili zake ni ndogo zaidi kwa kiasi kinachoonekana. Ili kuijaribu, badilisha kwa JPG kuwa WebP au PNG kuwa WebP na ulinganishe matokeo na asili: faili iliyobadilishwa si ndogo zaidi kila wakati, hasa kwa michoro rahisi.

Ubanaji huondoa data ambayo jicho haliwezi kugundua kwa urahisi kuwa imekosekana. Kwenye zana ya Bitinz ya kubana picha unaweza kudondosha kundi la faili za JPG, PNG au WebP na kuchagua mojawapo ya viwango vitatu:

• Haraka: kasi kwanza, kwa makundi makubwa ya picha.
• Uwiano: chaguo-msingi, na kinafaa picha nyingi za tovuti.
• Upeo: huchukua muda kidogo zaidi ili kupata faili ndogo zaidi; kinafaa kwa picha zinazoonekana kwenye kila ukurasa, kama mabango na mandharinyuma.

Ukihifadhi muundo, Bitinz haikurudishii kamwe faili kubwa kuliko ile uliyopakia. Linganisha matokeo na asili kwa ukubwa kamili, hasa picha zenye maandishi madogo au mabadiliko laini ya rangi, kisha pakua zile unazoridhika nazo.

Picha iliyobanwa vizuri bado inaweza kupunguza kasi ya ukurasa ikipakia wakati usiofaa au kwa ukubwa usiofaa. Sifa chache za HTML hufanya sehemu kubwa ya kazi:

• Weka width na height kwenye kila picha, ili kivinjari kiweze kutenga nafasi na mpangilio wa ukurasa usirukeruke picha inapopakia.
• Ongeza loading="lazy" kwenye picha zilizo chini zaidi ya ukurasa, ili zipakie tu mgeni anaposogeza ukurasa karibu nazo.
• Usiwahi kuchelewesha upakiaji (lazy-load) wa picha kuu iliyo juu ya ukurasa. Badala yake, web.dev inapendekeza fetchpriority="high" kwa picha hiyo, kwenye picha zisizozidi moja au mbili.
• Tumia srcset na sizes kutoa upana kadhaa wa picha ileile, ili simu zipakue faili ndogo kuliko skrini kubwa.
• Toa picha zikiwa na muda mrefu wa kuhifadhiwa kwenye akiba (cache), kupitia CDN ikiwa unayo, ili wageni wanaorudi wasizipakue tena.

Pima ukurasa kwa PageSpeed Insights au paneli ya Lighthouse katika Chrome. Tangu Lighthouse 13, ukaguzi wa picha umewekwa pamoja katika ushauri mmoja, “Improve image delivery”, unaoorodhesha picha zinazoweza kubanwa zaidi, kutolewa katika muundo wa kisasa au kufanywa ndogo zaidi. Picha ambazo zingeokoa chini ya 4 KiB haziorodheshwi, kwa hiyo orodha fupi ni ishara nzuri.

Kisha tazama ukurasa mwenyewe kwenye simu. Kingo kali, maandishi ndani ya picha na rangi za ngozi ndipo matatizo ya ubanaji huonekana kwanza.

Ikiwa tovuti yako huongeza picha kila siku, kwa mfano kupitia mfumo wa kusimamia maudhui au duka la mtandaoni, zibane wakati wa kupakia au kuchapisha badala ya kwa mkono. API ya Bitinz kwa wasanidi programu hupokea picha kupitia HTTP na kurudisha kiungo cha faili iliyobanwa, hivyo inaweza kuendeshwa kutoka kwenye skripti au mchakato wa ujenzi (build pipeline). Kila akaunti ina kiwango cha bure cha kila mwezi.

1. 01Badilisha vipimo vya kila picha hadi takriban mara mbili ya ukubwa wa kuonyeshwa.
2. 02Tumia JPG au WebP kwa picha za kamera, na PNG au WebP kwa michoro na uwazi.
3. 03Bana kwa kiwango cha Uwiano, na ujaribu Upeo kwa picha kubwa zaidi.
4. 04Linganisha matokeo na asili kabla ya kuweka faili mpya badala ya asili.
5. 05Weka width na height, chelewesha upakiaji wa picha zilizo chini ya skrini ya kwanza, na usiwahi kuchelewesha upakiaji wa picha kuu.
6. 06Kagua ukurasa tena kwa PageSpeed Insights.

Unapakia picha mahali pengine zaidi ya tovuti yako mwenyewe? Kila jukwaa lina sheria zake: tazama mahitaji ya ukubwa wa picha kwa barua pepe na maduka ya mtandaoni.