nejste si jisti, proč váš web není na Googlu dobře hodnocen nebo proč se s ním spotřebitelé nezabývají? Velikost obrázků pro webové stránky a problémy s rychlostí webových stránek a SEO jsou často vidět ovlivňující míru okamžitého opuštění a hodnocení.
pro mnoho lidí bylo ukládání obrázků na web vždy záhadou. Těžké obrázky (původní velikosti obrázků na šířce 5000px, neoptimalizované obrázky) nejen zhorší uživatelský dojem na vašem webu, ale budou mít také negativní dopad na vaši strategii SEO (rychlost načítání, míra okamžitého opuštění, hodnocení atd.).
pojďme rozebrat seznam pokynů pro velikost obrázku webu.
proč jsou důležité velikosti obrázků a výkon webových stránek?
načítání webových stránek trvá déle, když grafika není optimalizována. Pomalé webové stránky mají za následek špatnou uživatelskou zkušenost, menší pravděpodobnost hodnocení ve Vyhledávání Google a v důsledku toho méně dotazů a spotřebitelů.
pokyny pro velikost obrázků webových stránek uvádějí, že ukládání fotografií ve správném poměru a jejich optimalizace pro web může pomoci s řadou věcí, včetně:
• Rychlost
podle výzkumu Google, pokud načítání webové stránky trvá déle než 5 sekund, pravděpodobnost, že mobilní návštěvník opustí stránku, se zvýší o 90%. Stránky svých webových stránek můžete urychlit zmenšením a snížením velikosti obrázků.
* uživatelská zkušenost
návštěvníci budou mít poutavější zážitek při procházení vašich webových stránek, pokud používáte vysoce kvalitní a přesvědčivé obrázky. Svým návštěvníkům poskytujete bezproblémový a plynulý zážitek tím, že tyto fotografie optimalizujete a načítáte rychle, což je povzbuzuje, aby trávili více času na vašem webu a prozkoumávali váš obsah.
* SEO Ranking
čím dříve se vaše stránky načtou, tím vyšší můžete zařadit. Na stolních i mobilních zařízeních se webové stránky s optimalizovanou grafikou načítají podstatně rychleji.
* prodej
rychlejší načítání a vylepšené SEO mohou pomoci přilákat více návštěvníků na váš web, což zvyšuje vaše šance na kontaktování a rezervaci.
jaké jsou nejvhodnější velikosti obrázků pro webové stránky?
nápadně je postaven pro práci s širokou škálou velikostí obrazu pro různé velikosti obrazovky, sekce, styly a vzory. Občas je však užitečné mít hrubou představu o tom, jaké dimenze Nahrát.
zde je několik obecných pokynů pro velikost obrázku na webu, které je třeba dodržovat!
obrázek je převzat z nápadně
1. Obrázky na pozadí
fotografie na pozadí od nápadně jsou navrženy tak, aby vyhovovaly široké škále velikostí obrazovky, od monitoru po tablet po telefon. Chcete-li zajistit, aby vaše pozadí vypadalo skvěle na všech obrazovkách, doporučujeme velikost 1600 pixelů na šířku 900 pixelů na výšku. Zahrňte fotografie osob, značek a dalších informací bez pozadí s opatrností!
2. Nastavení pozadí
Chcete-li velikost / zarovnat pozadí, máte několik alternativ.
Stretch/Cover výchozí: tato volba roztáhne váš obrázek tak, aby vyplnil celou obrazovku, a to jak ve výšce, tak v šířce. Protože obrázek bude fungovat jako pozadí na jakékoli velikosti obrazovky, je to obvykle nejlepší řešení. Pokud však má váš obrázek obsah po stranách (zejména vlevo a vpravo), nemusí být na mobilních telefonech viditelný.
Contain: Contain zobrazí celý obrázek a zajistí, že žádná jeho část nebude odříznuta. Na některých zařízeních to však může mít za následek nějaké bílé místo.
centrum: obrázek se zobrazí ve středu sekce a nebude zmenšen, pokud zvolíte střed. Na druhé straně se na pozadí zobrazí bílý prostor kolem okrajů obrázku je příliš malý. Některé prvky obrazu mohou být odříznuty, pokud jsou příliš velké, zejména na menších displejích.
dlaždice: dlaždice vycentruje a poté zopakuje obrázek, který je užitečný pro vytváření vzorů.
Chcete-li začít s pokyny pro velikost obrázku na webu, poznamenejte si, jak široký se obrázek na stránce zobrazí.
obrázek je převzat z nápadně
* obrázky na pozadí
ideální velikost obrázků na pozadí je 1600x900px
* obrázky v plné šířce
pro dosažení nejlepších výsledků by měly být široké nejméně 1400 Pixelů. Podle pokynů pro velikost obrázku na webových stránkách
* obrázky s poloviční šířkou
obrázky s poloviční šířkou by měly být pro nejlepší kvalitu alespoň 700px široké.
* width šířka obrázky
obrázky by měly být alespoň 480px široký pro nejlepší kvalitu 1/3 šířky snímků.
* ¼ width images
pro nejlepší kvalitu 1/4 width images, měly by být alespoň 360 pixelů široký.
* Malé ikony a loga
měly by mít šířku nejméně 100 pixelů.
* galerie obrázků
Jakákoliv velikost je v pořádku pro galerie obrázků! Obrázky v galerii se otevřou v LightBoxu v horní části vašeho webu.
jaká velikost obrázku je vyžadována pro vaše webové stránky?
obrázky by měly být co největší, aby se vešly do jejich „kontejnerů“ pro maximální výkon webových stránek, v závislosti na rozvržení stránky. Například prezentace fotografií jsou často větší; obrázky blogů jsou středně velké (při šířce rovnající se šířce stránky mínus postranní panel); miniatury jsou menší a tak dále.
podle pokynů pro velikost obrázku na webu je důležité nejprve zjistit rozměry obrázku, abyste mohli vypočítat šířku oblasti obsahu vašeho webu. Můžete použít plugin prohlížeče „page ruler“, který vám pomůže s přijetím opatření, nebo můžete použít vývojářské nástroje integrované do webového prohlížeče, pokud máte zkušenosti: klepněte pravým tlačítkem myši na libovolný prvek stránky a v rozevírací nabídce vyberte možnost „zkontrolovat“.
obrázek je převzat z nápadně
poté na panelu nástrojů pomocí nástroje pro výběr prvků najeďte myší na sekci obrázku nebo obsahu, která vás zajímá:
snímek je převzat z nápadně
obrázek je převzat z nápadně
v tomto případě výše uvedený sloupec vyžaduje obrázek o šířce nejméně 525 Pixelů.
říkáme „alespoň“, protože obrázky v novějších smartphonech s obrazovkami „sítnice“ s vysokou hustotou musí být větší, aby vypadaly co nejostřeji.
zvažte následující scénáře:
a. Full-Width Slideshow Web Image Size
webové stránky pokyny pro velikost obrázku doporučujeme 2560 pixelů na šířku pro full-width prezentace (které se automaticky rozšíří na plné velikosti prohlížeče). Toto je obvyklá šířka rozlišení pro 27″ a 30 “ monitory.
obrázky mohou být tak vysoké, jak chcete, aby bylo dosaženo poměru stran, který si vyberete. Celostránkové prezentace, například, které jsou běžné na webových stránkách Svatební fotografie, zachovat původní poměr stran fotografií. Jiné webové stránky využívají prezentaci, která pokrývá celou šířku stránky, ale má menší výšku (což vede k poměru stran kolem 3: 1).
níže je uveden příklad „panoramatických“ prezentací z fotografických webových stránek:
obrázek je převzat z webu nápadně usre
snímky by měly být široké 2560 pixelů (zaokrouhleno na 2500px) a jakákoli výška, kterou vyberete pro obrázky, které pokrývají celou šířku prohlížeče (v závislosti na tom, zda chcete zachovat Nativní poměr stran obrázků nebo jít na panoramatičtější řez).
to není případ, kdy musíme zdvojnásobit velikost obrazu pro Retina displeje, protože to by mělo za následek masivní 5000px obrázků (ne přidat nebezpečí krádeže obrazu, s velkými velikostmi souborů).
upravte požadovanou velikost obrázku pro menší prezentace, které nezabírají celou šířku stránky, ale pouze její část (možná 2000px nebo 1800px atd.)
obrázek je převzat z webu Strikingly usre
B. velikosti obrázků v galeriích (a miniatury, které se zvětšují v zobrazení Lightbox)
Galerie miniatur jsou jedinečné situace, kdy je velikost vašich miniatur ignorována ve prospěch zajištění toho, aby fotografie byly při zvětšení dostatečně velké.
mřížka miniaturních fotografií, která se po kliknutí otevře v prezentaci na celou obrazovku (obvykle s poloprůhledným překrytím pod ní), je označována jako „Lightbox view“:
protože se tyto fotografie otevřou v režimu celé obrazovky, pokyny pro velikost obrázků webových stránek doporučují, aby byly alespoň 1500 pixelů široké (na nejdelší hraně), aby vypadaly dobře na stolních počítačích a tabletech.
můžete dokonce jít až na 2000 pixelů, pokud chcete přidat nějaký extra „wow faktor“, i když to obvykle není případ.
obrázky jsou stejně upraveny prohlížečem na mobilních zařízeních a 1500px je dostatečně velký, aby vypadal ostře na smartphonech s obrazovkami „retina“ s vysokým PPI.
vertikální/portrétní obrázky s maximální výškou 1200 pixelů (například 800×1200 pixelů pro vertikální obrázek 2:3 nebo 900×1200 pixelů pro vertikální obrázek 3:4) mohou být ještě menší.
pokud prezentace umožňuje procházení mezi fotografiemi pomocí bočních šipek, odrážek, přejetí prstem po mobilu nebo klávesových šipek na ploše, omezení rozměrů obrázku, jako je tento, udrží Velikost souboru přiměřeně krátkou, což má za následek rychlejší načítání obrázků:
C. doporučené velikosti obrázků pro příspěvky na blogu a další statické obrázky v rozvržení stránky
pokud vaše fotografie blogu nevyžadují funkci click-to-zvětšit (nebo „lightbox“), měly by být dimenzovány podle šířky sloupce nebo oblasti obsahu.
Vezměme si následující příklad jednoho blogu:
obrázek je převzat z webových stránek nápadně usre
skutečnou šířku oblasti obsahu můžete zjistit měřením libovolného odstavce textu pomocí výše uvedených metod, například:
obrázek je převzat z webu Strikingly usre
alternativně, pokud již máte obrázky, můžete vidět, na jakou velikost je prohlížeč mění.
Chcete-li získat stejné informace, můžete použít plugin prohlížeče, jako je zobrazit informace o obrázku (vlastnosti).
s touto informací (například 825 pixelů) můžete nyní zdvojnásobit velikost tak, aby odpovídala zobrazením sítnice (tedy šířce 1650 Pixelů).
v závislosti na tématu vašeho webu a toleranci rizika krádeže obrazu můžete toto množství snížit na rozumnější 1200 pixelů na nejdelší hraně (takže horizontální obrázky by měly být 1200px široké a vertikální obrázky by měly být 1200px vysoké, při zachování jejich původního poměru stran).
menší fotografie používané jako miniatury (které není třeba rozšiřovat) podléhají stejnému rozhodovacímu procesu.
závěr
tyto pokyny pro velikost obrázků se ve skutečnosti nevztahují na služby archivace fotografií, jako jsou PhotoShelter nebo SmugMug (které mají vestavěná bezpečnostní opatření a generují miniatury s nízkým rozlišením z vašich původních souborů s vysokým rozlišením podle potřeby webu), nebo když tyto obrázky prodáváte jako stahování nebo tisk, jak je uvedeno na začátku.
dodržování těchto pokynů pro velikost obrázku na webových stránkách je nutností, pokud máte vlastní hostovaný web a potřebujete pouze prezentovat své fotografie na webu.
výběr správných obrázků je důležitým aspektem vytvoření vizuálně přitažlivého a rychle se načítajícího webu. Bezpochyby existuje křivka učení. Existují však i další výhody, které je třeba mít, a to vše je součástí vzrušení z vytváření a údržby webových stránek!