Příprava obrázků pro web

Technologie za nás dneska vyřeší hodně, ale stejně je potřeba při přípravě podkladů přemýšlet a připravit si je tak, aby nám nejen seděly do daného obsahu, ale také se nám správně zobrazovaly.

Pro úpravu mediálních souborů (obrázky/videa) nám může posloužit běžně dostupný software (malování, Photoshop, apod...), kde každý z nich je různě náročný na znalost daného programu a "cit" pro design. Máme tu ale jeden, který se vymyká.

Canva - grafický editor a mnohem víc

Je to už pár let, kdy se nám představila Canva a změnila pohled na úpravu grafiky přímo ve webovém prohlížeči. Je to samozřejmě poněkud nadsázka, ale pravdou je, že editace a příprava obrázků nejen pro web tím dostala úplně nový rozměr.

Pro běžnou editaci postačuje bohatě bezplatný plán, který poskytuje vše nezbyné pro editaci jak obrázků, tak základních úprav videa a jejich export.

Co vlastně budete hlavně potřebovat?:

• Nastavení vlastního rozměru plochy - to nastavujeme proto, abychom dostali grafiku do rozměru, který potřebujeme (např. rozměr banneru, rozměr pro záhlavý apod...).
• Export obrázku - export ve formátu JPEG vč. 80% komprese nebo PNG.
• Export a základní editaci pro video - zejména střih záběrů a export do mp4.

Jak na to?

Jako první nastavíte velikost plána v rozměru, který potřebujete nahrát do webu.

Obrázek můžete následně vybavit obrázkem, textem a libovolně s jednotlivými objekty manipulovat. Vše pak rovnou vyexportujete v požadovaném formátu.

Na co nezapomenout

Při exportu grafických podkladů pro web je dobré myslet na pár základních pravidel:

• Datová velikost - na webu nepotřebujete mít obrázky o velikosti několika mega, ale bohatě postačují nižší řády stovek kilobajtů.
• Komprese - z pravidla nám stačí obrázky ve formátu JPEG (které náš web následně převádí do webp formátu nové generace) a to vč. 80% komprese. Komprese nebude znát a ušetříme tím cenné data.
• Název souboru a alternativní popisek - byť to sem a tam nedodržuji ani já, u podstatných obrázků je dobré je také vhodně popsat a vybavit je adekvátním alternativním popiskem (zobrazený v případě problémů s načtením obrázku nebo při prohlížení skrze speciální zařízení - nevidomí).

Pokud chcete kompresy obrázků ještě vylepšit, doporučujeme využít online služby TinyPNG a TinyJPG, které se postarají o ještě lepší přípravu výsledného souboru a můžete tak ušetřit další cená data a zrychlit tak načítání webu.

Vkládáme obrázek do webu

V rámci CMS Strapi je knohovna mediálních souborů, do které můžeme nahrávat a zároveň částečně editovat vložený obsah. Nový soubor z pravidla nahrajeme přetažením a nebo výběrem z disku počítače.

Zbytek už je čistě na pozici, do které obrázek vkládáme, a kde můžeme nahraný obrázek vybrat právě z knihovny mediálních souborů.