Dnes více lidí prohlíží internet na mobilních zařízeních než na stolních počítačích. S různými velikostmi obrazovek, které se používají, je důležité zvolit správné velikosti obrázků při vytváření webových stránek, aby všichni vaši návštěvníci měli dobrou uživatelskou zkušenost, bez ohledu na to, jaká zařízení používají. Optimalizace obrázků pro web je tak pro vás naprosto klíčová.
Pokud neoptimalizujete obrázky, návštěvníci uvidí malé a rozmazané obrázky, nebo naopak příliš velké. To zpomalí načítání a nutí je zbytečně scrollovat a zoomovat.
Dobrou zprávou je, že optimalizace obrázků pro web na různá zařízení je jednoduchá. Výběrem správných rozměrů obrázků, minimalizací velikosti souborů a použitím responsivního designu webových stránek můžete poskytnout vynikající zážitek z prohlížení.
Postupujte podle níže uvedeného tutoriálu a optimalizace obrázků pro web bude hračka.
Nejlepší velikosti obrázků pro webové stránky
Šířka pixelů: 2500 pixelů je ideální pro zobrazení na celé obrazovce v prohlížeči ve většině případů. Jakýkoli obrázek menší než toto může být oříznut nebo se může zdát rozmazaný, pokud je potřeba vyplnit šířku prohlížeče.
Velikost obrázku: Nejlepší celková (pixelová) velikost vašich obrázků závisí na vašem využití, například pozadí potřebuje být větší než obrázek v blogovém příspěvku.
Velikost souboru: Jakýkoli soubor větší než 20 megabajtů může dramaticky ovlivnit rychlost vašeho webu. Menší obrázky (do dvou megabajtů, ale kolem 500 kilobajtů) jsou ve většině případů lepší.
Atribut obrázku: Atributy obrázku (alt text nebo alt tag) jsou textové a neovlivňují výkon vašeho webu. Nicméně se používají k interpretaci obrázků pomocí softwaru pro čtení obrazovky a jsou klíčovým prvkem přístupnosti webu. Buďte struční s textem atributu — je dobrým zvykem udržovat alt text pod 100 znaky.
Nejlepší rozměry obrázků pro stolní a mobilní zařízení
Tabulka níže poskytuje doporučené rozměry pro obrázky na stolních a mobilních webových stránkách:
|
Typ obrázku na webu |
Rozměry obrázků pro stolní zařízení (Š x V) |
Rozměry obrázků pro mobilní zařízení (Š x V) |
Doporučený poměr stran |
|---|---|---|---|
|
Obrázek na pozadí |
2560 x 1400 pixelů |
360 x 640 pixelů |
16:9 |
|
Hlavní obrázek |
1280 x 720 pixelů |
360 x 200 pixelů |
16:9 |
|
Banner na webu |
1200 x 400 pixelů |
360 x 120 pixelů |
3:1 |
|
Obrázek v blogu |
1200 x 800 pixelů |
360 x 240 pixelů |
3:2 |
|
Logo (obdélník) |
400 x 100 pixelů |
160 x 40 pixelů |
4:1 |
|
Logo (čtverec) |
100 x 100 pixelů |
60 x 60 pixelů |
1:1 |
|
Favicon |
16 x 16 pixelů |
16 x 16 pixelů |
1:1 |
|
Ikony sociálních sítí |
32 x 32 pixelů |
48 x 48 pixelů |
1:1 |
|
Obrázky ve světelném boxu (na celou obrazovku) |
1920 x 1080 pixelů |
360 x 640 pixelů |
16:9 |
|
Miniatura obrázku |
300 x 300 pixelů |
90 x 90 pixelů |
1:1 |
Tyto velikosti jsou doporučené a mohou být upraveny v závislosti na tom, zda používáte responzivní design webových stránek.
Vždy je dobré, aby velikost renderování vašich obrázků byla menší než jejich velikost při nahrávání.
Proč je velikost obrázku důležitá pro webové stránky?
Pro webové stránky je velikost obrázku důležitá z tří hlavních důvodů:
- Vytváří lepší uživatelskou zkušenost.
- Zlepšuje rychlost načítání stránek webu.
- Pomáhá s hodnocením webu.
Vytváří lepší uživatelskou zkušenost
Mít správně dimenzované obrázky pro každý případ použití na vašich webových stránkách pomáhá zlepšit uživatelskou zkušenost. Návštěvníci mohou přistupovat k odpovídající úrovni detailu a nebudou muset scrollovat, aby viděli celý obrázek.
Když je optimalizace obrázků pro web nízké kvality, nebo je obrázek dokonce pixelovaný nebo příliš malý, může to ovlivnit vnímanou kvalitu vašeho obsahu. Pro e-commerce webové stránky to může vést k tomu, že si zákazníci začnou klást otázky o kvalitě vašeho podnikání nebo produktů.
Naopak, vysoce kvalitní, správně dimenzované obrázky zvyšují vnímanou hodnotu vašich produktů a poskytují více vizuálních informací potenciálním zákazníkům.
Například se podívejte, jak obrázky níže od udržitelné značky obuvi Allbirds zlepšují uživatelskou zkušenost tím, že jasně ukazují různé vlastnosti jejich produktů.
Zlepšuje rychlost načítání stránek webu
Když nahráváte velké obrázky na své webové stránky, trvá delší dobu, než server načte stránku. Menší obrázky (jak v rozměrech, tak ve velikosti souboru) se obvykle načítají rychleji na různých zařízeních.
Rychlost načítání obrázků se často označuje jako „contentful paint“. Zkontrolujte contentful paint a další rychlostní metriky vaší webové stránky pomocí PageSpeed Insights od společnosti Google.
Polovina zákazníků říká, že by opustila svůj nákupní košík, pokud se webová stránka obchodu načítala déle než tři sekundy. Takové poznatky ukazují, jak důležité je optimalizovat rychlost vašich stránek, aby se předešlo vysoké míře opuštění.
Pomáhá hodnocení webu
Hodnocení webu se týká pozice vašich webových stránek na stránkách výsledků vyhledávačů (SERP). Optimalizované webové stránky se umístí vysoko na SERP. To platí pro relevantní vyhledávací dotazy uživatelů, známé jako klíčová slova.
Google používá řadu metrik k určení, které webové stránky se umístí na vrcholu jejich vyhledávacích výsledků. Kvalita obrázků, nebo spíše zlepšená uživatelská zkušenost, je pravděpodobně faktorem v Google algoritmu.
Základní pokyny: optimalizace obrázků pro web
Existuje pět hlavních typů obrázků, které uvidíte na webové stránce:
- Velikosti obrázků na pozadí
- Velikosti hlavních obrázků
- Velikosti bannerových obrázků
- Velikosti obrázků v blogu
- Velikosti loga
Různé požadavky na velikost se vztahují na každý typ webového obrázku. Podívejme se na nejlepší velikosti obrázků pro běžné typy obrázků na webu.
Velikosti obrázků na pozadí
Obrázky na pozadí jsou obecně největší obrázky na webové stránce. Obrázek slouží jako pozadí pro domovskou stránku nebo jinou cílovou stránku.
Například maloobchodník s bicykly Cowboy nechává svůj produkt vystoupit tím, že ho používá jako pozadí domovské stránky. Vyplňuje obrazovku, bez ohledu na to, na jakém zařízení je zobrazen. Optimalizace obrázků pro web je níže.
Doporučená šířka obrázku: 2560 pixelů
Doporučená výška obrázku: 1400 pixelů
Poměr stran: 16:9
Doporučená velikost souboru: 20 MB
Velikosti hlavních obrázků
Hlavní obrázky jsou podobné obrázkům na pozadí, ale obvykle mají menší výšku—asi polovinu velikosti. Hlavní obrázek je skvělá volba. Pomůže vám zobrazit více textu na obrazovce. Uživatelé tak nemusí rolovat, aby ho viděli.
V uvedeném příkladu BLK & Bold je hlavní obrázek úzký. Tak vyplňuje obrazovku a zanechává prostor pro obsah pod ním. Optimalizace obrázků pro web je níže.
Doporučená šířka obrázku: Mezi 1280 pixely a 2500 pixely
Doporučená výška obrázku: Mezi 720 pixely a 900 pixely
Poměr stran: 16:9
Doporučená velikost souboru: 10 MB
Velikosti bannerových obrázků
Bannerové obrázky mohou mít různé velikosti a tvary, v závislosti na tom, kde se nacházejí a co chcete ukázat svým návštěvníkům. Nejtypičtějším typem banneru na webu je bannerová reklama. Jednou z nejpopulárnějších služeb pro propagaci bannerových reklam je Google Ads.
Pokud uvažujete o bannerovém obrázku, který není reklamou, obdélníkové možnosti (např. 300 x 200 pixelů nebo 970 x 90 pixelů) jsou obecně lepší.
Doporučená šířka obrázku: Zkontrolujte u reklamní platformy
Doporučená výška obrázku: Zkontrolujte u reklamní platformy
Poměr stran: Různé
Doporučená velikost souboru: 150 KB (Zkontrolujte u reklamní platformy)
Velikosti obrázků v blogu
Obrázky v blogu mohou mít různé typy a velikosti. Příspěvek výše pochází od odborníků na spánek Kulala, a zatímco velikost nahrávaného obrázku je 1200 x 620 pixelů, renderovaná velikost je menší, a to 894 x 462 pixelů.
Nastavení velikosti renderování pro vaše webové stránky zlepší design a udrží soubory malé. Například obrázek v příspěvku Kulala má pouze 95,1 KB.
Pokud jde o hlavní obrázky záhlaví vašich blogových příspěvků (ty nahoře na stránce), měly by být jednotně dimenzované napříč vaším blogem.
Doporučená šířka obrázku: 1200 pixelů
Doporučená výška obrázku: 800 pixelů
Poměr stran: 3:2
Doporučená velikost souboru: 3 MB
Velikosti loga
Vaše logo bude pravděpodobně jedním z nejmenších obrázků na vašich webových stránkách (pokud nepočítáte favicon na panelu karet). V závislosti na vašem designu loga byste měli zvolit buď obdélníkový, nebo čtvercový poměr stran.
Většina log se hodí na čtvercový poměr 1:1, což můžete vidět v levém dolním rohu výše uvedeného příkladu Kulala.
Obdélníkové poměry fungují dobře pro delší názvy značek nebo tam, kde logo obsahuje slova spíše než grafiku. Logo webu Shopify používá delší poměr 4:1.
Doporučená šířka obrázku: 100 pixelů
Doporučená výška obrázku: 100 pixelů
Poměr stran: 1:1, 2:3, 4:1
Doporučená velikost souboru: 1 MB
Doporučení pro velikost obrázků na mobilních zařízeních
Vyberte správné rozměry obrázků
Na menších mobilních obrazovkách mnozí uživatelé ocení možnost obrázek přiblížit. Snažte se tedy najít rovnováhu mezi velikostí obrázku a velikostí souboru.
Obrázky s vysokým rozlišením dávají vašim webovým stránkám profesionální a dobře vyvážený vzhled, s vynikajícími možnostmi pro přiblížení. Udržujte poměr stran podobných obrázků stejný, abyste zachovali jednotný design napříč typy stránek.
Například můžete všechny obrázky produktů v e-commerce obchodě udělat čtvercové. Čtvercové obrázky se snadněji přizpůsobují na menších obrazovkách. Kromě toho čtvercové a vertikální obrázky dobře zapadají na mobilní obrazovky, což návštěvníkům umožňuje vidět více vašich obrázků, aniž by museli scrollovat.
💡 Na Shopify můžete nahrávat obrázky o velikosti až 5000 x 5000 pixelů s velikostí souboru až 20 MB.
Optimalizace obrázků pro web, konkrétně pro čtvercové velikosti se doporučuje ve velikosti 2048 x 2048 pixelů.
Nezapomeňte, že pro funkčnost zoomu musí být vaše obrázky větší než 800 x 800 pixelů.
Pamatujte na velikost souboru
Obrázky s většími velikostmi souborů mohou ovlivnit rychlost vašeho webu, zejména když návštěvníci používají chytrý telefon. Mnoho platforem pro vytváření webových stránek také má maximální omezení velikosti souboru pro nahrávání. Například Shopify používá maximální velikost souboru 20 MB.
Pokud chcete zmenšit velikost vašich obrázků, můžete použít nástroje pro online úpravu obrázků. S těmito nástroji můžete přeformátovat velké soubory obrázků na nové rozměry nebo typy souborů.
Obecně byste měli mít obrázky na pozadí záhlaví pod 10 MB, zatímco fotografie produktů by měly být mnohem menší — kolem 300 KB.
Upravte fotografie na rozměry mobilní obrazovky
Shopify automaticky mění velikost vašich obrázků, aby se vešly na menší obrazovky. Ale na jiných platformách mohou vyžadovat obrázky manuální úpravy, aby byly připraveny pro mobilní zařízení. Mějte na paměti, že stolní a mobilní obrazovky mají opačné orientace. Optimalizace obrázků pro web tak musí být upravena buď na výšku nebo na šířku.
Opět si pamatujte, že velké soubory zpomalují dobu načítání vašeho webu. Bezztrátová komprese dá obrázkům vysokou kvalitu. Ale často vytváří velké soubory. Tyto soubory mohou zpomalit načítání vašeho webu. Zvažte použití nejmenších souborů obrázků s nejlepšími rozlišeními.
Zatímco responsivní designy a algoritmy Shopify jsou dobré v přizpůsobování a zobrazování vašich obrázků napříč zařízeními, tak na druhou stranu poskytnutí pomoci s promyšlenou velikostí souborů může přispět k plynulejšímu nákupnímu zážitku.
Jaký je nejlepší typ souboru obrázku?
Správný typ obrázkového souboru zajišťuje kvalitní obrázky. Také udržuje velikost souboru v rozumných mezích, což zlepšuje výkon webu. Zde jsou nejběžnější formáty souborů obrázků a jejich nejlepší případy pro využití:
JPEG
JPEG (nebo JPG) je velmi populární formát obrázků. Nabízí dobrou rovnováhu mezi velikostí souboru a kvalitou. Je to populární volba pro zobrazování fotografií a složitých obrázků s mnoha barvami.
Nicméně, JPEG používá ztrátovou kompresi, což znamená, že při kompresi obrázku se ztrácí část kvality obrázku.
PNG
PNG je formát bezztrátové komprese, což znamená, že snižuje velikost souboru, ale kvalita obrázku zůstává stejná. Podporuje průhlednost, což z něj činí dobrou volbu pro obrázky, které vyžadují průhledné pozadí.
PNG soubory jsou větší než JPEG. Ale zachovávají jasnost. To je důvod, proč jsou skvělé pro detailní grafiku a loga.
SVG
SVG (škálovatelná vektorová grafika) je formát obrázku. Používá matematické rovnice, aby vykreslil obrázek. To umožňuje obrázkům SVG škálovatelnost na jakoukoli velikost bez ztráty kvality.
SVG je ideální formát pro loga, ikony a další grafiku, které je třeba použít na více místech. SVG je také obvykle menší ve velikosti souboru než jiné formáty, což pomáhá zlepšit časy načítání.
HEIC
HEIC, nebo formát vysoce efektivního obrázku, je formát souboru používaný zařízeními Apple. Používá pokročilou kompresní technologii. Ta vytváří vysoce kvalitní obrázky, ale velikost souborů je menší než u JPEG.
Nicméně, HEIC není univerzálně podporován na zařízeních, která nejsou od Applu.
WebP
WebP je formát obrázku vyvinutý společností Google. Poskytuje bezztrátovou kompresi pro obrázky na webu, často snižující velikost souboru o více než 30 % ve srovnání s JPEG nebo PNG.
To může významně zlepšit časy načítání webových stránek, ale je třeba poznamenat, že WebP není dosud univerzálně podporován všemi prohlížeči.
GIF
GIF je bitmapový formát obrázku známý svou schopností podporovat jednoduché animace. Používá bezztrátovou kompresi a snižuje obrázky na maximálně 256 barev, což vede k menším velikostem souborů.
GIF byl sice částečně nahrazen PNG pro statické obrázky, ale stále je oblíbený. Používá se hlavně pro krátké, smyčkové animace a prohlížeče ho dobře znají.
TIFF
TIFF, nebo formát souboru pro obrázky, je vysoce kvalitní a bezztrátový. Je také široce podporován aplikacemi pro úpravu obrázků. Je ideální pro ukládání obrázků pro profesionální tisk díky svému vysokému rozlišení a barevné hloubce.
S TIFF můžete pohodlně uložit více obrázků a stránek do jednoho souboru. Nicméně, velikosti souborů mají tendenci být velké.
Jak zjistit velikosti obrázků na webu
Nejrychlejší způsob, jak zjistit velikost obrázku na webové stránce, je použít nástroj pro inspekci v prohlížeči. Tak nemusíte obrázek stahovat.
Tato metoda funguje na zařízeních Mac a Windows. Funguje s prohlížeči Safari, Chrome nebo Firefox.
Přejděte na webovou stránku a najeďte myší na obrázek, o kterém chcete získat informace. Klikněte pravým tlačítkem myši, abyste otevřeli nabídku a hledejte možnost „inspect“ nebo „prozkoumat“:
Kliknutím na „inspect“ nebo „prozkoumat“ pokud máte prohlížeč v češtině, se zobrazí HTML kód stránky (může to být na první pohled zastrašující, ale nebojte se).
V inspekčním panelu by měly být zvýrazněny informace o obrázku, na který jste klikli. Když najedete na relevantní kód, obrázek se také zvýrazní:
V tomto případě vám prohlížeč říká, kolik pixelů obrázek používá. Pokud změníte velikost webové stránky, tato hodnota se odpovídajícím způsobem změní.
Pokud hledáte původní vlastnosti nahrávání obrázku, najeďte na odkaz pro uložení obrázku:
Aby jste opustili inspekční panel, jednoduše klikněte na X v pravém horním rohu.
Optimalizace obrázků pro web: nástroje
Online nástroje pro optimalizaci obrázků jsou snadné a rychlé. Obvykle jsou zdarma a pomohou vám změnit velikost obrázků na vašich webových stránkách. Zde jsou tři populární nástroje pro optimalizaci obrázků:
Změna velikosti obrázků
Bezplatný online nástroj pro změnu velikosti obrázků od Shopify je pohodlný způsob, jak upravit své obrázky pro použití napříč marketingovými kanály a sociálními sítěmi.
Můžete si vybrat z různých oficiálních rozměrů pro příspěvky a příběhy na Instagramu, miniatury na YouTube a další typy sociálního obsahu.
Optimalizátor obrázků od Squirai
Nástroj pro optimalizaci obrázků od Squirai byl testován na rychlost, aby se zajistilo, že vaše obrázky jsou připravené na SEO. Automaticky optimalizuje všechny obrázky na vašich webových stránkách — včetně nových, které přidáte později.
Kromě toho můžete přizpůsobit a aplikovat vodoznak, abyste chránili své fotografie produktů bez nutnosti znát jakýkoli kód.
Optimalizátor obrázků LoyaltyHarbour
Optimalizátor obrázků LoyaltyHarbour funguje podobně jako nástroj od Squirai, automaticky komprimuje obrázky na vašich webových stránkách.
Panel také automaticky nastaví alt text obrázků. Převádí je na nejlepší typ souboru pro rychlejší načítání stránky.
Alternativně, pokud máte možnost, můžete také použít Photoshop k pomoci snížit velikost souboru. Ale to může být složitější proces než výše uvedené nástroje.
Řešení problémů: problémy s formátováním obrázků
Jak budete spravovat své webové stránky, pravděpodobně se setkáte s problémy s formátováním obrázků v určitém okamžiku. Problémy s obrázky mohou sahat od nesprávné velikosti po nefunkční odkazy.
Pojďme se podívat na řešení některých běžných problémů s obrázky na webu.
Nesprávná velikost obrázku
Problém: Obrázky se zdají být příliš velké nebo malé a mohou narušit rozložení webové stránky, což vede ke zhoršení uživatelské zkušenosti.
Řešení: Pokud používáte téma nebo šablonu webu, hledejte zdroje o správných rozměrech obrázků pro váš design. Ve vašem programu pro tvorbu webu se ujistěte, že vybíráte renderované velikosti pro každý obrázek, aby se obrázky nezobrazovaly v jejich plné, původní velikosti.
Pomalé načítání
Problém: Obrázky se načítají pomaleji než zbytek webové stránky — nebo vůbec.
Řešení: Nesprávný formát souboru může vést k zbytečně velkým velikostem souborů, které ovlivňují rychlost načítání. Použijte nástroj pro úpravu nebo konverzi obrázků k změně formátu souboru vašich obrázků. Pro grafiku nebo loga zvažte použití SVG pro škálovatelnost bez ztráty kvality. Pro ostatní obrázky zvažte převod na WebP pro kompresi velkých souborů.
Špatná kvalita obrázku
Problém: Obrázky se zdají být pixelované nebo rozmazané.
Řešení: Pokud se vaše obrázky zdají být pixelované nebo rozmazané, zkuste získat verzi s vyšším rozlišením. Pamatujte, že rozlišení obrázku se liší od velikosti obrázku. Rozlišení se týká množství detailu, které obrázek obsahuje, často měřeno v pixelech na palec (PPI). Vyšší rozlišení znamená ostřejší obrázek, bez ohledu na jeho velikost.
Pokud je kvalita obrázku snižována kompresí, upravte její nastavení komprese nebo přepněte na formát bezztrátové komprese, jako je PNG.
Obrázky se vůbec nezobrazují
Problém: Neplatné odkazy na obrázky, což vede k tomu, že se obrázek nezobrazí.
Řešení: Ověřte zdrojovou URL vašich obrázků. Tato URL by měla vést přímo na místo vašeho souboru obrázku. Porovnejte název souboru obrázku v URL s aktuálním názvem vašeho souboru obrázku. Měly by se přesně shodovat, včetně přípony souboru (.jpg, .png, .svg).
Optimalizujte obrázky na webu pro úspěch
Přidat obrázky na vaše webové stránky není jen o vzhledu. Je to důležité pro lepší uživatelskou zkušenost a vyšší pozice ve vyhledávačích.
Velikost vašich obrázků ovlivňuje oba tyto prvky. Příliš velké obrázky mohou zpomalit načítání vašich webových stránek. Příliš malé obrázky se mohou zdát pixelované nebo rozmazané.
Zkontrolujte požadavky na rozměry obrázků pro váš web. Vyberte správný formát souboru, aby se vyvážilo rozlišení a velikost souboru.
Od prvních prodejců po globální maloobchodníky, Shopify funguje pro každého. Podívejte se na plány a ceny.
Často kladené otázky: optimalizace obrázků pro web
Jaká je nejlepší velikost obrázku pro webové stránky?
Obrázky na celé obrazovce by měly mít minimální šířku 2500 pixelů. Nejlepší velikost obrázku pro web závisí na jeho použití a velikosti renderování. Také je důležité, jak velikost souboru ovlivňuje dobu načítání stránky.
Jaký je nejlepší formát obrázku pro webové stránky?
WebP je populární formát obrázku pro webové stránky, který zajišťuje rychlý výkon. Vyvinutý Googlem, WebP nabízí bezztrátovou kompresi pro obrázky na webu, snižující velikost souboru až o 30 % ve srovnání s JPEG a PNG. Nicméně je třeba poznamenat, že WebP není univerzálně podporován všemi prohlížeči.
Jaký je rozdíl mezi velikostí obrázku a rozlišením?
Velikost obrázku se týká rozměrů obrázku, obvykle měřených šířkou a výškou v pixelech. Rozlišení obrázku se týká množství detailu, které obrázek obsahuje, často měřeno v pixelech na palec (PPI). Vyšší rozlišení znamená více detailů a ostřejší obrázek, bez ohledu na jeho velikost.
Jak ovlivňuje velikost obrázku dobu načítání webových stránek?
Čím větší je velikost souboru obrázku, tím déle trvá, než se obrázek stáhne a zobrazí na obrazovce uživatele. To může zpomalit dobu načítání webových stránek, což může negativně ovlivnit uživatelskou zkušenost a výkon ve vyhledávačích. Proto je důležité optimalizovat obrázky vyvážením kvality a velikosti souboru.
Jak mohu snížit velikost souboru obrázků, aniž bych ztratil kvalitu?
Můžete snížit velikost souboru obrázků bez ztráty kvality. Použijte bezztrátovou kompresi. Tato metoda odstraní zbytečná data, ale vzhled obrázku zůstane zachován. Nástroje jako Adobe Photoshop a online optimalizátory obrázků umožňují bezztrátovou kompresi.
