Jak upravit fotky na web

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.

Jsem webmaster a tvůrce webů s úsměvem :)
Tvorba internetových stránek mne fascinuje od chvíle, kdy jsem na internet nahrál svůj první web. Každý web je pro mne umělecké dílo, které může vidět celý svět. Daleko důležitější je však jaký přinese užitek. Nesmírně mne na tom baví hledání jednoduchých řešení a možností propojení podnikání a online světa internetu.
Proto s týmem skvělých webmasterů vytváříme osobní, podnikatelské a firemní webové stránky s jednoduchou editací. Takové, které kvalitně prezentují služby, projekty a produkty všeho druhu.
Navíc jsem nadšený do online vzdělávání. Rád předávám své zkušenosti na blogu, videích a návodech nebo seminářích.

CHCETE DALŠÍ TIPY Z MÉHO BLOGU?

Nechte mi zde svůj email a jakmile budu mít něco zajímavého, tak vám pošlu zprávu.

Komentáře
  1. Dobrý den. Chtěla bych se zeptat jak správně doostřit fotografii na web? Fotografie v malém náhledu vypadá dobře, ale když se přejede a ukáže se zvětšovací rámeček pro prohlížení detailů je fotografie rozsypaná nebo neostrá. Když ji upravím v editoru vypadá dobře, když ji nahraju na web je to hrůza.

    • Daniel Križák napsal:

      Hezký den. Ono záleží jaký systém pro web používáte a jak pracuje s fotkama. Některé redakční systémy fotky různě zmenšují a snižují kvalitu. Je potřeba se podívat přímo na ten systém co máte, jestli v nápovědě najdete v jakém formátu fotky do něj nahrávat a jakou kvalitu zvolit při vložení na web.

  2. petr napsal:

    Dobry den pane Krizak
    chtel bych poslat obrazek na komentare pod clanky AE NEWS .CZ neboli aeronet.
    drive se me to darilo ale admin tam neco udelal a ted se me ukazuji jenom odkazy na ty obrazky.Takze se neukazuji primo ale clovek musi nejprve na ten odkaz kliknout. Zkousim vsechno mozny zatim na to nemohu prijit,jsem totis amater ale nekteri diskutujici tam vesele obrazky posilaji takze to musi jit .
    Dekuji za radu. Petr

  3. Karel napsal:

    A co takhle responzivní weby kdy je potřeba aby se obrázek zobrazoval i na monitorech s rozlišením fillHD na celou obrazovku?

    • Daniel Križák napsal:

      Hezký den Karle, určitě při zmenšování rozměru obrázku je potřeba myslet na to, kde bude použit na webu. Pokud to má být obrázek přes celou obrazovku, např. na pozadí, tak je potřeba aby rozměr byl větší, ale i tak se dá optimalizovat jeho velikost kompresí např. na 70% ;)

Přidat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Vaše osobní údaje budou použity pouze pro účely zpracování tohoto komentáře. Osobní údaje zpracováváme podle těchto zásad.