Tak tohle je jedna z nejčastějších otázek, které poslední dobou dostávám.

Popravdě, mám na to malý tahák, takže mám ty správné velikosti vždy po ruce. Ráda se o něj s vámi podělím. Na konci tohoto článku najdete odkaz, kde si ho můžete stáhnout a vytisknout (nebo uložit do mobilu).

---

1) Obrázek na váš web

Je opravdu důležité, aby obrázky na webu měly správnou velikost. Když to tak nebude, stránky se budou načítat zbytečně dlouho. Pokud se na ně budou vaši klienti dívat z mobilu, tak je nepotěšíte – zbytečně jim tak ukrojíte pořádnou porci mobilních dat a to asi nikoho nepotěší. 😒 Takže co s tím?

Jestli chcete rychlý, hezký web, který bude viditelnější i pro vyhledávače, tak rozhodně nepodceňujte následující pravidla pro vkládání obrázků na web. Jako bonus budete v případě převodu na jiný web hosting úplně 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 rozměr obrázku 1920 px, když jej použijete pouze do sloupce 300 px.) Nevkládejte zbytečně gigantické obrázky. A datově je zmenšete.

2) Používejte správný formát obrázku pro daný účel. Pro fotky vždy jpg!

3) Správně pojmenujte svoje obrázky 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. [/box]

Podrobně se o těchto pravidlech dočtete v článku 4 nejčastější chyby při nahrávání obrázků na web.

---

2) Obrázek pro FB atributy

To je obrázek, který nastavíte na konkrétní webové stránce a ukáže se vám při sdílení na Facebooku.

Velikost obrázku, který je nutné si připravit, je 1200 x 628 px. Já osobně vytvářím obrázky v Canvě. Třeba tento:

Více se dočtete v článku Jak nastavíte webové stránky pro sdílení na Facebooku?

---

3) Obrázek, který vkládám do videa

Osobně vytvářím videa hodně a potřebuji do nich vložit nejrůznější obrázky. Videa vytvářím ve full HD kvalitě.

Proto si připravuji obrázky o velikosti 1920 x 1080 px, které pak vkládám do samotných videí.

---

4) Obrázek pro miniaturu na Youtoube

Nemám ráda nekvalitní obrázky. Bohužel ve většině případů se mi miniatura, kterou vybere Youtube jako náhledový obrázek, nelíbí.

Připravte si tedy obrázek o rozměru 1280 x 720 px a do velikosti 2 MB.

Takové můžete klidně vkládat do slidu videa a bude to vypadat dobře. Je to velikost, kterou používám i ve svých video návodech.

---

5) Příspěvek na FB

Canva vám nabízí již připravený rozměr obrázku, stačí si jen vybrat formát „Příspěvek na Facebook“.

Jinak je to rozměr 940 x 788 px. S rozměrem pro příspěvek na FB se nemusíte trápit, stačí použít čtvercovou grafiku nebo klidně i fotku na výšku.Ve většině případů vidíte na FB obdélníkové fotky. Samozřejmě, že FB je zobrazí.Když však uděláte tuto čtvercovou grafiku, bude na FB tento obrázek velký. Vyzkoušejte si to. 🙂

---

6) Facebooková událost

Pro facebookovou událost použijte rozměr grafiky 1920 x 1080 px.

---

7) Příspěvek na Instagram

Zde vás Canva také navede a nabízí již připravený rozměr obrázku, stačí si jen vybrat formát „Příspěvek na Instagramu“. Jinak je to rozměr 1080 x 1080 px. Obrázky ale nemusíte upravovat do této velikosti. Stačí udělat ořez na čtverec, nebo fotit přímo na velikost čtverce. Vidím na Instagramu, že lidé již dnes vkládají fotky na výšku nebo šířku. Pozor ale na malou drobnost – v celkovém přehledu obrázků v profilu je vidět pouze čtvercový výřez, tak ať to nevypadá divně.

---

8) Úvodní fotka na FB

Obrázky na úvodní fotku vašeho soukromého profilu, skupiny nebo komunity.

Canva uvádí rozměr úvodní fotky na FB 820 x 312 px, Fotor 851 x 315 px. A ještě k tomu FB rád mění pravidla pro rozměry této úvodní fotky. Tak teď babo raď.

Jak to má nyní FB:

Úvodní fotka

Na počítači se zobrazuje v rozměrech 820 x 312 px, na telefonech 640 x 360 px. Nejrychleji se tato fotka načítá, pokud je soubor jpg a fotka 851 x 315 px a její velikost je menší než 100 kB. Minimální velikost této fotky je 400 x 150 px. Pokud obsahuje úvodní fotka text nebo logo, bude lepší ve formátu png.

Profilová fotka

Na počítači se zobrazuje v rozměrech 170 x 170 px, na telefonech 128 x 128 px nebo 36 x 36 px. Nezapomínejte na to, že v reklamách a příspěvcích je vaše profilová fotka umístěna do kulatého rámečku. Tak vyberte takovou fotku, které bude slušet i tento kulatý rámeček.

Soukromý profil – úvodní fotka

Při tvorbě úvodní fotky si dávejte pozor na umístění profilové fotky a tlačítek, které ji překrývají. Do těchto míst neumísťujte žádný text nebo logo, nebyly by vidět.

Takhle vidím svůj soukromý profil já:

 

Takhle vidí můj soukromý profil ostatní:

Všimněte si, že tlačítka jsou trochu jiná a jinde. Toto zobrazení FB rád (a poměrně často) mění. Proto až budete tvořit úvodní fotku, podívejte se nejdřív, jak váš profilu uvidí ostatní.

Jak na to? V pravém dolním rohu úvodní fotky vidíte tři tečky. Ty rozklikněte a dejte „zobrazit jako“. Tam vyberte možnost „jak můj profil vidí ostatní?“ A hned budete vědět. 😃

Polohu profilové fotky a tlačítek si pak buď zapamatujte, nebo vyfoťte a můžete jít vytvořit svoji úvodní fotku. Já vše vytvářím v Canvě, takže si zadám nový rozměr 820 x 312 px. A jděte tvořit.

Úvodní fotka pro Komunitu na Facebooku

Problém s překrýváním úvodní fotky ve vaší komunitě mít nebudete – tam se to prostě nepřekrývá.

Takhle svou komunitu na Facebooku vidím já:

 

Abyste viděli, jak vaši komunitu vidí ostatní: Vedle „sdílet“ pod úvodní fotkou zmáčkněte tři tečky a vyberte „zobrazit profil návštěvník stránky“.

A hned uvidíte, jak to vidí ostatní. 😃

Velikost obrázku, který jsem si připravila v Canvě, je 820 x 312 px. To je rozměr, který hezky sedí a bude se zobrazovat celý.

 

FB skupina – úvodní fotka

Problém s překrýváním úvodní fotky nebudete mít ani ve vaší skupině. Tam se to také nepřekrývá.

Takhle to vidí členové vaší skupiny:

Někdy se uvádí ideální rozměr fotky 820 x 428 px. Jak se sami můžete přesvědčit, FB ji automaticky pěkně oříznul. Neznamená to, že tento rozměr nemůžete použít – jen počítejte s tím oříznutím (přesně FB ořízne nahoře 43 pixelů a dole 51 pixelů).

Takže buď zde vytvořte rozměr 820 x 312 px, nebo dejte pozor na ořezy. 😉

---

Rychlé shrnutí rozměrů pro jednotlivé příspěvky:

Obrázek pro FB atributy – 1200 x 628 px

Obrázek, který vkládám do videa – 1920 x 1080 px

Obrázek pro miniaturu na Youtoube – 1280 x 720 px

Příspěvek na FB – 940 x 788 px, jakoukoliv čtvercovou grafiku

Facebooková událost – 1920 x 1080 px

Příspěvek na Instagramu – 1080 x 1080 px, čtvercovou grafiku

Úvodní fotka na FB – 820 x 312 px, pozor na profilovku a tlačítka

Obrázek na váš web – podrobně se dozvíte o velikostech obrázků v tomto článku>>>

A tady si můžete stáhnout můj tahák, abyste vše měli kdykoliv po ruce. 

Doufám, že nám to zase brzy nezmění. (Ale i kdyby ano, nebojte – sleduji to, takže jak budou nějaké novinky, článek upravím.)

Zatím přeji krásnou tvorbu.

Pokud nevíte, jak si vytvářet různé rozměry grafiky a který nástroj použít, vyzkoušejte Canvu. Já osobně ji používám na kompletní grafiku, co vytvářím pro sebe a své klienty. Můžete se ZDARMA mrknout na video návod Jak si založíte účet v Canvě. Nebo pokud již Canvu máte, a nevíte jak s ní efektivně pracovat a naplno využít její potenciál, mám pro vás online kurz Tvorba obrázků v Canvě krok za krokem. 

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ě