Scris de Marius Chiriac

Cum sa folosesti noile formate de imagini pentru web

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.

1. JPG 75 – 256KB

2. WebP 75 – 131KB

3. JPG 30 – 112KB

4. WebP 30 – 70KB

5. AVIF 30 – 49KB (incompatibil cu Safari si este necesar un flag in Firefox)

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.

Mai multe articole

INOVEO a scris

Evaluarea brandului

Stiu, e perioada Galelor, a Premiilor, a Bilanturilor de final de an, a Petrecerilor de Craciun… dar scriu ce ma inspira din munca mea de zi cu zi… Dupa filmarile de saptamana trecuta la INOVEO, [...]

Read More... from Cum sa folosesti noile formate de imagini pentru web

Citeste tot articolul

INOVEO a scris

Comunicarea fluenta dintre departamentele de Marketing si Financiar

Adesea ni se intampla sa avem nevoie de limbi straine… Sau limbaj strain in cadrul aceleiasi limbi, daca vorbim de business. Da, in bugetare e nevoie sa fii poliglot. Comunicarea fluenta dintre departamentele de Marketing [...]

Read More... from Cum sa folosesti noile formate de imagini pentru web

Citeste tot articolul

INOVEO a scris

Avantajele si dezavantajele unui website de tipul One Page

Site-urile sunt o esentiale pentru orice afacere sau proiect personal. Site-urile de tipul “one page” (o pagina), au devenit foarte populara in ultimii ani. Dar care sunt avantajele si dezavantajele unui astfel de site? Sa [...]

Read More... from Cum sa folosesti noile formate de imagini pentru web

Citeste tot articolul

INOVEO a scris

De ce culorile alese arata diferit in print fata de online

Culorile joaca un rol crucial in definirea identitatii vizuale a unui brand. De la celebrul rosu al Coca-Cola la albastrul vibrant al Facebook, culorile au puterea de a evoca emotii, de a crea recunoastere a [...]

Read More... from Cum sa folosesti noile formate de imagini pentru web

Citeste tot articolul