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 resizepiconline.com/en, 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. Kvalitu (quality) zvolím střední (medium) a typ souboru (file type) zvolím JPG, což je nejlepší formát pro obrázky do fotogalerie. No a už stačí kliknout jen na Resize a níže se mi ukážou odkazy na stažení zmenšených obrázků. Hned vidím výsledný rozměr a velikost, kolik zmenšený obrázek má a třeba z těch 3 MB se mi fotografie 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 doporučuji adresu resizeimage.net, kde si zase tu fotku z počítače tam nahrajeme. Pak si zvolíme jestli chceme držet nějaký určitý poměr stran (fixed aspect ratio). Já hodně používám poměr 650 x 340px 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. Pak stačí jen v obrázku označit část, kterou chcete vyříznout, dáte tlačítko Cropt a níže ještě můžete zmenšit velikost obrázku a jeho kvalitu, aby zase na webu nebyl moc velký. Pak stačí jen kliknout na Resize Image a následně Download Image a fotku si stáhnout do počítače.

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 online tvůrce s úsměvem :) Pomáhám podnikatelům stát se v jejich oboru superhrdiny na internetu a to díky webu a online marketingu. Snažím se jim ukázat, jak žít a podnikat s úsměvem (nejen) díky internetu :) Jsem tvůrce WEBů s úsměvem a zároveň učím podnikatele, jak si udělat web a z webu svého obchodníka a být úspěšnými v internetovém světě. Jsem také součástí firmy Davida Kirše, který je jeden z TOP online marketerů v ČR.

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.

CHCI TY NEJLEPŠÍ INFORMACE
Komentáře
  1. 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

  2. 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 emailová 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.