Úpravy obrázků pro web

Pro rychlé načítání webu je důležité používat obrázky ve správné velikosti. Poradíme vám jak na to. A našli jsme pro vás grafické programy zdarma, které vám pomůžou.

Obrázky a ikony jsou důležitým prvkem webu, který upoutá pozornost čtenáře a informace vizuálně oddělí a zpřehlední. K tomu, aby se čtenářům vaše stránky dobře prohlížely, mějte na paměti 3 věci – výstižný obrázek, jeho optimální velikost a správné pojmenování.

Výběr obrázků

Základ je mít fotky a obrázky vysoké kvality, až pak si s nimi hrát. Fotky nejrůznějších situací a objektů najdete v dobrých fotobankách. Chcete-li ukázat své kanceláře, zaměstnance či své produkty, fotobanky nechte stranou a oslovte profesionála, nebo se do focení pusťte sami. Ukládejte pak fotky ve formátu PNG.

TIP: Fotíte-li své produkty sami, dejte si záležet na přípravě fotografického prostředí. Třeba i použitím vlastního boxu s osvětlením.

Grafické programy – 7  nejlepších

PicPick je šikovný program pro pořizování snímků obrazovky a jejich úpravu. Oceníte jej, když chcete zachytit jenom část obrazovky a nechcete dodatečně ořezávat obrázek.

Online nástroj Canva si zamilujete. Vytvoříte v něm grafiku, na jakou si vzpomenete – vizitky, plakáty, pozvánky i obrázky na sociální sítě ve správném formátu. Vybrat si můžete už z hotových šablon nebo si vytvořit vlastní design.

PicMonkey vám pomůže s kolážemi. Ty se hodí třeba na sociální sítě.

Pixlr je nástroj s pokročilými funkcemi. Obrázky můžete upravovat ve webovém rozhraní nebo v aplikaci v mobilu.

Fotor se chlubí popisem “jako online Photoshop”. Obrázky v něm upravíte, přidáte efekty nebo popisky. Návody a rady jsou vám k dispozici online.

Gimp patří mezi sofistikované grafické programy pro úpravy obrázků, retušování i kreslení. Stačí si jej stáhnout a instalovat, vše zdarma. Funkcemi i používáním konkuruje placeným nástrojům.

Photopea je povedený grafický editor zdarma od českého programátora. Funguje celý ve webovém prohlížeči, pracuje s vrstvami, funkcí drag&drop nebo třeba s prolínáním barev.

Správná velikost obrázků pro web

Jak si poradit s rozlišením obrázku a jeho velikostí? Kvalita obrázků závisí na jejich umístění – lepší se hodí pro tisk, nižší postačí pro web. Webové stránky si chceme prohlížet rychle, proto platí pravidlo – čím menší obrázky, tím rychlejší načítání stránky.

Obrázky na web postačí mít ve velikosti 300 kB a menší. Máte-li celostránkový obrázek (třeba na pozadí), neměl by být větší než 1 MB.

Rozměry obrázku se měří v pixelech. Pro lepší představu, náš úvodní obrázek je 640 x 425 velký. Při změně rozměrů fotky nezapomeňte zachovat poměry stran.

Rozlišení obrázku (neboli kvalita) se měří v bodech na palec (dpi = dots per inch). To znamená čím víc bodů na stejně velkou plochu, tím lepší kresba a kvalita fotografie. Obrázky pro web splní svůj účel s rozlišením 72 dpi. Dobrá zpráva je, že většina grafických nástrojů ukládá obrázky v rozlišení vhodném pro web a vy ho už nemusíte upravovat.

4 nástroje pro optimalizaci obrázků

TinyPNG pro optimalizaci obrázků ve formátu PNG.

JPEGmini zredukuje obrázky v JPEG.

Compressor.io si poradí s formáty JPEG, PNG, GIF, SVG.

Kraken.io taky zpracuje více formátů a za poplatek optimalizuje i větší množství obrázků najednou.

TIP: Máte už svůj web? Ověřte si rychlost načítání, PageSpeed od Google vám dá i tipy, jak stránku zlepšit.

Jak na lepší dohledatelnost

Pojmenujte obrázky na stránkách podle toho, co zobrazují, a vyhledávače se vám odmění. Jak? Zlepšíte si pozici v přirozeném vyhledávání. Roboti ve vyhledávačích totiž procházejí všechny stránky, jejich obsah, odkazy i obrázky, ale všechno “vidí” jen v textové podobě. A tak název obrázku “fotka1.png” robotovi neřekne nic o relevantnosti a ten ve výsledcích vyhledávání upřednostní spíš “tatry-krivan.png”.

Vyhledávačům to ještě zjednodušíte, když k obrázku vyplníte alternativní text neboli alt tag (v administraci redakčního systému nebo ve zdrojovém kódu). Výstižně popište, co je na obrázku a pokud možno přirozeně použijte i klíčová slova.

TIP: Při pojmenovávání obrázků používejte stejný formát, pište malými písmeny, bez diakritiky a slova oddělujte pomlčkou. Jednak si zpřehledníte seznam svých obrázků a také pomůžete vyhledávačům určit pozici ve vyhledávání.