Imaginile de fundal sunt folosite de obicei in locuri care au text sau continut deasupra. Poate fi un slider, o imagine prezentata a postarii de pe blog sau o imagine in sectiune de top a unui site.
Sunt sanse ca acestea sa se incarce lent si pot afecta experienta utilizatorului din cauza cresterii Largest Contentful Paint (LCP) daca se afla desupra partii inferioare a site-ului care nu se vede atunci cand site-ul se incarca prima data.
De ce sunt imaginile de fundal lente?
Solicitari cu prioritate scazuta
In cazul in care imaginea se afla intr-un fisier CSS extern, aceasta va fi descarcata numai dupa descarcarea si analizarea fisierului CSS si atunci cand clasa CSS este utilizata efectiv in HTML.
Acest lucru se poate reflecta in indicatorul principal al datelor vitale web, cum ar fi Largest Contentful Paint (LCP), daca aceste imagini de fundal se afla in partea superioara a site-ului.
Daca este o eticheta IMG, imaginea este descarcata instantaneu atunci cand HTML este analizat.
Greu de incarcat sau preincarcat lent
Etichetele IMG pot profita de incarcarea lenta nativa a browserului, care nu necesita JavaScript.
Puteti incarca lent imaginile de fundal daca acestea sunt in HTML ca stil inline. Plugin-uri precum FlyingPress le detecteaza automat si le incarca lenes.
Cu toate acestea, daca imaginea de fundal se afla intr-un fisier CSS extern sau intern, lucrurile vor deveni dificile, deoarece nu ne putem da seama daca un element HTML are sau nu o imagine de fundal.
Nota: Daca utilizati FlyingPress, acesta are o clasa de ajutor „lazy-bg” pentru a incarca lent imaginile de fundal chiar si in interiorul fisierelor CSS.
Cum sa optimizezi imaginile de fundal pentru viteza
Utilizati eticheta IMG cu object-fit
Imaginile de fundal sunt utilizate in mod obisnuit in sliderele cu text/continut in centru sau daca aveti un div fix si doriti sa plasati o imagine care sa „umple” fara a redimensiona zona (background-size: cover).
Anterior era foarte greu de realizat acest lucru cu tag-urile IMG. Asa ca utilizarea imaginilor de fundal avea sens.
Cu toate acestea, exista o noua proprietate CSS object-fit: cover care ofera cu acelasi beneficiu. Suportul pentru browsere este destul de bun.
Preload background image Pre-incarca imaginile din background
Indiferent daca utilizati o imagine de fundal sau o eticheta IMG, daca imaginea se afla in partea superioara a site-ului, pre-incarcati imaginea respectiva. Pre-incarcarea ii spune browserului sa descarce imaginea respectiva cu prioritate ridicata.
IMG tag cu ‘display: none’
Imaginile de fundal pot fi utilizate impreuna cu background-color, background-repeat, background-attachment, background-position si background-blend-mode etc.
Asadar, in unele situatii, este mai bine sa folositi background-image in loc de o eticheta IMG pentru a profita de alte proprietati CSS.
Puteti adauga o eticheta IMG normala cu display: none. Acest lucru ii va spune browserului sa descarce imaginea imediat, dar sa o afiseze folosind o imagine de fundal.
Adauga imaginii receptive (responsive)
Adaugati srcset si dimensiuni la imaginile normale pentru a furniza imagini responsive in functie de dispozitiv:
<img srcset=" titlu-imagine-320w.jpg 320w, titlu-imagine-480w.jpg 480w, titlu-imagine-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="titlu-imagine-800w.jpg" alt="Titlu Descriptiv Imagine">
In mod similar, puteti face acelasi lucru pentru imaginile de fundal folosind image-set:
In caz contrar, veti livra aceeasi imagine mare pentru un MacBook de 2880px si un iPhone 6s de 750px!
Imagine de fundal in linie (inline) in HTML
Daca imaginea de fundal se afla intr-un fisier CSS extern, introduceti-o in HTML. In acest fel, browserul nu trebuie sa astepte sa descarce fisierul CSS si apoi sa descarce imaginea.
