Jak optimalizovat obrázky pro web

Obrázky pomáhají představit produkty, služby i samotný charakter webu. Kvalitní fotografie dokáže přitáhnout pozornost a zpříjemnit návštěvníkům prohlížení stránek. Pokud jsou ale obrázky příliš velké, nekvalitní nebo nevhodně připravené, mohou zpomalovat načítání webu a zhoršovat celkový dojem.

Dobrou zprávou je, že optimalizace obrázků nemusí být složitá. Stačí vybrat vhodné fotografie, přizpůsobit jejich velikost a formát a před nahráním je správně připravit.

1. Používejte obrázky, které mají na webu svůj účel

Než začnete řešit velikost a formát souborů, zamyslete se nad tím, zda daný obrázek skutečně potřebujete. Každá fotografie by měla pomáhat představit obsah, vysvětlit nabídku nebo podpořit celkový vzhled stránky.

Na firemním webu mohou dobře fungovat fotografie vlastního týmu, provozovny nebo ukázky práce. Fotograf může představit své portfolio, restaurace jídla a prostředí a e-shop jednotlivé produkty.

Vyhněte se velkému množství dekorativních obrázků, které nepřinášejí žádnou další hodnotu. Menší počet kvalitních a relevantních fotografií často funguje lépe než dlouhá galerie nesouvisejících snímků.

2. Zmenšete obrázky na vhodné rozměry

Jednou z nejčastějších chyb je nahrávání fotografií v původní velikosti přímo z fotoaparátu nebo telefonu. Takové soubory mohou mít několik tisíc pixelů na šířku, přestože se na webu zobrazují jen v malém prostoru.

Před nahráním proto zvažte, jak velký obrázek skutečně potřebujete. Jiný rozměr bude vhodný pro širokou úvodní fotografii, jiný pro menší obrázek v článku a jiný pro náhled produktu.

Například fotografii, která se bude zobrazovat v prostoru širokém přibližně 800 pixelů, obvykle není nutné připravovat v šířce 4 000 pixelů. Přesná velikost závisí na rozložení stránky a požadované kvalitě, ale cílem je zbytečně nepřenášet více dat, než je potřeba.

Současně obrázky nezmenšujte příliš. Pokud je malá fotografie roztažena na velkou plochu, může být rozmazaná nebo působit nekvalitně.

3. Zvolte vhodný formát obrázku

Jednotlivé formáty se hodí pro různé typy obsahu. Výběr může ovlivnit velikost souboru, kvalitu i možnost zachovat průhledné pozadí.

• JPEG (JPG): často se hodí pro fotografie a obrázky s mnoha barevnými přechody.
• PNG: může být vhodný pro grafiku, která potřebuje průhledné pozadí nebo ostré hrany.
• WebP: moderní formát, který často nabízí menší soubory při dobré kvalitě a podporuje také průhlednost.
• SVG: vhodný zejména pro loga, ikony a další vektorovou grafiku, pokud je k dispozici v tomto formátu.

Pro běžné fotografie může být WebP praktickou volbou, pokud jej váš editor nebo používaná služba podporuje. Není však nutné převádět každý obrázek ručně. Některé platformy formáty a velikosti automaticky optimalizují.

4. Komprimujte obrázky bez zbytečné ztráty kvality

Komprese zmenšuje velikost souboru, takže se obrázek může rychleji stáhnout. U fotografií lze často dosáhnout výrazného zmenšení, aniž by si běžný návštěvník všiml zásadního rozdílu v kvalitě.

K přípravě můžete využít online kompresní nástroje nebo programy pro úpravu obrázků. Některé umožňují nastavit úroveň komprese a hned porovnat původní obrázek s upravenou verzí.

Po kompresi zkontrolujte, zda fotografie stále vypadá dobře. Pozor zejména na rozmazané detaily, viditelné obrazové artefakty a nepřirozené barevné přechody.

Nemá smysl dosahovat co nejmenšího souboru za každou cenu. Cílem je rozumná rovnováha mezi velikostí, rychlostí načítání a vizuální kvalitou.

5. Zachovejte správný poměr stran

Poměr stran určuje vztah mezi šířkou a výškou obrázku. Pokud fotografii při úpravě roztáhnete nebo stlačíte, může působit nepřirozeně. Lidé i předměty pak vypadají deformovaně.

Při změně rozměrů proto zachovávejte původní poměr stran, pokud záměrně nevytváříte ořez. Když potřebujete fotografii přizpůsobit konkrétnímu prostoru, raději ji vhodně ořízněte.

Myslete také na to, co je na fotografii nejdůležitější. U portrétu by například ořez neměl odstranit obličej a u fotografie výrobku důležité detaily produktu.

6. Připravte obrázky také pro mobilní zařízení

Obrázek, který vypadá dobře na velkém monitoru, může na telefonu zabírat příliš mnoho místa nebo ztratit důležité detaily. Zkontrolujte proto, jak se fotografie zobrazují na menších obrazovkách.

Důležité je, aby obrázky nepřesahovaly šířku stránky, zachovávaly správné proporce a neztěžovaly čtení okolního textu. U širokých úvodních fotografií počítejte s tím, že se na mobilu může zobrazit pouze část původního snímku.

Pokud váš webový editor nabízí mobilní náhled, využijte ho. Po dokončení úprav se vyplatí stránku otevřít také na skutečném telefonu.

7. Pojmenujte soubory srozumitelně

Před nahráním můžete obrázkům přiřadit názvy, podle kterých snadno poznáte jejich obsah. Místo názvu typu IMG_4821.jpg je praktičtější například interier-kavarny.jpg nebo portfolio-produktove-fotografie.webp.

Srozumitelné názvy vám usnadní správu souborů, zvlášť když na webu používáte větší množství obrázků. Pokud je název relevantní, může také pomoci vyhledávačům lépe porozumět obsahu souboru.

Názvy ale pište přirozeně. Není potřeba do nich vkládat dlouhé řetězce klíčových slov ani opakovat stejnou frázi u každé fotografie.

8. Nezapomeňte na alternativní text

Alternativní text, často označovaný jako alt text, stručně popisuje obsah nebo účel obrázku. Pomáhá lidem, kteří používají čtečky obrazovky, a může také vyhledávačům poskytnout další kontext.

Pokud například fotografie představuje konkrétní výrobek, může alternativní text jednoduše uvést jeho název. U obrázku, který ukazuje důležitou činnost nebo situaci, popište to, co je pro danou stránku podstatné.

Alt text by měl být výstižný a pravdivý. Není nutné začínat každé popisné pole slovy "obrázek" nebo "fotografie" ani do něj uměle vkládat klíčová slova. U čistě dekorativních obrázků může být vhodný prázdný alternativní text, pokud to způsob vložení obrázku umožňuje.

9. Nepoužívejte zbytečně mnoho velkých obrázků

I když jsou jednotlivé fotografie optimalizované, velké množství obrázků může stránku stále zpomalovat. To platí zejména pro dlouhé galerie, rozsáhlá portfolia nebo stránky s mnoha produktovými fotografiemi.

Vyberte proto jen ty snímky, které mají pro návštěvníka skutečný význam. U rozsáhlejších galerií můžete fotografie rozdělit do kategorií nebo na více stránek, aby se obsah lépe procházel.

Některé platformy podporují také postupné načítání obrázků, které nejsou hned viditelné na obrazovce. Pokud je tato funkce dostupná, může pomoci omezit počáteční množství stahovaných dat. Hlavní úvodní obrázek by však neměl být zbytečně odkládán, protože je viditelný hned po otevření stránky.

10. Využijte možnosti svého webového editoru

Pokud si web vytváříte pomocí vizuálního editoru, zjistěte, jakým způsobem pracuje s nahranými obrázky. Některé služby automaticky mění jejich velikost nebo vytvářejí optimalizované varianty, jiné mohou vyžadovat větší přípravu před nahráním.

Například Webnode umožňuje vkládat fotografie do jednotlivých částí stránek a upravovat jejich zobrazení podle možností editoru. Před nahráním rozsáhlé galerie si vyzkoušejte, jak obrázky vypadají v běžném i mobilním zobrazení.

Pokud máte podezření, že fotografie zpomalují váš web, nejprve zkontrolujte jejich rozměry a velikost souborů. Není nutné hned měnit celý web nebo instalovat další nástroje.

Kontrolní seznam před zveřejněním

Před publikováním stránky s obrázky si ověřte:

• Používám pouze fotografie a grafiku, které mají smysl pro obsah?
• Odpovídají rozměry obrázků jejich skutečnému použití?
• Nejsou soubory zbytečně velké?
• Je zvolen vhodný formát?
• Vypadají fotografie kvalitně a nejsou deformované?
• Zobrazují se správně na mobilním telefonu?
• Mají důležité obrázky výstižný alternativní text?
• Načítá se stránka bez zbytečného čekání?

Nemusíte všechny obrázky na webu upravovat do posledního detailu. Největší přínos obvykle přinese příprava velkých fotografií a dalších souborů, které se na stránkách zobrazují ve velkém množství.

Shrnutí

Optimalizace obrázků pomáhá udržet web vizuálně kvalitní a současně omezit zbytečně velké soubory. Používejte relevantní fotografie, přizpůsobte jejich rozměry, zvolte vhodný formát a zkontrolujte jejich zobrazení na mobilu. Díky těmto jednoduchým krokům můžete zlepšit uživatelský dojem i rychlost načítání stránek.

⭐ Populární témata ⭐

Chcete, aby váš web vypadal dobře a zároveň se rychle načítal? Projděte si naše průvodce kvalitním designem, výběrem šablony a dalšími způsoby, jak zlepšit své webové stránky.