WebP și AVIF sunt formate de imagine făcute pentru web. La aceeași calitate vizibilă, un WebP are de obicei cu 25–35% mai puțin decât un JPEG, iar un AVIF, adesea, și mai puțin. Pe o pagină cu zece fotografii, diferența se simte direct la încărcare și la LCP (vezi Core Web Vitals pe înțeles: LCP, INP și CLS).
Ce vei reuși
- alegi formatul potrivit pentru fiecare imagine;
- faci imaginile la mărimea și calitatea potrivite;
- le pui în pagină astfel încât să se vadă în orice browser.
Ce format alegi
| Imaginea | Format |
|---|---|
| fotografie | WebP sau AVIF; JPEG doar ca rezervă |
| logo, pictograme, desene simple | SVG, dacă îl ai; altfel PNG sau WebP fără pierderi |
| captură de ecran cu text | PNG sau WebP fără pierderi; la JPEG, textul iese pătat |
| imagine cu fundal transparent | WebP sau AVIF (ambele au transparență); PNG ca rezervă |
| animație | un video scurt (MP4 sau WebM) în loc de GIF |
Suportul în browsere: WebP merge în toate browserele folosite azi. AVIF merge în versiunile actuale de Chrome, Edge, Firefox și Safari; un iPhone sau un Mac vechi, neactualizat, poate să nu-l afișeze. De aceea, la AVIF pui și o rezervă (pasul 6).
Pașii
A. Pregătești imaginea
- Micșorează la lățimea de care ai nevoie. O poză afișată pe 800 de pixeli are nevoie de cel mult 1600 (pentru ecranele de înaltă densitate), nu de 6000 cât scoate telefonul.
- Exportă în WebP sau AVIF. Programele de editare foto actuale au WebP la Export sau Salvează ca. Online, fără să instalezi nimic, poți folosi https://squoosh.app: e gratuit, de la Google, iar imaginea se prelucrează în browserul tău, nu se urcă pe un server.
- Alege calitatea. Pentru fotografii, o calitate în jur de 75–80 la WebP și 50–65 la AVIF arată de obicei la fel ca originalul. Compară cele două variante la mărimea reală, nu mărite.
- Verifică mărimea fișierului. Ca reper: o fotografie pe toată lățimea paginii, în jur de 150–300 KB; o poză în text, sub 150 KB; o miniatură, sub 50 KB.
B. O pui în pagină
Un singur format, WebP — merge peste tot, deci e suficient:
<img src="/img/sala.webp" width="1600" height="900" alt="Sala de tratament a cabinetului">widthșiheightspun browserului proporția, ca să-i rezerve locul și pagina să nu sară (CLS).- AVIF cu rezervă — browserul îl alege pe primul pe care îl înțelege:
<picture> <source srcset="/img/sala.avif" type="image/avif"> <source srcset="/img/sala.webp" type="image/webp"> <img src="/img/sala.jpg" width="1600" height="900" alt="Sala de tratament a cabinetului"> </picture> - Imaginile de mai jos în pagină primesc
loading="lazy", ca să se descarce abia când ajunge vizitatorul la ele. Prima imagine mare, din capul paginii, nu: ea trebuie să vină imediat. Îi poți adăugafetchpriority="high".
C. Le urci pe server
- Urcă fișierele în folderul site-ului, din Enhance (fila „Files”, vezi Urcarea unui site cu File Manager) sau prin FTP (vezi FTP criptat (FTPS) cu FileZilla: cont și date de conectare).
- Dacă un fișier
.avifse descarcă în loc să se afișeze, adaugă în.htaccess, dinpublic_html:AddType image/avif .avif AddType image/webp .webp
La WordPress, formatele și setările de imagini sunt în Imaginile în WordPress: mărime, format și încărcare.
Dacă ceva nu merge
- Imaginea nu apare deloc într-un browser. Browserul nu cunoaște formatul. Folosește
<picture>cu rezervă JPEG sau PNG (pasul 6). - Imaginea apare pixelată sau cu pete. Calitatea e prea mică. Exportă din nou, cu calitatea mai mare cu 5–10 puncte.
- Fișierul WebP e mai mare decât JPEG-ul. Se întâmplă la imagini foarte mici sau deja foarte comprimate. Păstrează varianta mai mică.
- Imaginea apare întinsă sau turtită.
widthșiheightdin cod nu au aceeași proporție ca fișierul. Pune valorile reale ale imaginii.