2 správné velikosti obrázků na web

Sotva vysvětlím, jak velký průšvih můžou být příliš velké obrázky na webu, následuje nezbytná otázka: “A jak velké obrázky mám teda na web dávat?” Tady je odpověď…

Začnu rychlým shrnutím:

Proč jsou velké obrázky problém?

  • zpomalují načtení stránky
  • komplikují plynulé čtení článku
  • zatěžují celý web
  • požírají mobilní data

… a v kombinaci s dalším obrázkovým hříchem ti dokážou pekelně zavařit. Víc se o tom dočteš v článku 2 největší obrázkové hříchy na webu.

Jediná správná velikost obrázků neexistuje

Jo, bylo by to super, kdybych mohla vždycky vysypat z rukávu 1 přesnou velikost a hotovo. Jenže ono to tak nefunguje. A ani to tak fungovat nemůže.

Každý web je jiný. A velké rozdíly jsou i v rámci jednoho webu. Co bude na jednom místě rozostřené a nepěkné, to bude na jiném už zase zbytečně velké a zatěžující.

Nějaká pravidla se ale najít dají a nakonec to není až tak záludné a složité. Takže směle do toho…

Není velikost jako velikost

V prvé řadě si musíme ujasnit, co to vlastně ta velikost obrázku je. Je totiž potřeba řešit 2 rozdílné typy velikosti:

  1. rozměry – tj. šířku a výšku obrázku
  2. datová velikost – kolik má takový obrázek kB nebo dokonce MB

Do jisté míry jdou obě velikosti ruku v ruce. Když zmenším rozměry obrázku, většinou se mi zmenší rovnou i datově. Může se ale klidně stát, že 1 malý obrázek bude datově objemnější než jiný rozměrově mnohem větší.

Asi jako když máš zlatou cihlu a pytel s nadýchaným peřím.

Správná datová velikost obrázku

Pokud jde o data, je to jednoduché – čím menší, tím lepší.

Samozřejmě nelze zmenšovat donekonečna, je potřeba taky hlídat rozumnou kvalitu, aby se na ten obrázek dalo koukat.

Na webu opravdu není nutné mít obrázky v tiskové kvalitě. Navíc většinou se jedná o obrázky čistě ilustrační (aby to líp vypadalo a opticky se rozdělil text na přehlednější celky). Takže pokud tvůj web není založený převážně na vizuální stránce, můžeš si dovolit šetřit prostor.

Líbí se mi přirovnat datovou velikost k hmotnosti:

Čím víc kB, tím je obrázek pro web “těžší”, když se má načíst. Čím víc webu naložíš, tím déle mu bude trvat, než se zobrazí (= než dotáhne ten náklad do cíle).

A pokud se má zobrazovat na mobilu, tak to je teprve fuška – mobil není žádný bytelný náklaďák, s datovým připojením je to spíš takový malý vozíček. Když na něj naložíš několik tun (tj. obrázky, které mají velikost v MB), může se taky stát, že do cíle nedorazí.

Kdybych měla nadhodit konkrétní čísla

  1. Obrázky, které mají velikost v MB na web rozhodně nepatří!
  2. Naprostá většina obrázků na webu bohatě stačí ve velikosti do 200 kB.
  3. Malou výjimku můžou dostat obrázky, které použiješ na pozadí celé stránky. (Do 500 kB se už určitě vejdeš, že jo?)

Správné rozměry obrázku

Ideální rozměry obrázku jsou takové, které co nejpřesněji odpovídají tomu, jak se pak bude obrázek na webu zobrazovat.

Uf, to asi zní celkem odborně, ale co si z toho máš vzít, co? Klid, vysvětlím 😉

Představ si, že dostaneš takový ten rámeček na koláž obrázků a fotek. Jsou v něm různě velká okýnka. Jak budeš vybírat, které fotky a obrázky do kterého okýnka vložíš?

Kromě toho, že jistě vybereš ty, které se ti líbí, budeš koukat i na to, jaké mají rozměry.

Nebudeš se asi snažit dostat do okýnka 8×8 cm fotku, která má 20×30 cm, že? Možná bys použila fotku o rozměrech 9×9 cm, protože to už není takový rozdíl a ty okraje se dají oželet.

S obrázky na webu je to podobné

Pokud se obrázek v článku bude zobrazovat nakonec v rozměrech 450×300 pixelů, nemá smysl cpát tam něco, co má rozměry dvoj a vícenásobné.

Háček je v tom, že web ti tenhle nesmysl povolí. Prostě si ten obrázek smrskne tak, aby se do toho prostoru vešel. A na oko to často i vypadá dobře (ne úplně vždycky – když je rozdíl v rozměrech hodně výrazný, bývá to i vidět). Jenže pořád je tam namačkaný ten původní obr s tou svojí původní váhou.

I když budeš obrázek vkládat na pozadí stránky, stačí rozměry 1920 × 1080 pixelů, protože to je Full HD rozlišení. Většinu obrázků ale na pozadí webu nikdy používat nebudeš, můžou tedy být mnohem menší.

Před nahráváním na web prostě popřemýšlej o tom, jaké největší rozměry budeš pro ten daný obrázek potřebovat. U ilustračních obrázků v článku vezmi v potaz i to, jestli budeš chtít, aby se po kliknutí obrázek otevřel ve větším náhledu, nebo prostě jen bude umístěný v článku a nijak se zvětšovat nebude.

Jaké rozměry tedy můžeš na webu potřebovat?

  1. Obrázek na pozadí stránky – 1920 × 1080 pixelů.
  2. Náhledový obrázek – podle šablony.
  3. Ilustrační obrázek v článku, který se bude otevírat do zvětšeného náhledu – většinou stačí šířka do 900 pixelů, výška do těch 1080. Toto budeš muset vyzkoušet, jaký rozměr bude v tom konkrétním případě tak akorát, aby bylo vše potřebné na obrázku dost “čitelné”.
  4. Obrázek mezi 2 odstavci v článku – šířka do rozměrů šířky článku, většinou je to kolem 600 – 700 pixelů
  5. Malé ilustrační obrázky do textu – většinou budou stačit rozměry do 300 pixelů.

Uvedená čísla jsou jen orientační, budeš si muset vychytat, jak je to u tebe na webu a co ti bude vyhovovat.

Radši trošku větší než menší

Teď by se mohlo zdát, že nejlepší by bylo nahrávat obrázky úplně malinkaté. Jenže ani to rozhodně není správně. Malé blechy na webu nebudou vypadat dobře. A kdybys je roztáhla až na webu do větších rozměrů, rozostří se a budou “nečitelné”.

Stejně tak není ideální ten samý obrázek nahrávat v několika různých rozměrech jen proto, aby všude přesně zapadl na své místo. Ve WordPressu jsou navíc předdefinované rozměry, na které se každý obrázek při nahrávání upraví. Při vkládání do článků a stránek tak máš na výběr hned z několika velikostí, které už budeš mít předpřipravené.

Teď to bude vypadat, že si protiřečím, ale – když do určitého prostoru na webu nemáš úplně přesný rozměr, použij vždy radši ten, který je o něco větší. Myslím samozřejmě ten nejmenší z těch větších rozměrů.

Další otázky jsou nasnadě…

Už jsme si tedy ujasnili,

  • proč obrázky nemají být zbytečně velké,
  • a jak velké mají správně být.

Zbývá ještě vysvětlit, jak to všechno uvést do praxe:

  • jak poznat ty svoje ideální rozměry obrázků,
  • jak na ně ty obrázky upravit,
  • jak s nimi pak správně nakládat na webu.

Do tohoto článku se mi to už nevejde, ale neboj, nenechám tě plácat se v tom.

Praktické tipy budou příště

Chápu, že bys je nejradší teď hned a tohle teoretické povídání tě až tak moc nebere. Jenže ono to občas bez té teorie bohužel dost dobře nejde.

Web není Facebook, kde jsou rozměry pro konkrétní místa jasně dané pro všechny. Jak už jsem vysvětlovala, nemůžu ti napsat univerzální rozměry, které budou fungovat vždy a všude.

Aby byly jakékoli praktické rady univerzálně použitelné, je prostě potřeba pochopit aspoň zhruba, jak to funguje. Proto vznikl tento článek a proto teď budeš mít chvíli čas, abys to všechno mohla strávit a případně se v komentářích zeptat na cokoli, co ti možná není úplně jasné.

Zajímá tě to?

Jestli tu praktickou stránku obrázkové problematiky nechceš propást, přihlas si moje novinky. Dám ti vědět hned, jak něco dalšího sepíšu.

A do komentářů mi rovnou můžeš i napsat, jestli pro tebe byl tento článek užitečný a co dál by tě kolem obrázků na webu zajímalo.

Jestli ti to přijde užitečné, pošli to dál →

Prostor pro postřehy a dotazy

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *