Už jste to určitě zažili. 🤔
Otevřete nějakou webovou stránku a ta se načítá strašně dlouho. Začtete se do nějaké věty a hups… otevře se obrázek a text vám někam zmizí. Sama to nemám ráda – spolehlivě mě to odradí číst dále a stránku zavírám.
Nebo…
Projížděli jste internet z mobilu a… vaše mobilní data jsou fuč. Říkáte si, jak je to možné? Dyť to bylo jen pár stránek, když jste měli chvilku pro sebe.
Tohle všechno mají na svědomí špatné velikosti obrázků na webových stránkách. Je zvláštní, že tento nešvar nahrávání gigantických obrázků pořád ještě nevymizel. Hlavně proto, že to (úplně zbytečně) dokáže velmi rychle otrávit potenciální zákazníky.
V tomto článku vám ukážu, jak se chybám při vkládání obrázků na web vyhnout jednou provždy. 😉
Článek patří k těm delším, tak si skočte rovnou na to, co potřebujete vědět:
1) Chyba – Špatná velikost obrázků
2) Chyba – Špatný formát obrázku
3) Chyba – Špatný název obrázku
4) Chyba – Neoptimalizujete obrázky pro vyhledavače
Shrnutí
1) Chyba – Špatná velikost obrázků
Na velikosti záleží.😃 A pokud někdo tvrdí něco jiného, nemá pravdu.
Velikost obrázků a fotek může výrazně ovlivnit dobu, za jakou se budou stránky načítat. Rychlost načítání stránek berou v úvahu i vyhledávače, takže s tím není radno si moc zahrávat.
Takže potřebujete obrázek správné velikosti.
Co je ale správná velikost? To záleží, kam chcete obrázek nebo fotku umístit.
Na pozadí stránky: Ideální je fotka šířky 1920 px (formát Full HD je 1920 x 1080 px). Pokud bude fotka součástí sloupce, pak stačí šířka 250 px.
Na velkém monitoru mají obvykle články šířku kolem 600 pixelů, stačí do nich tedy vložit fotky této šíře.
Na gigantické fotky s větší šířkou než 1920 px můžete klidně zapomenout.
Níže jsem vytvořila obrázky v Canvě různých rozměrů. Ukáži vám, že ve velikostech není takový rozdíl. (Pokud Canvu ještě neznáte, můžete se o ní dozvědět více. Připravila jsem pro vás ZDARMA video návod – Jak si založíte účet v Canvě a malé překvapení. Vytvoříme si hned jeden obrázek společně. Tento program používám na vytváření grafiky pro své webové stránky a vytvářím v ní různé velikostí obrázků.)
Sami vidíte, že rozdíl kvality fotky je minimální. Obrázky jsou na stránce malé.
Když mluvím o velikosti obrázků, tak nemohu zapomenout ani na datovou velikost obrázků. I když má třeba obrázek rozumné rozměry, může se stát, že má pořád moc kB (datovou velikost).
Samozřejmě zmenšíte-li rozměry obrázku – px, zmenší se i jeho datová velikost. Může se však stát, že i tak je obrázek datově moc velký. V tomto případě používám software na zmenšení datové velikosti obrázků. Třeba Tinypng. Zachovává rozměry v px a ubere data. Můžete v něm datově zmenšovat obrázky jpg a png.
Takhle to vypadá, když se tyto obrázky datově zmenší.
Skvěle, právě jste ušetřili 72 % místa, který by zabral datově neoptimalizovaný obrázek. Takže své obrázky určitě zmenšujte. A to ještě před tím, než je vložíte na web.
Někdy se ale stane, že zapomenete upravit velikost obrázku před nahráním na web. Nainstalujte si hlídače (plugin) podle video návodu ZDARMA, který to za vás ohlídá a velké obrázky za vás zmenší.
PS: Umí zmenšit už i nahrané obrázky na webu. Ušetříte s ním hodně času. 😉 Já osobně si nedokážu představit, že bych teď všechny fotky na webu sama zmenšovala a vyměňovala.
2) Chyba – Špatný formát obrázku
Obrázky můžete na web vkládat v různých formátech. Mezi nejčastěji používané patří jpg, gif a png. Každý formát má své výhody a nevýhody.
Zvolením správného formátu můžete snížit velikost datového objemu a zároveň zachovat kvalitu obrázku.
Jaké jsou tedy formáty a k čemu se který hodí?
JPG (JPEG)
Jedná se o nejčastější obrázkový formát na internetu, který dokáže výrazně snížit datový objem při zachování kvality obrazu. Je to výborný formát právě pro úpravu digitálních fotografií. Jiný formát by fotografie na vašem webu mít ani neměly!
Nehodí se však pro obrázky tvořené jasnými velkými plochami nebo ostrými liniemi, zobrazení textu nebo ikon, protože komprese vytváří v obrazu viditelné a rušivé změny. Také tento formát neumožňuje průhlednost.
Formát JPG (JPEG) je jasnou volbou při úpravách digitálních fotografií pro web.
PNG (Portable Network Graphics)
Je to formát s bezztrátovou kompresí a byl vytvořený jako náhrada za starší formát gif. Jeho velkou výhodou je průhlednost. Hodí se pro obrázky obsahující jednobarevné oblasti, plynulé přechody a ostré hrany.
PNG je tedy jasnou volbou při vytváření grafických obrázků pro web anebo při použití průhlednosti u obrázku.
GIF
Tento formát můžete použít pro jednoduchou grafiku a animované obrázky.
Ukázka použití obrázku JPG a PNG
Jak vidíte z ukázek níže, není moc velký rozdíl v kvalitě obrázku png a jpg. V čem ale rozdíl je, je jejich datová velikost. Cílem je vždy co nejméně datově objemný obrázek, který bude ale i koukatelný a nebude ho příliš degradovat komprese.
Oba obrázky mají pořád ještě moc velký datový objem. Takže je ještě datově zmenšíme jako v bodě 1. Takto veliké soubory prostě na web nepatří. 🙂
Hned je ta velikost veselejší. Obrázky jsme datově zmenšili o 75–80 %. Při zachování kvality.
PS: Ty obrázky, co jste viděli nahoře, jsou už samozřejmě nahrané datově zmenšené. 😃
Shrnutí aneb Co z toho pro vás plyne:
Formát JPG je datově menší než PNG, i po zmenšení datové velikosti naším prográmkem. Kvalita je srovnatelná. Takže pokud nejde o obrázek s výraznými přechody a nepotřebujete u něho průhledné pozadí, formátu JPG se nemusíte bát. Datová úspora za to stojí a váš web vám poděkuje. A čtenáři také.
3) Chyba – Špatný název obrázku
Nikdy nepoužívejte v názvech souborů háčky, čárky a mezery!
Proč je to tak důležité?
Na začátku při tvorbě webu si myslíte, že to důležité není. Obrázek se vám nahraje a zobrazí tam, kde má, i když má v názvu háčky, čárky a mezery. Takže si můžete říct „to je v suchu“ a neřešit to.
Jenže… takto pojmenované soubory se nebudou zobrazovat na zařízeních, která nemají nainstalovanou češtinu. Říkáte si, že to nevadí, tak holt to někdo neuvidí?
Co se však stane, když budete chtít svoje webové stránky (třeba časem) přesunout k jinému poskytovateli? Pokud budete mít fotky a obrázky pojmenované špatně, tak se tyto obrázky při převodu vašich webovek správně nenačtou. Prostě se přejmenují a schovají. Na vašich webovkách pak budou chybět a vy je budete muset dohledávat a nahrávat znovu. Zbytečná ztráta času? Podle mě rozhodně.
Vyvarujte se toho, že kvůli velkým a špatně pojmenovaným obrázkům budete svůj nový web opravovat několik dní.
Jak na to?
- Smažte původní fotku. V PC správně pojmenujte a nahrajte znovu. Určitě to udělejte co nejdříve, než se obsah vašeho webu ještě více rozroste.
- Nahrávejte fotky se správným názvem. Také se mi občas stane, že to neuhlídám a nahraju fotku s názvem, který tam nemá co dělat. Proto jsem si nainstalovala jednoho hlídače, který za mě soubor při nahrání hned přejmenuje. Více najdete zde>>>. Mám pro vás připravený video návod. 😃
4) Chyba – Neoptimalizujete obrázky pro vyhledavače
Věděli jste, že s pomocí obrázků můžete vylepšit pozice svého webu ve vyhledávačích? Optimalizace obrázků totiž není důležitá jen pro klasické textové vyhledávání, ale také pro vyhledávání obrázků v Google.
Pro jejich algoritmy (něco jako jazyk vyhledávačů) je důležitý především alternativní text u obrázku a název. Název si proto rozmyslete ještě před nahráním obrázku na svůj web. Ideálně by z pojmenování každé fotky či obrázku mělo být na první pohled jasné, co na nich je.
A když použijete nějaké dobré klíčové slovo, které lidé hledají, uvidíte, jaké to umí udělat zázraky. Ale to už je jiná kapitola, o tom jindy.
Tak už víte, jaké chyby nemáte na svých webech dělat?
Určitě ano. 😃
Shrneme si to:
Pokud budete dodržovat následující pravidla pro vkládání obrázků na web, bude váš web vypadat hezky, bude rychlý, vyhledavače ho lépe uvidí a při převodu na jiný web hosting budete v klidu a neztratíte žádné obrázky cestou.
1) Obrázky by měly mít stejný rozměr v pixelech jak na stránce, tak ve skutečném zobrazení. Nevkládejte zbytečně gigantické obrázky a datově je zmenšete.
2) Používejte správný formát obrázku pro daný účel. Na fotky vždy jpg!
3) Správně pojmenujte svoje obrázky, a to ještě před nahráním na web.
4) Správně pojmenujte a nastavte název a alternativní text pro vyhledavače při nahrání fotek na web.
Pro úpravu či zmenšení obrázků můžete použít některé nástroje. Asi tím nejoblíbenějším je Photoshop, který je však placený a pro uživatele, kteří pravidelně s grafikou nepracují zbytečně drahý. Pro rychlé zmenšení fotek můžete použít free program JPEG Resampler 2010. Já osobně pracuji s Canvou. Vytvářím v ní všechnu grafiku na své stránky a udělám zde i různé velikosti obrázků. Pokud chcete, můžete se ZDARMA mrknout na video návod Jak si založíte účet v Canvě. Nebo si pořídit online kurz Tvorba obrázků v Canvě.
Mějte se krásně