Jinsi ya kurekebisha uwasilishaji wa picha katika PageSpeed Insights

1. 01Fungua ukurasa wenye tatizo katika PageSpeed Insights au Lighthouse. Chagua ripoti ya simu au kompyuta unayotaka kuboresha, fungua sehemu ya uwasilishaji wa picha na uandike URL iliyotiwa alama na badiliko lililopendekezwa.
2. 02Tafuta picha kwenye ukurasa. Katika zana za wasanidi za kivinjari, linganisha picha iliyopakuliwa na vipimo vyake vya kuonyesha ukizingatia msongamano wa skrini. Kagua chanzo kilichochaguliwa, si asili iliyo kwenye maktaba ya midia pekee.
3. 03Ikiwa picha inayotolewa ina pikseli nyingi mno, rekebisha kwanza vipimo vinavyojirekebisha au mipangilio ya mandhari. Ikiwa vipimo vinafaa, linganisha kubana au umbizo mbadala linaloungwa mkono.
4. 04Andaa nakala yenye vipimo vinavyohitajika katika kihariri picha. Tumia kibana picha cha Bitinz kwa faili zinazofaa na ukague maandishi, kingo, uwazi na mpito wa rangi kabla ya kubadilisha chochote.
5. 05Chapisha mbadala au badiliko la kiolezo. Hakikisha ukurasa unaomba picha mpya badala ya toleo la zamani lililohifadhiwa kwenye kache, kisha rudia ripoti kwa mpangilio uleule wa kifaa.

Chrome hukadiria punguzo kutokana na ukubwa wa kupakua na uwiano mzuri wa baiti kwa pikseli wa umbizo. Picha zenye punguzo linalokadiriwa chini ya 4 KiB hazitiwi alama. Hiki ni kizingiti cha ripoti, si ukubwa wa juu unaopendekezwa.

Lighthouse 13 ilibadilisha ukaguzi wa zamani wa picha kwa taarifa hii; Lighthouse 12 ilikuwa tayari imefanya taarifa hizi mwonekano chaguomsingi wa ripoti. Onyo la umbizo, vipimo vingi mno na uhuishaji mzito vinaweza kuhitaji suluhisho tofauti. Kwa mtiririko mpana wa uchapishaji, fuata jinsi ya kubana picha za tovuti.

• WordPress: kagua ukubwa wa picha uliochaguliwa katika kizuizi au mandhari na msimbo halisi wa srcset na sizes. WordPress huzalisha chaguo za picha zinazobadilika, lakini kiolezo maalumu au maelezo yasiyo sahihi ya mpangilio bado yanaweza kutoa ukubwa usiofaa. Kurekebisha asili pekee kunaweza kuacha nakala zilizozalishwa zikiendelea kutumiwa.
• Shopify: picha za duka tayari huboreshwa kupitia CDN ya Shopify, ikiwemo uchaguzi wa umbizo. Shopify inasema kubana mwenyewe kabla ya kupakia si lazima. Kwa onyo, kagua upana unaoombwa na mandhari na msimbo unaobadilika badala ya kuharibu chanzo mara kwa mara. Msanidi mandhari anaweza kukagua image_url na image_tag.
• Next.js: tumia mipangilio inayobadilika ya kipengele cha Image na upe sizes thamani inayolingana na mpangilio halisi, hasa kwa fill. Bila thamani inayofaa, picha nyembamba inaweza kuchukuliwa kuwa pana kama eneo la kuonyesha na chaguo kubwa kupakuliwa. Kubadili ubora pekee hakutatui kutolingana huko kwa mpangilio.

Hifadhi asili inayoharirika. Kwa picha zinazotolewa moja kwa moja, linganisha ukubwa halisi na mwonekano wa faili iliyoandaliwa; ulinganisho wa JPG, PNG na WebP husaidia kuchagua. Bitinz haibadili vipimo vya picha. Kubadili kwenda WebP kunaweza kuongeza ukubwa, hivyo hifadhi toleo linalofaa ukurasa kweli.

Kwa uchapishaji unaorudiwa, API ya wasanidi inaweza kuchakata faili zinazofaa kwa akaunti na mgao wa kila mwezi. Hairekebishi msimbo wa mandhari au mpangilio unaobadilika. Kagua ukurasa unaotolewa tena baada ya kuunganisha otomatiki.

• URL iliyotiwa alama inalingana na picha na toleo ulilobadili.
• Kivinjari huchagua chanzo kinachofaa kwa ukubwa tofauti wa skrini.
• Kubana huhifadhi maelezo muhimu, uwazi na mpito laini wa rangi.
• Picha kuu inayoonekana haicheleweshwi na mpangilio usiofaa wa kupakia kwa kuchelewesha.
• Ripoti mpya hutumia mpangilio uleule wa kifaa; mwonekano halisi na upakiaji wa ukurasa pia vimekaguliwa.