Správná grafika a fotografie na webu – jak se o ně postarat? – I. část
Grafika a fotografie na webu jsou častým problémem, čemuž jsme se už u nás nejednou věnovali, například v článku jak zajistit správnou grafiku a fotografie, aby byl firemní web přitažlivý, nebo článku obrazové formáty. Proč se tomu tolik věnujeme? Na webových stránkách společností se stále setkáváme s grafikou a fotografiemi, které zpomalují výkon webových stránek nebo vyvolávají negativní dojem na uživatele. Je to nejčastěji tím, že fotografie na stránce mají příliš vysoké rozlišení nebo jsou v nevhodném formátu.
Velikost grafiky a fotografií na webu
Velikost grafických obrázků ovlivňuje rychlost načítání stránky na zařízeních uživatelů. Jednak zpomaluje přenos na server a je také jedním z důležitých parametrů, které Google zohledňuje při klasifikaci výsledků vyhledávání. Pomalu se otevírající grafika je impulsem pro uživatele, který je zvyklý na okamžitá řešení, aby z této stránky odešel, protože jej rychle znechutí. Může to také naznačovat slabou pozornost k potřebám zákazníků, technologickou zaostalost firmy nebo nakonec neschopnost postarat se o vlastní byznys. Grafika a fotografie na webu by vedle kvalitního copywritingu a SEO na stránce neměly zaostávat.
Grafika a fotografie na webu – jak je připravit
Grafiku a fotografie na webu byste před zveřejněním měli optimalizovat, upravit velikost v pixelech a snížit rozlišení. Vyberte formát, který umožňuje zpracování obrázku při zachování nejvyšší kvality. Při velikosti je dobré pamatovat na to, abyste nepřekročili hodnoty 1920 (šířka) a 1080 (výška) px. V současnosti je tato velikost optimální pro zobrazení na celé obrazovce na většině počítačů. Při přidání grafiky a fotografií na web je důležitější šířka souboru v pixelech, doporučená výška může být menší.
Problémem grafiky a fotografií na webu však může být i volba rozlišení souborů při vytváření responzivního webu. Se zmenšující velikostí obrazovky se totiž zmenšuje také velikost souboru s obrázkem, takže se stává nečitelným. V tomto případě lze použít dvě řešení:
- Načtěte design s vyšším rozlišením, díky čemuž grafika a fotografie na webu při škálování neztratí na kvalitě a použijte jeden soubor pro všechny typy zařízení. Bude však větší a bude se otevírat o něco pomaleji.
- Připravte soubory pro konkrétní typy zařízení (obvykle tři soubory vhodné výšky a oříznutí), díky čemuž se zlepší rychlost načítání stránky a sníží velikost grafiky a fotografií na webu. Toto řešení je však časově náročnější.
