Tottimizza l-immaġini tal-websajt: WebP, AVIF u lazy loading

Fil-biċċa l-kbira tal-websajts li nanalizzaw, l-immaġini huma l-ewwel kawża ta' dewmien: jiżnu aktar mill-bqija kollha tal-paġna flimkien. L-aħbar it-tajba hija li tottimizza l-immaġini tal-websajt huwa l-intervent tal-performance bl-aħjar proporzjon bejn sforz u riżultat: formati moderni bħal WebP u AVIF, dimensjonijiet korretti u lazy loading huma biżżejjed biex jittrasformaw il-ħinijiet tat-tagħbija.

Għaliex l-immaġini jiżnu daqshekk

Il-problema titwieled kważi dejjem 'il fuq fil-katina: ritratti mtellgħin fis-CMS kif joħorġu mill-kamera jew mill-ismartphone, b'riżoluzzjonijiet enormi meta mqabbla mal-ispazju li se jokkupaw fil-paġna, f'formati maħsubin għall-istampar aktar milli għall-web. Il-browser iniżżel kollox, anke l-pixels li qatt mhu se juri.

Il-konsegwenzi mhumiex biss estetiċi. Il-metriċi tal-esperjenza tal-utent li Google juża fil-valutazzjoni tal-paġni jintlaqtu direttament mill-immaġini: l-akbar element tal-ewwel skrin spiss huwa ritratt, u sakemm ma jasalx il-paġna tidher vojta. Fuq mobile, b'konnessjonijiet varjabbli, id-differenza bejn websajt kurata u waħda traskurata jagħmluha proprju l-kilobytes tal-immaġini.

WebP u AVIF: x'tagħżel

WebP u AVIF huma ż-żewġ formati moderni li jissostitwixxu l-JPEG u l-PNG għall-użu fuq il-web. Fil-qosor:

• WebP huwa l-kompromess affidabbli: jikkomprimi aħjar mill-JPEG bl-istess kwalità perċepita, jappoġġja t-trasparenza bħall-PNG u huwa mmaniġġjat mill-browsers attwali kollha;
• AVIF ġeneralment jikkomprimi saħansitra aħjar, speċjalment fil-kwalitajiet medji u baxxi, u issa huwa appoġġjat sew ma' kullimkien; il-kodifika hija aktar bil-mod, ħaġa li tgħodd biss jekk tiġġenera ħafna immaġini fil-mument.

L-istrateġija li nadottaw normalment: AVIF fejn il-fluss tax-xogħol jiġġenerah mingħajr frizzjoni, WebP bħala format prinċipali jew ta' riżerva, u l-oriġinal JPEG jew PNG bħala fallback ulterjuri. Fl-HTML dan isir bl-element picture, li jħalli f'idejn il-browser l-għażla tal-aħjar format li jaf jaqra; fuq is-CMS l-aktar imxerrdin jeżistu plugins u servizzi li jikkonvertu u jservu l-formati moderni awtomatikament, mingħajr ma jmissu l-librerija tal-media.

Twissija: il-format modern ma jissostitwixxix il-kompressjoni. Immaġini esportata ħażin tibqa' tqila anke f'AVIF. Irregola l-kwalità sal-minimu li l-għajn taċċetta: għar-ritratti sekondarji tista' tinżel sew qabel ma tinnota d-differenzi.

Qabel il-format: id-dimensjonijiet it-tajbin

L-akbar qligħ, qabel saħansitra l-format, jiġi milli sservi immaġini tad-daqs it-tajjeb għall-iskrin li jħares lejhom. Telefon m'għandux bżonn l-immaġini ppreparata għal monitor tal-iskrivanija.

L-għodod huma standard: l-attributi srcset u sizes jippermettu li tiddikjara aktar minn verżjoni waħda tal-istess immaġini, u l-browser jagħżel dik adattata. Is-CMS moderni jiġġeneraw il-varjanti waħedhom mat-tlugħ; irid però jiġi vverifikat li t-tema tużahom tassew, għax spiss jinstabu temi li jgħabbu l-oriġinal ikun x'ikun.

Żewġ drawwiet li jevitaw il-problemi:

• tella' fis-CMS immaġini diġà ridimensjonati għal massimu raġonevoli għal-layout tiegħek, mhux il-files oriġinali tal-kamera;
• indika dejjem il-wisa' u l-għoli (jew il-proporzjonijiet) fl-HTML, hekk il-paġna ma taqbiżx waqt it-tagħbija.

Lazy loading magħmul sew

Il-lazy loading jipposponi t-tagħbija tal-immaġini barra mill-iskrin sa meta l-utent joqrob lejhom bl-iskroll. Illum hija funzjoni nattiva tal-browsers: biżżejjed l-attribut loading issettjat fuq lazy, mingħajr libreriji addizzjonali.

L-iżball x'tevita huwa li tapplikah ma' kollox: l-immaġini prinċipali fil-quċċata tal-paġna qatt m'għandha titgħabba lazy, għax hija l-ewwel ħaġa li l-utent irid jara u li ddewwimha tgħarraq proprju l-metrika li tixtieq ittejjeb. Ir-regola hija sempliċi: l-immaġini viżibbli mal-ftuħ jitgħabbew mill-ewwel, il-bqija kollha jistgħu jistennew.

Biex tikkompleta l-istampa, żid CDN, li sservi l-files min-node l-eqreb lejn il-viżitatur, u politika ta' cache bi skadenzi twal għar-riżorsi statiċi: l-immaġini mniżżla darba m'għandhiex terġa' tintalab ma' kull żjara.

Kif tivverifika r-riżultati

Tottimizza mingħajr ma tkejjel ifisser taqta' bl-addoċċ. Iċ-ċiklu ta' kontroll li nagħmlu fuq kull proġett:

1. ittestja l-paġni prinċipali (il-home, paġna ta' kategorija, paġna tal-prodott jew artiklu) bl-għodod tal-analiżi tal-performance disponibbli bla ħlas online, qabel u wara l-interventi;
2. ħares lejn il-piż totali tal-immaġini għal kull paġna u kemm-il talba titlaq mal-ewwel tagħbija;
3. iċċekkja fir-rapport liema immaġini jiġu segnalati bħala kbar iżżejjed jew f'formati antikwati;
4. irrepeti t-test minn mobile, li huwa fejn il-problemi jidhru l-ewwel.

Fuq il-websajts u eCommerce li nibnu, din il-pipeline hija ssettjata mill-bidu: konverżjoni awtomatika fil-formati moderni, varjanti responsive iġġenerati mis-CMS u lazy loading selettiv. Ir-riżultat huwa li l-klijent itella' r-ritratti u s-sistema tagħmel il-bqija, mingħajr ma tiddependi mid-dixxiplina ta' min jippubblika.

Il-websajt tiegħek titgħabba bil-mod minħabba l-immaġini?

Jekk il-paġni tal-websajt tiegħek idumu wisq biex jinfetħu, x'aktarx li parti kbira mill-problema tissolva fi ftit ħin. Nibnu u nottimizzaw websajts u eCommerce b'pipelines tal-immaġini awtomatizzati. Ibbukkja call bla ħlas: nanalizzaw il-paġni tiegħek u ngħidulek kemm hemm marġni ta' veloċità.