Jak přidat obrázek na web?

Pár slov na začátek

V minulém díle jsme si ukázali vše o správě stránek a posouváme se dál.

Vítejte ve tretí části našeho seriálu Tvorba webových stránek – kompletní návod, se kterým je tvorba webu hračkou pro každého. V této části se zaměříme na práci s obrázky ve Webnodu a odpovíme si na nejčastější dotazy, co se obrázků týká.

Jak přidat obrázek? Jak upravit obrázek? Lze obrázek zvětšit/zmenšit či přesunout? Nabízí Webnode vlastní knihovnu obrázků?

Pojďme na to!

Obecné informace

Jeden obrázek vydá za tisíc slov. Toto pravidlo platí taky u webových stránek. Je však důležité vědět, jak s obrázky pracovat, aby byl Váš web nejen pěkný, ale také rychlý a funkční.

Důležitou vlastností obrázku je jeho velikost. Vložením příliš velkého obrázku se webová stránka zbytečně zpomalí a zaplní více místa na serveru než je potřeba. Zaplnění místa na serveru, tzn. hosting, je problémem hlavně při bezplatné verzi či nižších prémiových balíčcích. Jaký hosting určitý balíček nabízí, se dočtete v článku Webnode cena.

U obrázků je dobré rozlišovat zda je používáme jako pozadí sekce nebo jako ilustrační obrázek do těla stránky.

Pro obrázky, které se používají jako pozadí sekce, se doporučuje rozlišení 1920 px pro delší stranu, velikost však maximálně 600 kB.

Více o sekcích v článku Jak přidat sekci na web?

Pro obrázky, které se používají do těla stránky se doporučuje 900*600 px, velikost maximálně 250 kB. Galerie pro náročnější uživatele (fotografy) 1200*800 px, velikost maximálně 400 kB.

Přidání obrázku

Přidat obrázek na Váš web ve Webnode jde samostatně jako obsahový blok. Klikněte na znak „+“ a vyberte Obrázek.

Nahrajte obrázek z Vašeho počítače kliknutím na tlačítko Nahrát obrázek, nebo si vyberte některý z dostupných obrázků ve Webnodě knihovně a to výběrem Galerie obrázků.

V případě, že obrázek jste v minulosti již nahráli, můžete jej najít v knihovně obrázků Moje obrázky, tedy není nutné jej přidávat znovu.

Po úspěšném nahrání můžete vidět obrázek na webu.

Nezapomeňte změny publikovat tlačítkem Publikovat.

Úpravy obrázku

Kliknutím na kterýkoli obrázek se zobrazí lišta s možnostmi – Upravit nebo vymazat cez ikonu koš.

Po kliknutí na Upravit můžete nastavit popis obrázku či přidat odkaz.

Popis – popis obrázku se doporučuje vyplnit. Je viditelný v náhledu obrázku a funguje jako ALT popisek pro nevidomé.

Odkaz – akce, která se provede po kliknutí na obrázek v publikované verzi

• Žádný – v publikované verzi webu se na obrázek kliknout nedá, obrázek se nezvětší
• Původní obrázek – v publikované verzi webu se na obrázek kliknout dá, obrázek se otevře v novém okně v rámci stránky

• Webová stránka – v tomto případě se na obrázek v publikované verzi webu kliknout dá, otevře se buď jiná webová stránka, jejíž URL adresu jste zadali do políčka (například https://www.google.cz), nebo jiná stránka v rámci Vašeho webu. Odkaz, který jste použili, můžete vidět po najetí myší na obrázek v levém dolním rohu

Nezapomeňte změny publikovat tlačítkem Publikovat.

Nahrazení obrázku

Nejpoužívanější možností pro Vás však bude Nahradit, kde můžete nahrát svůj vlastní obrázek namísto toho použitého v šabloně.

Klikněte na obrázek a vyberte možnost Upravit.

Po kliknutí na tlačítko Nahradit uvidíte seznam všech knihoven obrázků. Knihovnu obrázků od Webnode, ikony i tu Vaši. Obrázek jednoduše nahrajete přes Nahrát obrázek.

Plusem je, že jakmile nahrajete obrázek do knihovny Moje obrázky, obrázek tam zůstává k dalšímu použití.

Nezapomeňte změny publikovat tlačítkem Publikovat.

Vymazání obrázku

Klepnutím na kterýkoli obrázek se zobrazí lišta s možnostmi – Upravit nebo vymazat kliknutím na ikonu koš.

Použitím ikony koš vymažete obrázek z daného místa na webové stránce. V případě, že obrázek byl na webu použit pouze jednou, obrázek se vymaže i z galerie Moje obrázky.

Pro odstranění obrázku z galerie Moje obrázky a tím vymazání daného obrázku na celé webové stránce, klikněte na Upravit, dále Nahradit.

Tím se dostanete do knihovny, kde jednoduše klepnutím na obrázek a výběrem Smazat obrázek vymažete z galerie.

Nezapomeňte změny publikovat tlačítkem Publikovat.

Globální nastavení obrázků

S Webnode editorem můžete nastavit vzhled všech obrázků na Vašem webu a to jedním kliknutím.

Otevřete Nastavení v levém rohu horní lišty.

Klikněte na Nastavit obrázky pod kategorií Vzhled.

Globální nastavení obrázků zahrnují změnu pozice popisku obrázku, možnost zaoblit rohy obrázků, přidat animaci či upravit pozadí detailu obrázku. Všechny změny, které provedete se zobrazí na příkladu obrázků, které se v nastaveních nacházejí.

V případě, že jste se změnami spokojeni, klikněte na Uložit změny.

Všechny obrázky na Vašem webu se nyní zobrazují s nastavenými změnami.

Nezapomeňte změny publikovat tlačítkem Publikovat.

Videonávod – Obrázky a Fotogaléria

Časté dotazy

Proč po nahrání obrázků do knihovny Moje obrázky musím všechny obrázky nahrávat znovu do fotogalerie?

Obrázky a Fotogalerie jsou v logice vytváření webu ve Webnode dvě různé věci. V případě fotogalerii se fotky vždy nahrávají znovu.

Jak přidat fotogalerii na web ve Webnodu? Přečtěte si náš článek Jak přidat sekci na web? – Fotogalerie.

Jak zvětšit/zmenšit velikost obrázku?

Velikost obrázku můžete jednoduše změnit kliknutím na obrázek v editaci Vašeho webu. Po kliknutí na obrázek uvidíte na každé straně obrázku body, kterými umíte měnit velikost obrázku.

Jak přesunout obrázek?

Obrázek přesunete jednoduše kliknutím a přetažením myší na místo, kde ho chcete mít. Jako indikátor, kde všude můžete obrázek přesunout slouží oranžové čáry, které se zobrazí při přesunu.

Co dělat, když mi žádný obrázek z Webnode knihovny nevyhovuje a vlastní nemám?

V případě, že hledáte specifický obrázek, který se ve Webnode knihovně nenachází, můžete navštívit článek 10 zdrojů na free obrázky pro komerční použití. Zdarma!, kde najdete ty nejznámější online knihovny s obrázky.

Co dělat v případě, že jsem smazal obrázky, ale prostor na serveru mám stále plný?

Počítadlo prostoru Vaší webové prezentace se aktualizuje každých 24 hodin. Po odstranění obrázků je třeba počkat cca 24 hodin, aby se počítadlo prostoru aktualizovalo.