Mnoho neznalých majitelů webových stránek a internetových obchodů přidává na webové stránky obrázky, aniž by je nejprve optimalizovali. Po čase začnou mít důsledky takového počínání negativní dopad na výkonnost webových stránek. Níže vám poradíme, jak připravit fotografie pro webové stránky tak, aby měly pozitivní vliv na jejich výkon.
1 Záleží na formátu obrázku
Donedávna byly pro webové stránky doporučovány dva formáty obrázků: JPG a PNG.
Zásada, kterou jsme se při výběru řídili, byla:
JPG pro fotografie a PNG pro grafiku
Výše uvedené formáty nejsou v současné době nejlepší volbou pro obrazové soubory pro webové stránky.
Místo toho se navrhuje, aby se fotografie zveřejňovaly online ve formátu WebP.
Pokud jsme již na web přidali obrázky ve formátu PNG nebo JPG a máme web ve WordPressu, můžeme použít příkaz zátky změnit formát souboru na WebP.
Jak si můžete přečíst na Oficiální webové stránky společnosti Google, obrázky uložené ve formátu WebP mají hmotnost o 26% nižší než obrázky uložené ve formátu PNG a o 25% - 34% nižší než obrázky uložené ve formátu JPEG.
Při velkém počtu souborů graif na stránce tato čísla výrazně ovlivňují výkon webu. S formátem WebP je však spojena jedna nepříjemnost. Konkrétně starší verze prohlížeče Mozilla Firefox jej nepodporují, takže uživatelé používající tyto verze prohlížeče Firefox mohou mít problémy se zobrazením obrázků.
Když už mluvíme o přípravě obrázků pro webové stránky, je stále důležité mít na paměti, že pro animace může být dobrou volbou formát GIF, který se po letech nepřízně těší opětovné oblibě.
V případě animací je někdy vhodnou volbou přidání obrázků ve formátu GIF.
V případě ikon nebo log můžeme zahrnout grafické prvky ve formátu SVG.
2 Nezapomeňte na rozměry obrazových souborů
Rozměrem rozumíme skutečnou šířku a výšku obrázku vyjádřenou v pixelech.
Neměli bychom přidávat širší obrázky, než potřebujeme. Jde o to, že každý obrázek na stránce má určitou maximální šířku, ve které může být zobrazen.
To znamená, že pokud je maximální šířka obrázku na stránce 1920 px, nemá smysl nahrávat obrázek s šířkou větší než tato hodnota. Bohužel je běžné, že uživatelé nahrávají grafické obrázky o šířce 5000 px, což je zcela neoprávněné.
Změnu rozměrů fotografie lze provést i v aplikaci Paints. Celkovou optimalizaci je samozřejmě lepší provádět v pokročilejších programech, jako je PhotoShop nebo bezplatný GIMP.
Pokud provozujete internetový obchod a chcete nahrát obrázky produktů, poměr šířky a výšky by měl být stejný. Čtvercové fotografie produktů mají běžné rozměry. A co je nejdůležitější, obrázky v těchto rozměrech vypadají správně na monitorech počítačů i na displejích chytrých telefonů.
Důležitá poznámka: Zmenšené obrázky je vhodné uložit jako nový soubor. Možná zjistíte, že obrázky v původní velikosti jsou užitečné i jinak.
3 Fotografie nesmí vážit příliš mnoho
Velikost obrázků je velmi důležitým prvkem obrazových souborů na internetu. Je běžné, že tvůrci webových stránek dostávají od grafika obrázky, které někdy váží více než 3 mb.
Tato velikost souboru je příliš velká.
Doporučujeme držet se zásady: Fotografie by neměla vážit více než 1 mb..
Pokud jde o změnu velikosti obrazových souborů, lze zde použít následující postupy. Photoshop, nebo GIMP.
Kromě toho existují speciální aplikace pro prohlížeče, které umožňují komprimovat obrazové soubory.
Příkladem takového webového softwaru je Tinypng.
4 Optimalizace fotografií pro SEO
Musíme mít na paměti, že roboti Googlu, kteří skenují naše stránky, se dívají také na kód HTML, který zahrnuje i naše obrázky.
Zde jsou důležité dva parametry. Název samotného souboru a nastavení atributu alt.
V kódu HTML stránky jsou obrázky označeny značkami img.
V tomto případě je na fotografii zobrazena žena v kanceláři pracující u počítače, takže název byl vytvořen tak, aby odpovídal obsahu fotografie.
Totéž platí pro atribut alt. Ve výše uvedeném příkladu jsou name i alt shodné. To však není problém. Důležité je, aby odpovídaly obsahu obrázku.
Je rovněž třeba mít na paměti, že atribut alt je ideálním místem pro vložení klíčového slova.
Ti, kdo připravují obrázky pro webové stránky, se také často ptají, zda mají použít polské znaky.
Pokud mluvíme o názvech souborů, nemělo by se to dělat. Pokud mluvíme o atributech alt, pak jsou zde pokud možno vítány polské znaky.
Správný název a hodnota atributu alt jsou důležité ještě z jednoho důvodu. Dávají našim obrázkům šanci zobrazit se v seznamu Grafika Google — To je důležité, protože v grafických zdrojích Googlu vyhledává jen málo lidí.
Důležitost optimalizace obrázků pro SEO ukázal jeden z klientů agentury. Studio 4AD, pro které jsme vytvořili internetový obchod. Díky správné optimalizaci grafiky se obrázky obchodu objevily vysoko ve výsledcích vyhledávání v grafickém vyhledávači Google, což se projevilo velkou návštěvností obchodu z grafických výsledků vyhledávání Google.
Pokud se chcete dozvědět více o optimalizaci obsahu na svých webových stránkách, stojí za to se seznámit s tématem copywriter, která se zabývá tvorbou textů optimalizovaných pro vyhledávání Google.
Jak připravit fotografie pro webové stránky: shrnutí
Optimalizace obrázků pro webové stránky je důležitým prvkem ovlivňujícím jejich výkon. Je dobré připravit obrazové soubory před jejich nahráním na server. Ušetříte tím značné množství času a také se vyhnete situaci, kdy roboti Googlu budou váš web kvůli neoptimalizovaným obrázkům hodnotit nízko.
