Optimizarea imaginilor: viteză, trafic din Google Images, accesibilitate

Imaginile fac două lucruri contradictorii: îmbunătățesc experiența și încetinesc site-ul. Optimizarea lor înseamnă să păstrezi primul efect eliminându-l pe al doilea - plus trafic din căutarea de imagini, pe care majoritatea îl ignoră complet.

Formatul: nu mai e JPEG

Ghidurile mai vechi recomandă JPEG pentru fotografii, PNG pentru transparență, GIF pentru animații. Recomandarea e depășită.

Standardul actual:

• WebP - alegerea implicită. Fișiere cu 25–35% mai mici decât JPEG la aceeași calitate vizuală, cu suport pentru transparență și animație. Suportat de toate browserele relevante.
• AVIF - și mai mic, cu 20–30% sub WebP. Suport foarte bun astăzi, dar codarea e mai lentă.
• SVG - pentru logo-uri, pictograme și orice e desen vectorial. Se scalează perfect, la câțiva kilobytes.
• JPEG / PNG - doar ca variantă de rezervă.

Trecerea de la JPEG la WebP e, singură, una dintre cele mai mari îmbunătățiri de viteză pe care le poate obține un site cu multe imagini.

Dimensiunea: cea mai frecventă greșeală

O imagine de 4000×3000 pixeli afișată într-un spațiu de 800 de pixeli e o risipă de aproape 95% din date. Se întâmplă în majoritatea site-urilor pe care le auditam.

Ce faci:

• Redimensionează la dimensiunea maximă afișată efectiv. Cu o marjă pentru ecranele de înaltă rezoluție - dublu, nu de cinci ori.
• Servește dimensiuni diferite pentru dispozitive diferite, prin atributele srcset și sizes. Telefonul nu trebuie să descarce imaginea pentru desktop.
• Specifică lățimea și înălțimea în cod. Fără ele, pagina „sare” în timpul încărcării - exact ce măsoară indicatorul CLS din Core Web Vitals.

Încărcarea amânată, cu o excepție importantă

Atributul loading="lazy" amână încărcarea imaginilor până când vizitatorul ajunge aproape de ele. E o îmbunătățire evidentă pentru pagini lungi.

Excepția care contează: nu îl pune pe imaginea principală, cea vizibilă imediat. Aceea e, de obicei, elementul măsurat de LCP - indicatorul principal din Core Web Vitals. Amânând-o, îți strici scorul exact acolo unde contează.

Numele fișierului

Un nume descriptiv ajută Google să înțeleagă subiectul înainte să analizeze imaginea.

• Bine: canapea-coltar-gri-textil.webp
• Rău: IMG_20240315_094523.jpg

Cuvinte separate prin cratime, fără diacritice, fără spații.

Textul alternativ

Atributul alt descrie imaginea pentru cine nu o poate vedea: cititoarele de ecran și motoarele de căutare.

Rolul principal e accesibilitatea. Beneficiul SEO e real, dar secundar - nu e o zonă în care să înghesui cuvinte-cheie.

Cum scrii unul bun:

• Descrie ce se vede, concret: „Canapea colțar gri, cu șezlong pe partea stângă, într-un living luminos”.
• Nu începe cu „imagine cu” - cititorul de ecran anunță deja că e o imagine.
• Scurt și complet - o propoziție, de regulă.
• Lasă-l gol (alt="") pentru imaginile pur decorative. E corect, nu o omisiune.
• Pentru produse, include detaliile care contează: model, culoare, material.

Traficul din Google Images

Partea ignorată aproape complet. Pentru unele domenii - mobilier, modă, decorațiuni, construcții, rețete - căutarea de imagini aduce trafic real cu intenție de cumpărare.

Ce ajută:

• imagini proprii, nu fotografii de stoc pe care le au și alte treizeci de site-uri;
• text relevant în jurul imaginii - contextul paginii contează;
• date structurate de produs, cu imaginea inclusă;
• un sitemap dedicat imaginilor, pentru site-uri cu multe.

Poți verifica în Search Console, filtrând performanța după tipul de căutare „Imagine”. Multe site-uri descoperă acolo trafic despre care nu știau.

Verificarea rapidă

1. Deschide pagina cea mai importantă și verifică greutatea imaginilor. Peste 200 KB pentru o imagine obișnuită e prea mult.
2. Verifică formatul. Dacă e JPEG sau PNG peste tot, ai o îmbunătățire ușoară disponibilă.
3. Verifică dacă imaginea principală are loading="lazy". Dacă da, scoate-l.
4. Verifică dacă imaginile au lățime și înălțime declarate.
5. Verifică textele alternative pe primele zece imagini.

Detalii și exemple în ghidul despre optimizarea imaginilor.