Jak upravit fotky/obrázky na web

V předchozím článku jsem vám ukázal, kde si zdarma stáhnout obrázky na svůj web a nyní pokračujme dále a ukažme si, jak s obrázky dále pracovat a jak je nahrát na svůj web, tak aby fungovaly.

Možná si říkáte, že vložit obrázek na web není přeci žádná věda, ale až moc často se setkávám s tím, že to může zablokovat celý web. Jak se to může stát?

No stačí, když třeba na web nahrajete 10 obrázků po 5 MB a v tu chvíli, když návštěvník příjde na stránku, tak stránka má 50 MB a taková stránka se mu nemusí vůbec načíst. To nemluvím o tom, když na tu stránku přijde někdo přes mobilní telefon a ta stránka mu třeba sežere jeho měsíční data. Takový návštěvník jistě sežere vás.

I z pohledu vyhledávačů např. Google testuje za jak dlouho se vaše stránky načítají. A pokud je to dlouho, tak váš web v tom vyhledávání posouvá dozadu.

Takže dvě hlavní zásady, než na web obrázek nahrajeme jsou:

• zmenšit jeho rozměr a velikost tak, aby to bylo dostačující pro tu danou stránku, kde ho chceme použít
• potřebujeme soubor správně přejmenovat než jej nahrajeme na ten svůj web.

Hromadné zmenšení fotek na web

Pokud nahráváme na svůj web fotogalerii se spoustou fotek, tak vyzkoušejte adresu birme.net, kde se dají obrázky hromadně zmenšovat. Jednoduše si tam nahrajete ty své fotky z počítače. Nastavíte šířku (width) třeba na 1000 px, což bývá přibližně šířka webové stránky, výšku (height) dáte automatickou. Kvalitu (quality) dám 80 nebo 90 %. Případně si můžu všechny obrázky najednou přejmenovat (rename) na společný název např. img-xxx (místo xxx se automaticky vepíšou čísla). No a už stačí kliknout na SAVE FILES a začnou se mi stahovat obrázky do počítače (některé prohlížeče vám napíšou upozornění, že se stahuje více souborů najednou, tak je potřeba povolit nebo pokud by vám to nešlo, tak dejte SAVE AS ZIP). Výsledný rozměr a velikost obrázků např. z původních 3 MB se mi zmenší na několik desítek kB.

Ještě než obrázky nahraju na web

Pamatujte ještě vždy na tu věc, že než soubory s obrázky nahrajete na svůj web, tak je potřeba zkontrolovat názvy souborů. Vždy by měl být název bez mezer, takže místo mezery můžete použít například pomlčku nebo podtržítko. Taky dbejte na to, aby v názvu nebyly písmena, která mají nad sebou háček nebo čárku či jinou diakritiku. Ještě by neměl název obsahovat tečky, čárky, dvojtečky, lomítka a tyto podobné znaky. Ideálně použijte jen malé písmena, čísla a podtržítka místo mezer. Kdybyste totiž nahráli obrázek na web s těmi znaky v názvu, tak pak se může stát, že v některém prohlížeči vám obrázky budou fungovat a v některém ne. Proto vždy kontrolujte názvy souborů, který na svůj web nahráváte.

Úpravy obrázků

Pokud potřebujeme jen oříznout část obrázku, tak na výše uvedené adrese birme.net si můžem zvolit rozměr obou stran a v náhledech se mi ukazuje hned oříznutí všech obrázků na požadovaný rozměr. Já můžu v náhledech si oříznutí posunout, tam kde jej chci mít. Já hodně pro web používám rozměr obrázku a poměr stran 800 x 419 px což je ideální poměr stran pro náhledový obrázek pro článek na blogu a zároveň pro náhled naší webové stránky na Facebooku.

Pokud chci s fotkou nebo obrázkem více pracovat, tak bych pak spíše použil adresu canva.com, což je skvělý obrázkový online editor na různé úpravy. Je potřeba se zde zdarma zaregistrovat. A buď si zvolíte rozměr některé z připravených šablon nebo využijete vytvoření ve vlastním rozměru (use custom dimensions).

Dále pak můžete používa předpřipravené vzorové obrázky nebo si sestavíte svůj vlastní. Přes záložku Upload si jej tam nahrajete z počítače a přetáhnete do plochy pro úpravy. Dále můžete do něj vkládat texty, ikony, barevné plochy a další elementy, které naleznete v záložkách. Jakmile máme obrázek upravený, tak stačí kliknout na Download a uložit si jej do počítače, případně nahrát pak na web.

Pokud jste použili některý vzorový obrázek, tak se dívejte na to, jestli jste si vybrali zdarma nebo placený obrázek, protože u těch placených budete před stažením vyzváni na zaplacení. Proto raději nahrávejte své obrázky nebo obrázky z internetu, na které máte oprávnění.

Toto jsou tedy základní věci, jak s obrázky pro web pracovat a co s nimi dělat ještě před tím než je na ten samotný web nahrajeme.