Retina a neretina obrázky: Jak správně používat oba typy při tvorbě webu

Neretina vs. retina obrázky

Neretina obrázky

Neretina obrázky jsou „normální“ obrázky, se kterými většina z nás pracuje. U těchto obrázků se předpokládá zobrazení 1:1, tedy na jeden pixel displeje zařízení připadá jeden pixel obrázku. Při systémovém zobrazení (zvětšení) na 100 % se neretina obrázek zobrazuje optimálně.

Další roli hraje původní velikost obrázku a jeho zobrazená velikost na daném zařízení. Neretina obrázky mají běžné rozlišení a jsou optimalizovány pro zařízení s nižším pixelem na palec, jako jsou starší monitory, televize nebo projektory. Na těchto zařízeních by retina obrázky při zobrazení 1:1 vypadaly příliš velké a zabíraly by zbytečně moc místa.

Retina obrázky

Retina obrázky jsou obrázky s dvojnásobným rozlišením než „normální“ neretina obrázky. To znamená, že na stejném prostoru mají dvojnásobný počet pixelů. To jim dává ostřejší a detailnější vzhled na zařízeních, která to jsou schopna zobrazit. Jsou vhodné pro zařízení s vysokým rozlišením, jako například některé smartphony, tablety nebo notebooky (nejčastěji macbooky). Běžné obrázky by na těchto zařízeních vypadaly rozmazaně a nekvalitně.

4 důvody, proč používat oba typy obrázků

1. Kompatibilita

Poskytováním obou typů obrázků zajišťujete kompatibilitu s různými zařízeními, včetně těch starších, které nepodporují vysoká rozlišení. To zajistí, že váš web bude vypadat skvěle na všech zařízeních.

2. Výkon

Načítání vysokého rozlišení retina obrázků může spotřebovávat více prostředků a zpomalovat načítání webu, zejména na starších zařízeních. Poskytování neretina obrázků může zkrátit dobu načítání a zlepšit výkon.

3. Velikost souboru

Retina obrázky mají obvykle větší velikost souboru než neretina obrázky. Poskytováním obou verzí můžete snížit celkovou velikost souboru a minimalizovat množství dat, které je potřeba stáhnout.

4. Kvalita obrázku

Retina obrázky nabízejí vynikající kvalitu, zejména na zařízeních s vysokým rozlišením. Nicméně na zařízeních s nižším rozlišením nemusí být rozdíl mezi retina a neretina obrázky patrný.

Stručně řečeno chceme na webu poskytnou uživatelům největší možnou kvalitu obrázků, kterou mají možnosti zobrazit. Zároveň ale nechceme stahovat zbytečná data a zatěžovat zařízení, která nejsou pro větší rozlišení obrázků zobrazit. To je důvodem proč používat oba typy obrázků.

Jak správně používat retina a neretina obrázky?

Existuje několik způsobů, jak dosáhnout optimálního použití obou typů obrázků:

1. HTML atribut srcset

Použití HTML atributu srcset umožňuje specifikovat více verzí stejného obrázku s různým rozlišením. Prohlížeč pak vybere tu verzi, která nejlépe odpovídá rozlišení zařízení. Tato metoda je jednodušší na implementaci, ale vyžaduje podporu prohlížeče.

<img src="image.jpg"
     srcset="image.jpg, image@2x.jpg 2x"
     width="300"       
     height="100"       
     alt="…"
>

2. CSS Media Queries

Použití CSS media queries umožňuje nastavit různé styly pro různé typy zařízení. Můžete například určit, že pro zařízení s vysokým rozlišením se použije retina obrázek, zatímco pro zařízení s nižším rozlišením se použije neretina obrázek. Tato metoda je sice trochu náročnější na kódování, ale je flexibilní.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Retina obrázek zde */
}

3. Další metody

Mezi další způsoby patří použití vektorového formátu SVG, který je nezávislý na rozlišení (hodí se jen pro jednoduchou grafiku), nebo využití JavaScriptu k dynamické změně obrázků podle potřeby. Každý způsob má své výhody a nevýhody, a je třeba vybrat ten nejvhodnější pro váš web a vaše cílové publikum.

Mimochodem, s naší platformou P7 nemusíte řešit, zda je obrázek nahraný v retina či neretina formátu. Pokročilý content editor, který je její součástí, automaticky upraví rozměry a velikosti obrázků pro bleskové načítání a dokonalý vizuální dojem.

Závěr

Pro dosažení optimální kombinace kvality obrázků a úspory místa na webu, doporučuji využívat jak retina, tak i neretina obrázky. Ideálně byste měli pracovat s různými velikostmi stejného obrázku pro rozličné typy zařízení. Tím zajistíte, že uživatelé získají nejlepší možnou vizuální zkušenost při minimalizaci velikosti souborů.