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

The Importance of Sustainable Design in Branding

If everyone is talking about sustainability, we cannot ignore discussing it from a branding perspective. Environmental awareness has always been a growing trend. Now, more than ever, brands are under increasing pressure to adopt sustainable [...]

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

Citeste tot articolul

INOVEO a scris

„Quirky” Sans Serif Fonts: The 2024 Trend

The evolution and shifts in trends from one season to another are most pronounced when it comes to design. This year, in graphic design among other fields, we are seeing a spotlight on a category [...]

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

Citeste tot articolul

INOVEO a scris

How Complex Should Your Website Be?

It’s clear that websites are becoming increasingly large and complex, with both programmers and clients contributing to this trend. Programmers want to showcase their ability to create intricate projects, while clients desire content-rich websites filled [...]

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

Citeste tot articolul

INOVEO a scris

INOVEO Answers Questions from ZF Romanian Brands Yearbook 2024

What is the recipe for creating a brand? How long does it take to build one? How much does it cost? Where do you start and where do you end? What are the key ingredients? [...]

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

Citeste tot articolul