Cand punem o imagine in website in general folosing formatele JPG, PNG si GIF, dar acestea nu sunt singurele formate ce pot fi introduse.
Recent, WebP, un format creat de catre Google, a primit in sfarsit suport pe Safari 14 ceea ce inseamna ca poate fi folosit pe toate browserele moderne. Pe langa acesta mai avem inca un format care are potential mare si cu suport destul de bun in browsere, AVIF (Chrome, opera, Samsung, Firefox). Alte formate cunoscute ce ar putea fi introduse in browsere curand sunt HEIF si JPEG XL, iar WebP 2 este inca in dezvoltare si nu stim cand va fi finalizat.
Motivul principal pentru care se doreste a fi folosite aceste formate noi este pentru ca pot reduce dimensiunea pozelor fara a fi afectata calitatea lor (fie deloc fie insesizabil). AVIF promite dimensiuni incredibil de mici, dar uneori WebP poate avea rezultate putin mai bune asa ca incearca sa alegi varianta care iti place cel mai mult (calitatea fiind uneori subiectiva) sau care are dimensiunea cea mai mica.
Pentru a pastra compatibilitea cu browserele ce inca nu supporta aceste formate se poate folosi elementul <picture> in HTML sau “image-set” in CSS. Intai se va incerca incarcarea formatului nou, iar daca nu exista suport se va trece pe cel vechi.
In HTML vom folosi urmatorul cod:
<picture>
<source srcset=”./poza.webp” type=”image/webp”>
<img src=”./poza.jpg” >
</picture>
Pentru CSS se va specifica in codul sau tipul MIME alaturi de numele pozei:
.clasa{
background-image: image-set(
‘poza.webp’ type(‘image/webp’),
‘poza.jpg’ type(‘image/jpeg’)
)
}
Imaginile comparatiile before and after de mai jos au fost facute folosind Squoosh app creat de catre Google pentru compresia de poze. Pozele JPG au folosit compresia MozJPEG cu o calitate de 75 si 30, WebP foloseste calitatea 75 si 30 cu efort 4 si AVIF foloseste calitatea 30 cu efort 4. Poza originala are 2,4MB.
[twenty20 img1=”4458″ img2=”4456″ direction=”horizontal” offset=”0.5″ width=”100%” before=”Before” after=”After”]
2. WebP 75 – 131KB
[twenty20 img1=”4458″ img2=”4452″ direction=”horizontal” offset=”0.5″ width=”100%” before=”Before” after=”After”]
3. JPG 30 – 112KB
[twenty20 img1=”4458″ img2=”4454″ direction=”horizontal” offset=”0.5″ width=”100%” before=”Before” after=”After”]
4. WebP 30 – 70KB
[twenty20 img1=”4458″ img2=”4450″ direction=”horizontal” offset=”0.5″ width=”100%” before=”Before” after=”After”]
5. AVIF 30 – 49KB (incompatibil cu Safari si este necesar un flag in Firefox)
[twenty20 img1=”4458″ img2=”4448″ direction=”horizontal” offset=”0.5″ width=”100%” before=”Before” after=”After”]
La doar 49KB, AVIF ofera un rezultat exceptional pentru imaginea folosita. WebP la randul lui ofera o compresie mult mai buna decat venerabilul JPG. Rezultatele pot fi diferite in functie de poza originala, dar potentialele salvari in dimensiuni ale pozelor pot ajuta la incarcari mult mai rapide ale website-urilor fara sa sacrificam compatibilitatea in majoritatea cazurilor. Dar dupa cum se observa mai sus, exista situatii in care AVIF inca nu poate fi folosit, precum incarcarea imaginilor prin plugin-uri unde nu poti adauga alternative si esti fortat sa folosesti WebP sau JPG.
