V poslední době mi chodí hodně dotazů z řad mých klientů, jak si vlastně vkládat obrázky na web. Tento článek je tedy určený primárně pro mé klienty a pro weby, které jsem vytvořil (mám jednotnou koncepci), ale základní věci jsou aplikovatelné na jakýkoliv web.
Rychlost webu
Úvodem, rychlost webu je to, oč tu kráčí. Ano, máme rychlý internet, čili by na první pohled nemusely větší obrázky dělat velký problém, ale opak je pravdou. Může se stát, že má někdo někde horší signál a už je problém. Zároveň velké obrázky způsobují, že když je rozsáhlejší web, tak je pak enormně veliký, což zbytečně prodražuje hosting, tvorbu záloh, migrace atd. V neposlední řaději i vyhledávače čím dál tím více apelují na rychlost, čili rychlý web může mít a má lepší výsledky v SEO. Dále lze očekávat i lepší výsledky u PPC reklam, jelikož se stránky načítají rychleji. Závěrem, rychlost webu určitě nepodceňovat a doporučuji si dát tu práci s obrázky.
Správný formát
V první řadě je důležitý formát. Často vidím na webech PNG formáty, což je špatně! PNG se využívá jen v případě, když potřebujeme docílit průhledného pozadí. Na náhledové obrázky na blogu či jako výplňové obrázky se tento formát nehodí, jelikož s sebou nese mnohem větší datovou zátěž – obrázky jsou prostě zbytečně veliké a zbytečně zpomalují web.
Osobně doporučuji JPG nebo novější WEBP. Já osobně se raději stále držím starších JPG skrze fakt, že WEBP neumí všechny prohlížeče správně číst (hlavně ty starší) či je neumí číst některé srovnávače – například myslím Heureka. Toto ale nemám osobně ověřeno, zahlédl jsem to v jedné diskuzi, kde se toto řešilo.
Velikost obrázku
Další co je potřeba upravit je velikost obrázku jako takového. Většina mých webů má maximální šířku 1200 px (zorné pole, kde pokud je monitor širší, tak je po stranách bílé pole), čili je logicky nesmysl tam cpát obrázky, které mají na šířku 3000 px. Takto velké obrázky se tam ani nevykreslí, čili je to opět zbytečná datová zátěž.
Je však důležité zmínit, že pokud je obrázek přes celou šířku obrazovky, čili od hrany monitoru ke hraně, tak takováto šíře může být třeba 2000 – 3000 px (pokud se někdo dívá například na připojeném větším monitoru). V tento moment se hodí vkládat větší obrázky. Já většinou používám okolo 2000 – 2500 px.
Výplňové obrázky
Výplňové obrázky většinou mají max okolo 50% z šířky zorného pole, kde pokud moje weby mají 1200 px, tak obrázku bude naprosto v pohodě stačit okolo 600 px. Zde vždy dávám malou rezervu a používám třeba 800 px. Toto je případ, kdy máte na levé straně obrázek a vedle toho na pravé straně text.
Dalším případem mohou být obrázky, kde jsou třeba 3 nebo 4 vedle sebe a pod tím text. Často použito například u výpisu služeb či tak něco. No a jak jsme si řekli výše, pokud má web 1200 px a my ho vydělíme třemi, tak není opravdu nutné tam cpát obrázky, které mají na šířku 1000 px.
Obrázky na blog
U blogu je to trochu jednodušší. Já vždy u blogu nastavuji šířku na zhruba 800 – 900 px, aby se text dobře četl. Nikdy nedávám více, jelikož je pak text hrozně roztahaný a blbě to vypadá. U blogu tedy stačí používat obrázky, které mají na šířku okolo 1000 px. Pakliže uvažujete, že by blog mohl být časem širší (nedoporučuji), tak můžete dát rezervu například na 1200 px, ale přijde mi to zbytečné.
U náhledového obrázku bych však rezervu již dal. Dokážu si představit, že někdy v budoucnu by se mohl vzhled hlavičky blogu předělat tak, že bude obrázek přes celou šířku obrazovky nebo že bude obrázek s přesahem nad daných 900 px. V tomto případě pro náhledové obrázky používám většinou 1200 – 1500 px.
V neposlední řadě by bylo ještě dobré zmínit, že na weby, z mé dílny, do náhledových obrázků na blogu vkládám obrázky s poměrem stran 1.5. Znamená to tedy, že mají například 1500 x 1000 px nebo například 1200 x 800 px. Tento obdelníkový formát je za mě naprosto ideální a setkáte se s ním na vícero webech.
Komprese obrázků
Když máme správnou velikost a formát, tak doporučuji ještě dělat kompresi. Buď to zvládne grafický editor (měl by to umět PS či Ilustrator) nebo to zvládá tento online tool. Obrázek tam nahrajete, on vám ho zmenší, ale zároveň zachová jeho kvalitu. Výsledkem je tak většinou o 30-50% menší obrázek.
Hotovo
Nyní máme hotovo a můžeme nahrávat na web. Ještě by bylo dobré správně obrázek pojmenovat, vyplnit alt popisek apod, ale to je otázka spíše SEO a je to na samostatný článek.
Závěrem
Platí pravidlo, že obrázky na webu by měly být co možná nejmenší, ale nemělo by to jít na úkor kvality. Vždy je potřeba to posuzovat individuálně. Pakliže jste fotograf, kde kvalita fotek je klíčová, tak je nesmysl vkládat co nejmenší obrázky, aby se web co nejrychleji načítal, když potřebujete prodat právě vizuálem. Na druhou stranu, pokud si vytvoříte galerii, kde bude 300 fotek a každá bude mít 3 Mb, tak se to bude skutečně načítat týden.
Obecně, když vkládám obrázky, tak je osekávám tak, aby měly max do 200 Kb, což mi i tak přijde dost. Nějaký zlatý střed je okolo 150 – 180, ale opravdu hodně záleží, co je to za web a co je to za obrázek. Nelze tedy takto optimálně říci správnou velikost vůči kvalitě, ale klasický výplňový obrázek ve formátu png, co má 2 – 3 Mb je prostě moc a je to špatně.
Leave a Reply