Picha Zinazojirekebisha kwa srcset na sizes

Chagua muundo sahihi

Ubadilishaji wa azimio (resolution switching) huhifadhi muundo wa picha na kutoa upana kadhaa wa faili. Huu ndio muundo wa kawaida kwa picha za bidhaa, mchoro wa makala, na kadi. Tumia vipengele vya width kama 480w au 1200w wakati upana uliotengenezwa ukibadilika na muundo. Nambari ni upana wa kweli wa faili kwa pikseli, si lengo la simu au amri ya CSS.

Ubadilishaji kwa wiani (density switching) hutoa zaidi ya pikseli za chanzo kwa ajili ya nafasi ya CSS iliyowekwa, ili skrini yenye wiani wa juu iwe na picha iliyochorwa vyema. Vigezo vyake ni 1x, 1.5x, au 2x, na inafaa kwa nembo au ikoni iliyoko mara zote, kwa mfano, 160 CSS pixels kwa upana. Usichanganye vigezo vya width na density kwenye srcset moja.

Elewa jinsi sizes inavyoongoza uchaguzi

Kwa vigezo vya width, kivinjari kinatathmini sizes kabla ya kupakua picha. Kila kipengele kinaweka hali ya media inayoweza kuonekana pamoja na urefu (length). Hali inayokamilisha kwanza hutoa source size; urefu wa mwisho usio na masharti ni nafasi ya kurudi nyuma (fallback). sizes ni dalili ya uchaguzi, sio sheria ya CSS.

Kivinjari kinalinganisha size hiyo ya chanzo na upana wa wagombea kubaini wiani wa ufanisi, kisha kinaweza kuzingatia wiani wa kuonyesha, usanikanaji (zoom), na hali ya mtandao. Haisababishi kuchagua jina la faili karibu kabisa kwa hisabati kila mara. Toa wagombea wa kweli na makadirio ya nafasi yanayokubalika; uchaguzi wa kivinjari unabaki kuwa uamuzi wa wakala wa mtumiaji.

Toa wagombea kutokana na muundo halisi

Tengeneza orodha ya sehemu, si kurasa. Hero, mchoro wa makala, gallery ya bidhaa, thumbnail ya utafutaji, na nembo ya footer mara nyingi zina upana tofauti za nafasi. Kwa kila moja, rekodi upana mwembamba na upana wa juu uliowekwa, uwiano wa sura (aspect ratio), tabia ya kukata (crop behavior), na uonekano kwenye skrini ya mwanzo.

Tengeneza upana kuzunguka anuwai ya nafasi ya sehemu, na chaguo kubwa zaidi wakati undani unathibitisha utoaji kwa wiani wa juu. Faili zinazofanana karibu hutoa ugumu wa ujenzi na cache; tu faili ndogo kabisa na kubwa kabisa zinalazimisha mkatano. Jaribu URL zilizotengenezwa badala ya kudhani mabadiliko ya picha yanafanya kazi.

Ikeep fallback ya src ambayo ni halali pamoja na thamani za width na height zinazolingana na uwiano uliotolewa. Zinahifadhi nafasi lakini hazizuizi CSS ya responsive kubadilisha vipimo vya mwisho.

Tumia picture kwa ajili ya uongozi wa sanaa (art direction)

Uongozi wa sanaa hubadilisha muundo wa picha, sio ukubwa wa faili tu. Picha ya mandhari upana inaweza kuhitaji kukatwa kwa uzito zaidi kwa skrini nyembamba ili mhusika wake abaki kuonekana. Elementi ya picture inaweza kutoa vyanzo maalum kwa media, ikifuatiwa na img moja ya fallback. Kivinjari kinazingatia media, type, na taarifa za srcset za kila source; img inabeba maandishi mbadala (alternative text), vipimo, na tabia ya fallback.

Andaa kila kukatwa kwa kupitia za uhariri na upitishaji wa ufikikaji. Kukatwa kwa simu kunaweza kuondoa undani wa bidhaa au mtu aliyeelezwa katika maandishi mbadala. Weka alt kwenye img na elezea taarifa au kazi ambayo picha inatoa. Tumia alt="" tu kwa picha za mapambo kabisa; kwa picha iliyo kwenye kiungo au kitufe, elezea kitendo badala ya muonekano. Usilete picture wakati kukatwa hakujabadilika: srcset ya msingi ya upana ni rahisi zaidi.

Epuka kupakia ghali na makosa ya markup

Taka ya kawaida ni kunakili sizes="100vw" kwa kila picha. Hii inaweza kufaa kwa mchoro mwembamba wa upana kamili lakini si kwa kontena iliyo na mipaka au kadi ya desktop. Kushindwa kinyume ni sizes zilizopitwa na wakati baada ya kubuni upya. Badilisha CSS na sizes pamoja.

Usiwezeke kupakia kwa lazy picha muhimu katika maudhui yanayoonekana mara moja. Miongozo inapendekeza kupakia kwa lazy picha zilizo chini ya the fold na kuweka hero inayoonekana tayari. Fetch priority inaweza kuinua picha muhimu kweli, lakini kanuni za juu za kipaumbele au preload kwa wigo mpana zinaweza kuathiri utendaji. Usitegemee majina ya faili au matokeo ya cache kama ushahidi.

Jaribu ombi, kukatwa, na ukarabati

Jaribu kurasa za uwakilishi kwa upana wa mabadiliko ya muundo, ikijumuisha tu juu na chini ya breakpoint ya gridi. Jumuisha mipangilio yenye wiani wa juu, desktop mpana, na hali zinazobadilisha nafasi. Thibitisha vipimo vilivyoonyeshwa, kukatwa, maandishi mbadala, na ukali wa kuona.

Katika Chrome DevTools, fungua Network, reload ukiwa umewasha cache-disabled au tumia Empty Cache And Hard Reload, chuja maombi ya picha, na chunguza URL, ukubwa wa kuhamisha (transfer size), vichwa (headers), initiator, na mipangilio ya muda. Punguza mtandao (throttle) ili kufichua kazi za kuchelewa au zisizohitajika. Rekodi viewport, device scale factor, nafasi, mgombea, bytes zilizohamishwa, na matokeo yaliyotarajiwa.

Wakati template, breakpoint, CDN, au pipeline ya mali inabadilika, fanya hili kuwa mlango wa uzinduzi. Rekebisha kwa umbali mdogo: rekebisha sizes, rekebisha kigezo, tengeneza tena kukatwa, rejesha fallback, au ondoa preload isiyo ya lazima. Jaribu tena kwa upakiaji upya bila cache.

Tumia kama udhibiti wa ustahimilivu wa SIU

Picha zinazojirekebisha hupunguza uhamisho usiohitajika lakini haiwezi kuhakikisha ombi limefanikiwa. Makosa ya asili, mabadiliko yasiyotegemewa ya mchakato, mwenyeji wa mtu wa tatu, na hitilafu za CDN zinahitaji mipango ya kuendelea na urejesho tofauti.

Kwa SIU, tumia rekodi za majaribio kukamata regression za utoaji mapema, kubaini template inayohusika au kanuni ya uongofu, na kufanya marekebisho madogo yanayo salama kabla ya uzinduzi. Wawekee pamoja na upigaji wa upatikanaji kabla ya uzinduzi na mipango ya rollback.