Pretvorba slika u WebP

Želite ubrzati web stranicu ili web trgovinu manjim slikama? Pretvorite JPG i PNG u WebP. Pretvarač prije pretvorbe procijeni koliko ćete uštedjeti u odnosu na JPG i pripremi HTML kod sa zamjenskim formatom za starije preglednike. Sve se odvija u vašem pregledniku, slike se nikamo ne učitavaju.

Kako pretvoriti sliku u WebP

1. Učitajte slike. Povucite ih u prozor ili kliknite na „Pregledaj datoteke“. Pretvarač podržava JPG, PNG, BMP i statični GIF, desetke datoteka odjednom.
2. Postavite kvalitetu. Zadana kvaliteta 80 odgovara većini web stranica. Za portfolio odaberite 85 do 90, za pregledne sličice 70.
3. Pretvorite i preuzmite. Gumb „Pretvori“ obradi cijelu skupinu, gotov WebP preuzmite pojedinačno ili kao ZIP.

Tko želi ući u detalje, pod pregledom otvori „Tehnički detalji: lupa, procjena uštede, HTML kod“.

Zašto pretvarati slike u WebP

WebP je format tvrtke Google osmišljen za web. Prema studiji Googlea (na engleskom) WebP datoteke s gubitcima pri istoj kvaliteti su 25 do 34 % manje od JPEG-a, a bez gubitaka oko 26 % manje od PNG-a. Manje slike znače brže učitavanje stranice, bolje rezultate u Core Web Vitals i manju potrošnju podataka na mobitelu.

Za razliku od JPG-a WebP dodatno podržava prozirnost, pa zamjenjuje i PNG s prozirnom pozadinom. Danas ga podržavaju svi uobičajeni preglednici (na engleskom), uključujući Safari od verzije 14.

Što pretvarač u WebP zna dodatno

Procjena uštede prije pretvorbe

U tehničkim detaljima nalazi se „Procjena iz uzorka“: pretvarač kodira smanjeni uzorak odabrane slike i izračuna koliko će velik biti WebP pri odabranoj postavci, koliko bi bio velik JPEG pri istoj kvaliteti i koliko posto uštedite. Odmah vidite isplati li se pretvorba.

HTML kod sa zamjenskim formatom

Pretvarač priprema gotov kod za element <picture>: preglednici s podrškom za WebP učitaju novu datoteku, ostali dobiju izvorni JPG ili PNG. Kod sadrži i dimenzije slike te lijeno učitavanje, dovoljno ga je kopirati u predložak. Kako <picture> funkcionira, opisuje MDN (na engleskom).

Lupa pri 100% uvećanju

Klikom u pregled pomičete lupu na bilo koje mjesto i uspoređujete original s rezultatom piksel po piksel. Artefakti sažimanja s gubitcima najprije se pokažu na tekstu, rubovima i finim prijelazima, ondje se isplati pogledati.

Prozirnost ostaje

PNG s prozirnom pozadinom pretvorite u WebP bez gubitka alfa kanala. Ako ciljna aplikacija ne podržava prozirnost, uključite „Spljošti prozirnost na boju“.

Zaštita od lošeg rezultata

Animirani GIF pretvarač odbija, jer bi od njega tiho ostao samo prvi kadar. Kad pretvorena datoteka ispadne veća od originala, što se događa kod već dobro sažetih slika, tablica to označi i jednim klikom zadržite original.

Smanjivanje, preimenovanje, bez metapodataka

U „Naprednim opcijama“ slike smanjite na dužu stranicu u pikselima ili na postotak i skupno preimenujte pomoću {name}, {width}, {height} i {index}. Pretvorba uklanja EXIF, ICC i GPS, pa fotografije ne otkrivaju lokaciju. Ako slike trebate smanjiti na točne dimenzije ili ispod ograničenja u kB, upotrijebite smanjivanje slika.

Koju kvalitetu WebP odabrati

Namjena	Kvaliteta	Napomena
Portfolio, fotografije proizvoda	85 do 90	Detalji bez gubitka, i dalje manje od JPG-a
Uobičajeni web i blog	75 do 80	Najbolji omjer kvalitete i veličine
Pregledi, galerije	65 do 70	Male datoteke, sitni artefakti

Kad WebP, a kad drugi format

• Fotografije i grafika na webu: WebP, sa zamjenskim formatom u <picture> za svaki slučaj.
• Slike za e-poštu, urede ili starije programe: radije JPG, otvorit će ga doista sve.
• Podlošci za daljnju obradu i ispis: PNG, bez ikakvog gubitka.

Dimenzije slika na webu prije pretvorbe brzo provjerite u analizi dimenzija slika.

Česta pitanja

Kako pretvoriti JPG u WebP?

Učitajte JPG datoteke, ostavite kvalitetu 80 ili je prilagodite i kliknite na „Pretvori“. WebP je pri istoj vizualnoj kvaliteti obično manji za četvrtinu do trećinu. Koliko ćete uštedjeti kod konkretne fotografije, pokazuje procjena u tehničkim detaljima.

Kako pretvoriti PNG u WebP i zadržati prozirnost?

Dovoljno je PNG učitati i pretvoriti, prozirnost ostaje sačuvana automatski. Ako je naprotiv ne želite, uključite „Spljošti prozirnost na boju“.

Podržavaju li WebP svi preglednici?

Da, svi današnji preglednici, uključujući Safari od verzije 14. Za svaki slučaj kod starijih uređaja upotrijebite HTML kod s elementom <picture>, koji pretvarač priprema: stariji preglednik tada učita izvorni JPG ili PNG.

Je li WebP bolji od JPG-a?

Za web da: pri istoj kvaliteti je manji i podržava prozirnost. JPG ipak i dalje otvara više programa, pisača i ureda. Za web zato koristite WebP, za dijeljenje i ispis JPG.

Zašto je pretvarač odbio moj GIF?

Animirani GIF bi se pretvorbom tiho pretvorio u jedan statični kadar. Da vas rezultat ne bi iznenadio, pretvarač ga odbija. Statične GIF-ove pretvara bez problema.

Učitavaju li se moje slike na poslužitelj?

Ne. Pretvorba se odvija izravno u vašem pregledniku i datoteke se nikamo ne šalju.