Pokud potřebujete na stránce udělat nějaký obrázek průhledný (ikonu, vodoznak, apod.) asi vás napadne použít GIF nebo PNG, které jsou nejčastěji používanými formáty pro průhledné obrázky.
Bohužel ale GIF podporuje jen 256 barev a PNG je zase bezztrátové, takže generuje hodně velké obrázky.
Existuje ale celá řada alternativ, pomocí kterých můžete ušetřit čas a traffic uživatelů při stahování stránky.
CSS průhlednost
Pokud nepotřebujete průhlednost na konkrétních pixelech, ale naopak chcete udělat celý obrázek průhledný (vodoznak v pozadí, overlay mapa, apod.), je mnohem jednodušší a lepší použít průhlednost pomocí CSS, která je podporována ve všech moderních prohlížečích:
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
Pokud potřebujete podporovat i starší prohlížeče, můžete definici rozšířit:
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
Definice zoom:1 nebo width:100% pomáhá opravovat chyby v některých verzích webkit nebo IE prohlížečích, které nezpracovávají správně absolutně pozicované prvky (chyba „hasLayout“). Jak totiž možná tušíte, výše uvedenou třídu je potřeba použít na absolutně pozicovaný prvek, který zobrazíte před objektem, do něhož má být obrázek zprůhledněn:
<div class="opacity-container">
<span class="original-content">...</span>
<div class="transparent"
style="position:absolute;left:0;top:0"
>...</div>
</div>
Absolutně pozicovaný div se zprůhlední a zobrazí tak částečně i původní obsah pod ním.
Další průhledné formáty
UPDATE: Následující část již není aktuální. Pokud chcete aktuální informace, doporučuji pokračovat článkem Jaké použít obrázky v roce 2021?.
Možná to bude znít překvapivě, ale kromě GIF a PNG existuje i celá řada dalších formátů, které podporují průhlednost.
Jejich podpora v prohlížečích sice není tak velká, ale většina prohlížečů podporuje alespoň jeden z formátů (překvapivě včetně IE8+), takže při troše snahy vytvoříte pro každý prohlížeč vlastní definici, která zamezí stahování velkého PNG.
Firefox
Firefox jako jediný z používaných prohlížečů nepodporuje žádný jiný formát než PNG.
Update: Od verze 65 (začátek 2019) podporuje Firefox WebP formát (viz Chrome níže).
Vzhledem ale k tomu, že Firefox momentálně (polovina r. 2015) zabírá méně než 10% trhu (a stále klesá) a do popředí se dostává Chrome v těsném závěsu IE (Windows) a Safari (Apple), tak se dá použití PNG považovat za „kompatibilitu pro staré prohlížeče“.
Průhlednost
Firefox ale jako jeden z mála plně podporuje formát APNG, který byl vytvořen pro zobrazení animace. Kromě toho ale lze pomocí tohoto formátu (v některých případech) obrázek zmenšit trochu více (až o 50%) než pomocí klasické PNG komprese (díky tomu, že místo Zlib používá 7Zip kompresi). Stále ale jde o bezztrátovou kompresi (využívající zmíněný ZIP formát), takže ostatním ztrátovým formátům se i tak nevyrovná. Na druhou stranu APNG není vhodné na malé nebo jednoduché obrázky (ikony), které můžete bez ztráty kvality uložit v 256 nebo 16 barvách – APNG totiž podporuje pouze TrueColor (65k barev) a tak takové obrázky vyjdou v APNG naopak mnohem větší (alespoň v níže uvedených programech). Navíc lepší komprese 7Zip se projeví až u větších obrázků (10kB a více), kde je více opakujících se dat, takže běžné ikony o rozměrech 32x32px v PNG a APNG vyjdou nastejno nebo se liší jen o pár bajtů.
Výhoda APNG je v tom, že je zpětně kompatibilní (a to jak kompresí – 7Zip formát lze rozbalit jakoukoliv Zlib knihovnou – tak i formátem uložení obrázku, protože první snímek je uložen jako klasické PNG a pak teprve následují informace o animaci), takže ostatní prohlížeče, které ho nepodporují, z něj dokáží načíst alespoň první obrázek a zobrazit ho bez animace. APNG dokonce podporuje možnost v animaci první obrázek vynechat, takže ho můžete použít pro zobrazení jiného neanimovaného obrázku (např. pokud animace začíná prázdnem a pak teprve se něco objeví). Berte ale na vědomí, že první obrázek se zobrazuje i v průzkumníku (Explorer, Finder, apod.) nebo ve vyhledávačích (Google Obrázky), takže dát do něj něco ve smyslu „Toto je animace, která nefunguje“ vám příliš nepomůže při hledání obrázku.
Animace
Pro vytvoření (animovaného) souboru můžete použít konzolový nástroj (pro Windows je dostupné i GUI) nebo plugin pro GIMP. Jednoduchou animaci (s konstantní rychlostí) můžete vytvořit i v Paint.net pomocí Animated Image pluginu (je součástí balíku od Simona Browna).
Uložení
Pro dosažení nejmenší možné velikosti PNG doporučuji výsledný obrázek prohnat programy APNG Optimizer (konzolový nebo GUI pro Windows) a PNG Optimizer (použijte oba, protože každý zmenšuje obrázek jiným způsobem).
Pro hromadný převod obrázků můžete (na Windows) použít tento skript:
@echo off :start set filename=%~n1 if "" == "%filename%" goto end c:\tools\APNG\apngasm.exe "%filename%.anim.png" "%filename%.png" c:\tools\APNG\apngopt.exe "%filename%.anim.png" "%filename%.opt.png" dir %filename%.* /OS shift goto start :end
Skript uložte třeba jako apng.cmd; můžete ho zavolat z konzole s libovolným počtem parametrů se jmény obrázků nebo v Průzkumníku na něj můžete přetáhnout označené obrázky. Skript vytvoří dva nové soubory: *.anim.png, což je základní animace z původního PNG a následně *.opt.png s optimalizovaným obrázkem. Následně ještě doporučuji všechny obrázky přesunout do PNG Optimizeru a pak následně porovnat, který soubor (*.png, *.anim.png či *.opt.png) je nejmenší. Pozor na to, že apngasm automaticky rozpoznává číselné posloupnosti ve jménech a spojuje je do animace. Pokud máte obrázky např. day01.png, day02.png, atd. skript z nich vytvoří animaci místo aby je zkomprimoval jednotlivě!
Chrome
Prohlížeče Chrome ve všech verzích podporují formát WEBP (překvapivě od Google). Tento formát nabízí bezztrátový (PNG) i ztrátový (JPG) způsob uložení, takže můžete najít nejlepší způsob uložení konkrétního obrázku.
Kromě toho WEBP podporuje i animované obrázky (díky tomu, že vznikl z video kodeku VP8).
Opera samozřejmě podporuje to samé od té doby, co začala používat stejné jádro jako Chrome (tedy Opera 15+).
Update: od verze Chrome 61 (září 2017) pro desktop, Chrome 64 pro Android (leden 2018) a Opera 46 (červen 2017) podporují také APNG pro animace (viz Firefox výše).
Obrázek můžete převést pomocí konzolového nástroje od Googlu (Win, MacOS, Linux) nebo použít pluginy pro Photoshop a GIMP. Plugin pro Paint.net najdete na jejich fóru.
Safari
Prohlížeče od Applu podporují formát JPEG-2000, což je upravená definice JPG, která doplňuje průhlednost. Jelikož je základem JPG, umožňuje zvolit kvalitu komprese v procentech a tak nalézt ten správný bod, kdy je obrázek dostatečně malý ale stále ještě kvalitní pro zobrazení na displeji. Ukládá se do souborů *.jp2 nebo *.j2c)
Pro animované obrázky můžete od verze Safari 8 a iOS 8 použít APNG (viz Firefox výše). Od verze Safari 11.1 můžete také použít MP4 video (bez zvuku) umístění do IMG nebo PICTURE (s type=video/mp4 aby bylo jasné, že jde o video).
Pro vytvoření obrázku můžete použít konzolový (placený) nástroj nebo pluginy pro Photoshop a GIMP. Plugin pro Paint.net najdete na jejich fóru.
Na MacOS samozřejmě stačí obrázek otevřít v programu Preview (v české verzi Náhled), z menu File (Soubor) zvolit Export (Exportovat) a při ukládání zvolit formát „JPEG-2000“.
Internet Explorer
Sice je to překvapivé, ale Internet Explorer podporuje již od verze 8 vlastní modifikaci JPG obrázků, která podporuje průhlednost, známou jako JPEG-XR (vyvinuto Microsoftem z původních formátů Windows Digital Picture a HD Photo). Přípony souboru jsou trochu netypické: *.wdp (Windows Digital Picture) nebo *.hdp (HD Photo), ale často se ukládá i s příponou *.jxr (JPEG-XR), jelikož prohlížeči nezáleží na příponě ale na MIME typu.
Update: od verze 18 (Windows 10 RS5 October 2018) podporuje prohlížeč Edge formát WEBP od Google (viz Chrome výše). Dejte si ale pozor, protože při vyšší úrovni zabezpečení mohou předchozí verze Edge stahovat WEBP soubor, i když ho nedokáží zobrazit. Pak by to znamenalo, že uživatelé bez nejnovější verze Windows 10 neuvidí obrázky na vaší stránce!
Průhlednost
JPEG-XR je pouze založeno na JPEG, ale nepoužívá přímo tuto kompresi, takže nabízí i bezztrátové uložení a také, kromě RGB, podporuje černobílé nebo CMYK formáty barev.
Pro vytvoření obrázku můžete použít nástroj JxrEncApp, který je součástí MS knihovny jxrlib, nebo použít pluginy pro Photoshop a GIMP. Plugin pro Paint.net najdete na Codeplex.
JPEG-XR nejlépe převádí obrázky z formátu TIFF, takže můžete potřebovat ještě nějaký nástroj, který převede vaše obrázky do tohoto formátu.
Alternativně můžete použít konzolový nástroj nConverter.
Update: Podle Tobiase Baldaufa z Trivago vede použití JPEG-XR ke zhruba 1% poklesu výkonnosti stránky (myšleno vykreslování i konverze) oproti JPEG a PNG. Je to proto, že jelikož je JPEG-XR více komprimované, potřebuje prohlížeč více procesorového času pro jejich dekódování – stejného času, který používá k parsování CSS a spouštění Javaskriptu (vše běží v jednom vlákně). Proto vykreslení trvá celkově déle, i když se stránka díky menším obrázkům stáhne rychleji.
Animace
Internet Explorer nepodporuje žádný formát pro animované obrázky (kromě GIF, pro který Microsoft vytvořil animační nástroj), ale můžete (v IE10+) použít animaci pomocí JPEG-XR (nebo jiných formátů) v kombinaci s CSS animací:
@keyframes animovana-ikona {
0% { background-image: url(anim-1.jxr);
25% { background-image: url(anim-2.jxr);
50% { background-image: url(anim-3.jxr);
100% { background-image: url(anim-4.jxr);
}
.ikona {
animation-name: animovana-ikona;
animation-duration: 0.5s;
}
Úspora?
Vždy berte v úvahu to, že každý formát má jiný způsob komprese a ne vždy dosáhne tak dobrých výsledků jako ostatní. Často tak narazíte na problém, že jeden nebo více formátů vygeneruje obrázek mnohem větší než byl původní PNG nebo JPG.
Například u malých, hodně průhledných ikonek může být výhodnější použít obyčejné PNG, protože APNG, JPEG-2000 a JPEG-XR mají příliš velkou režii (metadata) nebo prostě nedokáží obrázek vhodně zkomprimovat (kvůli převažující průhlednosti).
U některých obrázků může být problém v tom, že JPEG-2000 a JPEG-XR, aby dosáhli lepší komprese než PNG, musejí zahodit příliš informací o barvách a obrázek se stane příliš nekvalitním (kostičkovaný nebo rozmazaný).
Vždy si proto vytvořte (nebo nechte vytvořit) obrázek v různých formátech a kvalitách a pak vyberte ty, které mají nejlepší poměr velikost/kvalita.
Použítí různých formátů
Samozřejmě různé formáty nelze načítat v HTML pomocí IMAGE (<img>), takže budete potřebovat buď CSS, kde vytvoříte různé definice a prohlížeč si vybere, co zvládne:
.ikona {
/* Firefox a fallback */
background-image: url('ikona.png');
/* Safari - JPEG-2000 */
background-image: url('ikona.jp2');
/* IE - JPEG-XR */
background-image: url('ikona.jxr');
/* Chrome - WEBP */
background-image: url('ikona.webp');
}
Nebo můžete využít novou definici pomocí Picture elementu:
<picture>
<!-- Safari - JPEG-2000 -->
<source srcset='ikona.jp2'
type='image/jp2'>
<!-- IE - JPEG-XR -->
<source srcset='ikona.jxr'
type='image/vnd.ms-photo'>
<!-- Chrome - WEBP -->
<source srcset='ikona.webp'
type='image/webp'>
<!-- Firefox a ostatní -->
<img src='ikona.png' alt='ikona'>
</picture>
Pro lepší podporu starších prohlížečů pak můžete použít polyfill PictureFill.