Jak převést hromadně obrázky z formátu jpeg/png do webp pro zrychlení webu

Pokud se jako tvůrce webu zabýváte samotnou realizací návrhů, časem se dostanete do fáze, kdy zjistíte, že potřebujete modernější formáty pro obrázky, které vám klient dodal, nebo které chcete použít vy sami, třeba pro svůj blog. Formát WebP sice není úplně novinka, ale konečně jsme se dočkali plné podpory v prohlížečích. Nastal tedy čas si ukázat, proč a jak je používat.

Reálně, v životním cyklu webu nastávají dvě situace – první, kdy se teprve chystáte použít obrázky/fotografie v obsahu stránek nebo příspěvků a druhá, kdy jsou již na webu použity neoptimalizované obrázky/fotografie, protože web většinou obsahově obsluhují méně zkušení uživatelé, kteří neřeší rychlost webu jako prioritu. Dnes se podíváme na tu první situaci podrobněji. Pojďme se podívat, jak z rozměrných jpeg/png obrázků udělat hromadně modernější formát WebP. Než to uděláme, řekneme si, proč je dobré tento formát používat a proč je dobré se tím vůbec zabývat.

Formát WebP

WebP je formát vytvořený firmou Google. Ta vytvořila moderní obrazový formát s cílem opravit nedostatky tradičního obrazového formátu s koncovkou jpeg/png a případně je nahradit. Formát umožňuje webům zobrazovat kvalitní obrázky při zachování rychlosti načítání stránky. Rovněž podporuje 8 bitové barvy, průhlednost, animaci a barevné profily.

Nabízí efektivnější kompresní rychlost než jpeg/png. Formát dosahuje bezeztrátové komprese tím, že přesně vytváří nové pixely z již existujících obrázků. Používá kompresní technologii kodeku V8 a prediktivní kódování pro kódování obrázků. Seskupuje hodnoty pixelů na základě bloků vedle nich a pak pouze kóduje rozdíl.

Proč obrázky převádět?

Vzhledem k těmto výhodám se přechod na formát WebP stal populární volbou pro webové vývojáře, kteří chtějí optimalizovat výkon a uživatelskou zkušenost svých stránek.

Tip na čtení: chcete se lépe naučit pracovat s vizuálním editorem Gutenberg a nedaří se vám najít spolehlivé zdroje? Přečtěte si příspěvek Gutenberg: Základní vizuální editor pro tvorbu WordPress webu.

Programy pro optimalizaci obrázků a převod do formátu WebP

Respektuji, že každý z nás má k práci různé podmínky, znalosti i nástroje. Proto jsem zvolil dva způsoby, které vám nyní ukážu. Osobně pracuji na systému Linux (distribuce Ubuntu) a programy, které používám, jsou zdarma a multiplatformní (miluji tu kombinaci).

Cwebp a příkaz SUDO

Zkušenější uživatelé Linuxu jistě upřednostní možnost pracovat s příkazem SUDO, s jehož pomocí můžou zadávat přímo pokyn k převodu do formátů webp. Pokud tedy používáte Linux Debian, máte tuto možnost:

sudo apt-get install webp

Tím zajistíte instalaci programu cwebp. Následně si otevřete složku s obrázkem, který chcete konvertovat a v ní spusťte opět konzoli. A s pomocí příkazu v ní skusťte tento kód:

cwebp input.png -o output.webp

Nezapomeňte nahradit input.png a output.png reálnými názvy vašich souborů. Kromě samotné konverze do formátu WebP můžete udělat i základní optimalizaci kvality obrazu uváděnou v procentech. Čím vyšší procento, tím větší kvalita obrázku. Příkaz pro optimalizaci je následující:

cwebp -q 80 input.png -o output.webp

A posledním příkladem pro využití programu cwebp a příkazu sudo je hromadná konverze všech obrázků ve složce:

for file in *.png; do
cwebp "$file" -o "${file%.png}.webp"
done

Příkazů bude jistě víc, nicméně pro optimalizaci obrázků do formátu webp jsou uvedené příkazy dostačující. Víc o knihovně cwebp najdete na webu developers.google.com.

XnConvert – instalace a rozhraní

Pro nás, co nejsme v Linuxu tolik zběhlí a učíme se postupně, jsou tady programy s grafickým rozhraním, které se hodně podobná těm zatraceným woknům (ehhh, pardon..). Program je jedním z produktů XnSoft, který se specializuje na práci s grafickými formáty (podporuje jich víc jak 500..). Jako bonus je plně přeložen do českého jazyka, což pomůže méně zkušeným uživatelům, kteří se nechtějí učit ovládat profesionální grafické programy, jako je Photoshop.

Jeho instalaci na systému Linux můžete provést přímo ze správce software, který by měl být součástí vaší Linuxové distribuce. Pokud není, nebo používáte Windows nebo operační systém Mac, můžete si instalační balík stáhnout z oficiálních stránek autorů programu a vybrat si 32 bit nebo 64 bit instalaci. Při instalaci jsem nenarazil na záludnosti. Stačí pouze následovat instrukce instalátoru.

XnConvert – Hromadný převod a další úpravy

Celý program je velmi jednoduchý. Obrazovka je rozdělena na šest záložek, které slouží k úpravám nebo převodům obrázků do různých formátů. Podívejme se na jednotlivé záložky podrobněji:

Jakmile si tyto záložky nastavíte podle svých potřeb (doporučuji nejprve otestovat, jaké nastavení vám vyhovuje a pak zařadit do „ostrého“ provozu), stačí stisknout tlačítko Konvertovat ve spodní části okna programu.

Praxe s programem XnConvert

A teď tedy prakticky, jak jsem optimalizoval obrázky třeba právě pro tento příspěvek. Nebudu popisovat tvorbu screenshotů, to si necháme na jindy a rovnou přejdu k úpravám a převodu na formát WebP.

A posledním krokem je samozřejmě samotná konverze. Ať už máte deset obrázků, nebo jich máte ke konverzi stovky, stav průběhu konverze do formátu WebP můžete sledovat na záložce Stav, kde se vám zobrazí informace o konverzi a aplikaci zvoleného nastavení.

V mém případě se jednalo o úsporu sice jen v několika Kb, ale při testech programu jsem dokázal konvertovat obrázky, které měly ve formátu jpeg několik MB. Po konverzi se však „smrskly“ na limit 220Kb s rozlišením 1280×1040, což je pro web naprosto dostačující.

Závěrem pár slov

Věřím, že už víte, jak jednoduchým způsobem, a dokonce zdarma, převádět jednotlivé formáty mezi sebou. A nejen převádět, ale i hromadně přejmenovávat a dělat další úpravy, jako je změna rozlišení. Při nastavování konverze však pamatujte na to, že vždy záleží na tom, jak chcete danou fotografii/obrázek používat. Jiné nastavení bude mít obrázek na pozadí, který nemusí být tolik ostrý, a jiné nastavení bude mít portfolio fotografa, pro nějž jsou fotografie stěžejní ukázkou jeho práce.

Pokud vám tedy příspěvek pomohl, budu rád, když se přihlásíte k newsletteru (abyste nepropásli další návod), nebo se spojme na sociálních sítích – LinkedInu nebo Facebooku. A pokud máte klienty, přátele či kolegy, kteří převod obrázků řeší, budu rád za sdílení příspěvku jejich směrem.