Jaké rozměry mají mít obrázky na webu?

Kolik pixelů potřebuje vaše konkrétní stránka?

Nejdřív zjistěte šířku místa, kam obrázek patří. Fotografie přes celou šířku článku potřebuje jiný zdroj než její náhled v malé kartě. Stejně důležitý je poměr stran: široký banner a čtvercový produktový snímek mohou mít totožnou šířku, přesto se do nich stejný ořez nehodí.

Ve správci webu začněte doporučením šablony pro dané umístění. Pokud chybí, otevřete skutečnou stránku a prohlédněte ji na desktopu i mobilu. Přesné rozměry prvku zobrazí vývojářské nástroje prohlížeče po volbě Prozkoumat nebo Inspect. Potřebujete velikost obrázku v rozvržení stránky, nikoli šířku celého monitoru.

Zásadní je rozdíl mezi dvěma hodnotami:

• Rozměry souboru v pixelech říkají, kolik obrazových bodů je uložených v obrázku, například 1 600 × 1 000 px.
• Velikost zobrazení v CSS pixelech říká, kolik prostoru zabere obrázek na stránce, například 800 × 500 px.

Prohlížeč může zdroj o šířce 1 600 px zobrazit v prostoru širokém 800 CSS px. Naopak roztažení zdroje o šířce 400 px do stejného prostoru chybějící detail nedoplní.

Proč někdy připravit dvojnásobnou šířku?

Na displeji s vyšší hustotou může jednomu CSS pixelu odpovídat více fyzických pixelů. Obrázek proto může potřebovat více obrazových bodů, než naznačuje jeho šířka v rozvržení. Tuto souvislost využívají responzivní obrázky: stránka nabídne varianty a prohlížeč zvolí vhodnou podle podmínek.

Představte si článek s maximální šířkou fotografie 800 CSS px, poměrem stran 8 : 5 a požadavkem na variantu pro hustotu 2×. Příprava pak může vypadat takto:

Dvojnásobná šířka i výška znamenají čtyřnásobný počet pixelů. Velikost souboru ale nemusí vzrůst přesně čtyřikrát, protože ji ovlivňuje obsah a komprese. Vyšší rozlišení proto posuzujte spolu s velikostí dat a viditelným přínosem.

Nemusíte ručně exportovat variantu pro každý telefon. Důležité je dodat dostatečný zdroj a mít web, který vytvoří a nabídne vhodné velikosti. Zvětšením malého originálu v editoru si další skutečný detail nevyrobíte.

Jak zabránit špatnému ořezu?

Poměr stran vyřešte před kompresí. Má-li fotografie poměr 3 : 2 a šablona čtvercovou kartu, nastane jedna ze dvou běžných situací: část fotografie se ořízne, nebo se kolem ní objeví volné místo. Samotné zmenšení šířky tento rozdíl neodstraní.

U produktového snímku ověřte, že ořez neodstraní část výrobku. U portrétu zkontrolujte hlavu a prostor kolem ní. Pokud mobil používá výrazně užší výřez než desktop, může potřebovat vlastní kompozici, nikoli jen menší kopii.

Rozměry měňte se zachováním poměru stran. Když editor dovolí nezávisle zadat šířku a výšku a vypnete jejich propojení, můžete fotografii roztáhnout. Pro změnu poměru stran slouží ořez, ne deformace.

Proč nestačí nahrát jednu velkou fotografii?

Obrázek široký 4 000 px se může v článku vizuálně zmenšit, aniž by se snížilo množství stahovaných dat. CSS určuje zobrazení; samo o sobě nevytvoří menší soubor.

Web proto může obrázek nabídnout v několika šířkách pomocí atributu srcset. Atribut sizes prohlížeči popisuje, kolik místa bude obrázek v rozvržení zabírat. Pokud jsou údaje nesprávné, prohlížeč může vybrat zbytečně velkou variantu. Tyto údaje obvykle vytváří šablona nebo redakční systém, není nutné je psát ručně ke každé fotografii.

Praktická kontrola je jednoduchá: na úzké obrazovce zjistěte, který soubor stránka skutečně načetla. Nestačí vidět malý obrázek. U WordPressu postup popisuje optimalizace obrázků a kontrola načítané varianty.

Pomůže změnit DPI na 72?

Samotný přepis údaje DPI při zachování stejných pixelových rozměrů běžný webový obrázek nevyřeší. Pro zobrazení na stránce vás zajímají především pixely zdroje, velikost v CSS a hustota displeje. DPI nebo PPI se u fotografie často používají k určení vztahu mezi pixely a fyzickou velikostí při tisku.

Pokud editor při změně tohoto údaje zároveň přepočítá obrázek, změní se i počet pixelů. V takovém případě sledujte právě výslednou šířku a výšku. Soubor široký 1 600 px se nestane menším webovým obrázkem jen tím, že do jeho metadat zapíšete 72 místo 300.

Stejně tak nezaměňujte pixely s kilobajty. Dvě fotografie o rozměrech 1 600 × 1 000 px mohou mít výrazně jinou velikost souboru. Záleží na scéně, formátu a kompresi.

V jakém pořadí obrázek připravit?

1. Zjistěte cílové umístění a poměr stran. Vycházejte ze skutečné šablony, včetně mobilního zobrazení.
2. Ořízněte originál a nastavte potřebné rozměry. Ponechte dostatek pixelů pro největší zamýšlené použití a hustotu displeje.
3. Vyberte formát a zmenšete soubor. Návod jak zmenšit velikost fotky pomůže rozhodnout mezi jednotlivými zásahy.
4. Zkontrolujte obrázek na stránce. Sledujte ořez, ostrost i skutečně načtenou variantu.

Kompresor obrázků využijete v třetím kroku. Rozměry nemění; ty připravte v editoru nebo pomocí funkcí svého redakčního systému. Pokud obraz po úpravě ztratil ostrost, nejprve rozlište nedostatek pixelů od kompresních vad.

Často kladené otázky