Cum sa optimizezi imaginile de fundal pentru viteza

Cum sa optimizezi imaginile de fundal pentru viteza

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.

img object fit

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.

pre incarca bg

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.

img inline style

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:

bg img 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.

inline bg imagine html

Ti-a placut acest articol?
DaNu
Recomanda acest articol
Facebook
Twitter
WhatsApp
Telegram
Email

Te-ar putea interesa si ...

< 1 minut de citit

Perfect Pixel a dezvoltat recent un modul WordPress care vine in ajutorul celor care doresc sa elimine diacriticele din continutul in limba romana. Acest modul este compatibil cu editorul clasic ...

4 minute de citit

Adresa URL de conectare WordPress Fara indoiala, stiti cat de importanta este securitatea pentru site-ul tau WordPress. Probabil ati auzit o multime de sfaturi cu privire la acest subiect – ...

Comentarii

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Postari Recente

Agentie Web
Hosting Wordpress
Reclama & Publicitate

Pentru reclama sau articole scrise, va rugam sa ne contactati pe adresa de email contact@wp-plugins.ro sau prin formularul de contact