Jedna z nejvíce problematických věci při tvorbě obsahu na webu, ať už jsou to blogy nebo weby jako takové. Je totiž bohužel zcela běžné, že na webech a blozích najdete zcela špatně použité obrázky. Tou nejčastější chybou je, že jsou obrovské (jak v rozměrech tak ve velikosti), často je to doprovázeno nevhodnou volbou formátu (špatně zvolené PNG vs JPG). Objevuje se to ale i v e-shopech, interních systémech a řadě dalších míst.
Většinou je to způsobeno tím, že ten kdo na Internet dává nějaký obsah neví, že musí hlídat použité obrázky – jejich formát, jejich rozměr (v bodech) a jejich velikost v (v KB či MB). Bohužel tomu napomáhá i to, že redakční systémy (jako třeba právě WordPress) tohle vůbec neřeší. Nevarují před nadměrnou velkosti, neumožňují nahrávané optimalizovat (zmenšit, převést na odpovídající formát) tak jak to dělají sociální sítě.
Uživatelé Mac/MacBooku a mobilních zařízení navíc skoro vůbec nemají šanci vědět kolik KB či MB obrázek má. Uživatelé ve Windows zase vůbec nemusí vidět v jakém formátu obrázek je (JPG, PNG, atd) ani jaké má vlastně rozměry
Velikost obrázku na webu ovlivňuje jak rychle se stránka načte a zobrazí, kolik dat (zejména těch mobilních) se spotřebuje a jaké nároky to má na počítač či paměť. Čím více obrázků na stránce je (představte si třeba fotogalerii), tím větší dopady to může mít. Řeč o tom už dříve byla v Proč je nutné hlídat, jak velké obrázky dáváte na web či do e-mailů?
Vadit to ale bude i vám samotným. Pokud například popadnete 10 MB velkou fotku z iPhone či fotoaparátu a budete ji chtít nahrát na web bude to trvat velmi dlouho. Co navíc, každý web (systém) má nějakou maximální povolenou souborovou velikost (typicky 2 MB) a nic většího se vám tam nepodaří nahrát.
Obrázky připravujte předem
Před nahráním obrázků (fotografií) na web byste tedy měli vše připravit – minimálně ověřit jaké mají rozměry (v bodech) a jak jsou velké (v KB, MB). Pokud zjistíte něco nadměrného, tak musíte obrázek odpovídajícím způsobem upravit – to jak na to se dočtete například v Jak změnit velikost obrázku či fotografie? a také v K čemu se hodí PNG/JPG/GIF atd? Jak zvolit správně formát obrázku či fotky?
POZNÁMKA: Sám tohle běžně nedodržím a zapomenu, že (zejména) pořízený screenshot je PNG a přitom by měl být převeden do JPG. Pak už se jenom divím, že nahrávám (třeba) 2 MB velký screenshot, který by ve skutečnosti mohl být pár set KB. Stejně tak s tím zápasím na Macu kde se ve Finderu prostě velikost souboru neukazuje.
Existuje řada užitečných pravidel, které vám mohou pomoci.
1) Obrázek či fotka na webu nepotřebuje být zpravidla širší než 1 600 bodů. Pokud z nějakého důvodu potřebujete mít na webu větší obrázek (chcete ho dát ke stažení, k tisku), tak vytvořte menší náhledovou verzi a z té odkažte (link) na plnou podobu. Některé redakční systémy to budou přímo umět – málokdy ale vytvořit zmenšeninu, ale čas od času umožní nahrát obě verze a propojit je. Udělat to vždy můžete ručně
2) V řadě webů je šířka (a výška) obrázků dána designem webu – typicky třeba fotky v záhlaví či otevírákové fotky jsou nějakým způsobem definované. Zjistěte si jak a držte se toho. Často bude definována šířka i výška a budete tedy obrázky potřebovat i oříznout. Je navíc běžné a správné se držet nějakých rozměrů napříč články/příspěvky.
3) PNG se vůbec nehodí pro fotografie, ale třeba ani pro herní screenshoty, ty zásadně na web patří jako JPG. Převádějte a nezapomínejte, fotka v PNG bývá několikrát tak velká jako v JPG. Vidět je to na příkladu vpravo – screenshot v PNG má 5.6 MB. Po převedení na JPG jenom 550 KB. Ještě zmenšit by šel změnou rozměru, originál má 2700 bodů na šířku.
4) JPG se vůbec nehodí pro diagramy a velké barevné plochy, tam naopak používejte PNG. Ale pozor, z JPG už PNG moc dobře neuděláte, poškození je nevratné.
5) Příliš velké JPG můžete „komprimovat/zmenšit“ otevřením, nastavením vyšší komprese a novým uložením. Čím větší komprimaci JPG má, tím více tam vzniká různých nekvalit a šumů. Tím je ale menší velikost v KB. Takže nepřehánět a najít rovnováhu mezi velikosti a kvalitou.
6) PDF není obrázek a na webu nemá co dělat. Jedině jako něco ke stažení pro účely tisku. Ve státní správě (aktuálně to je vidět na web Ministerstva zdravotnictví) neustále zveřejňují různé tabulky a diagramy v PDF místo v použitelné podobě.
7) Průhledné obrázky (umí to PNG i GIF) mohou dělat problémy a je lepší se jim vyhnout. Špatně je například používá Facebook při sdílení odkazů. Problémy se objeví při změně barevnosti nebo nočním/dark režimu. A na problém občas narazíte i při konverzi na JPG, tam průhlednost není možná.
8) Typická velikost (většího) obrázku na Internetu by měla být v nižších stovkách KB a platí čím méně, tím lépe. Tady mám, jak už bylo zmíněno, velké rezervy. Často to zapomenu zkontrolovat. Když spěchám tak už to pak nenapravím. Nemělo by to tak být. Prostě pokud v článku máte 2.5 MB velký obrázek co může mít 250 KB tak by tam rozhodně měl být ten menší
9) Pokud na vašem vzhledu obrázky mají nějaký pevně daný rozměr (šířku a výšku) tak tam nenahrávejte nic většího a samozřejmě nic menšího, to dopadne ještě hůře, Větší obrázek zobrazený v menší podobě nijak špatně nedopadne (ale je zbytečně velký), malý obrázek ale roztáhnout nejde a dopadne hrozně.
10) Časté úkony si můžete určitě nějak automatizovat – umí to různé programy na práci s obrázky (osobně mám v ThumbsPlus řadu předdefinovaných dávkových procesů), v Mac OS to umí operační systém (podívejte se co je to Automator). Něco co bude dělat tisíckrát za měsíc se vyplatí urychlit a zjednodušit. Naučte se klávesové zkratky, vytvořte si dávkové soubory, atd.
11) Původní verzi obrázků si schovávejte. Rozhodně zmenšeninou nepřepisujte originál.
12) Osobně obrázky při změna na určitou častou velikost pojmenovávám uvedením rozměru na počátku názvu. Proto třeba obrázky v záhlaví na @365tipů začínají 1600-900- (v minulost 825-330-) a něco jen se změněnou šířkou má na začátku 1600-. Usnadňuje to případně hledání pro pozdější použití – vyhledáváním snadno najdu vše co je obrázek v záhlaví v dané velikosti.
13) Fotogalerie a články s velkým počtem fotografií musí mít všechny obrázky v menší náhledové podobě a teprve po kliknutí se má zobrazit větší (nebo originál). Při opravdu velkém množství obrázků zvažte rozdělení článku/stránky do podoby seriálu/více pokračovní.
14) GIF se stále hodí, zejména ty animované, ale i tady velký pozor. Animované GIFy mohou být hodně velké, optimalizovat je moc nejde.
15) WEBP vypadá jako lákavý formát (stejně jako HEIC od Apple) ale nenechte se zlákat. Rozšíření je minimální a komplikace příliš velké. Řeč je o tom ostatně už v Co s obrázky a fotkami ve formátu WebP? Jak převést WEBP na JPG/PNG?
16) Formáty jako TIF, BMP, WMF (a řada dalších) na web v žádném případě nepatří.
17) Videa jsou ještě větší než obrázky a jen výjimečně patří přímo na váš web, naučte se používat YouTube jako úložiště videí, usnadní to řadu věcí. Je důležité i znát rozdíly mezi různými video formáty a řadu dalších věcí.
18) Obrázky z fotobank (placených i zdarma) vždy pojmenovávejte tak, abyste věděli odkud pochází. Proto třeba řada obrázků z Pexels na @365tipů začíná „Pexels-„
19) Obrázky by měly mít jméno vystihující/popisující obrázek (slova oddělená ideálně pomlčkami, nikoliv mezerami). Usnadní vám to hledání obrázků, lépe se bude pracovat vyhledávačům a může to pomoci i přístupnosti. Tohle zanedbávám u screenshotu na Macu, kde se bohužel ani nejmenují podle okna ze kterého pochází (na Windows ano). Klasická lenost.
20) Obrázky by měly mít ALT popisek tak aby po najetí myší byl zobrazen popisek. Opět to děláte pro vyhledávače, ale také pro přístupnost. Tyhle texty budou použity čtečkami u nevidomých a slabozrakých. Mimochodem tohle je snad jediné pravidlo, které na @365tipů už roky soustavně nedodržují, je to totiž časově hodně náročné a vzdal jsem to. WordPress navíc nijak přívětivou cestu pro popisování nenabízí. Na profesionálních komerčních webech byste to ale dodržovat rozhodně měli. Na tohle téma je tu ostatně Proč jsou důležité ALT texty (popisky) obrázků na webu?
Snad všechno (ano, není toho málo). Pokud by vás ještě něco napadlo, dejte vědět.
TIP: ‣ Pomocník Webdesignera a ‣ ‣ Jak na WordPress jsou dvě užitečná místa kde najdete další tipy a triky pro tvorbu webu a obsahu na něm
