8 chyb, kterým je třeba se na svém webu vyhnout
Velké obrázky, galerie a fotografické návrhy jsou velkým trendem ve webovém designu. Chcete-li z této estetiky vytěžit maximum, chcete se ujistit, že každý obrázek na vašem webu odpovídá displeji a dobře reprezentuje vaši značku.
Návrháři dělají mnoho chyb, od technických problémů po kvalitu obrazu. Při práci s obrázky webových stránek však nemusíte spadat do jedné z těchto pastí. Zde se podíváme na chyby obrázků a na to, jak je opravit nebo jim úplně zabránit. (Jako bonus v tomto příspěvku představujeme sbírku zábavných a skvělých obrázků od smrti po sbírku nedávných objektů Stock Photo.)
Chyba: Nahrávání obrovských souborů
Obrázky v plné velikosti jsou krásné (a nezbytné), pokud jde o tiskové úlohy, ale mohou nastat problémy, pokud jde o web. Velké obrázky se načítají pomalu; pomalé doby načítání způsobují, že uživatelé opustili váš web.
Bohužel je to snadná past, do které se dostanete. Mnoho programů typu backend umožňuje nahrávání velkých obrázků a pokud nevěnujete pozornost, možná ani nevíte, že soubory jsou nahrávány v neuvěřitelných velikostech. Různé obrázky pro různá použití vyžadují různé specifikace obrázků. Podívejte se na značku nebo průvodce webem, abyste věděli, jaké jsou rozměry běžných obrazových oblastí na vašem webu.
Pokud uvažujete o obrázcích, záleží také na typu souboru. Nepoužívejte prosím pro web tiff. Nejběžnější a použitelné formáty souborů jsou PNG (obrázky generované počítačem, jako jsou grafy nebo loga nebo v případě potřeby průhlednosti), JPG (fotografie) nebo GIF (animace).
Řešení: Jednoduchým řešením je velikost obrázků pro rozměr rámce, kde se objeví ve správném rozlišení webu. Ale je toho o něco víc. Uložte každý obrázek pro optimální použití na vašem webu a pro sociální sdílení. (Šířka například Pinterestu je 600 pixelů; pokud chcete, aby byl obraz sdílený, měla by to být tato velikost.)
Chyba: Zapomínání na oříznutí
Při používání obrovských souborů může web zablokovat, stejně tak lze použít celoobrazovkové obrázky, které jsou skryté na obrazovce. Oříznutí pomáhá předvádět vizuální prvky, které mají uživatelé vidět, a to vytvořením ohniskového bodu, který nemusí být u celoobrazovkového obrázku.
Nedostatek oříznutí obrazu může také vytvořit méně dynamický svazek vizuálů, které všechny mají stejné tvary a poměr stran. Použití více plodin a zajímavých tvarů pro obrázky může přidat vizuální intriku na web.
Řešení: Před nahráním ořízněte obrázky na vhodnou velikost nebo rozměr, aby se každý obrázek vykreslil podle potřeby.
Chyba: Zapomínání na miniatury
Existuje celá řada způsobů, jak zpracovat velikost a velikost miniatur. (Mnoho z nich závisí na vašich schopnostech backendu, takže se nebudeme hádat o výhodách každého z nich.) Ale musíte si pamatovat, abyste aktualizovali a věnovali pozornost nejmenším obrázkům na vašem webu.
Designéři příliš často zapomínají, že miniatury, náhledy obrázků a favicon budou muset být aktualizovány změnami obsahu webových stránek.
Další velká chyba? Použití špatného obrázku ve velikosti miniatury, protože to je tak velké, jak to může být. Pokud je obrázek špatný, prostě jej nepoužívejte. Žádný obrázek není lepší než špatný.
Řešení: Nezapomeňte odstranit staré miniatury nebo náhledy, když se obrázky změní a že váš favicon je aktuální.
Chyba: Nehledatelná jména a data meta
Digitální fotoaparáty ukládají spoustu informací do různých meta polí, která se nepřekládají na web. Odstraňte tyto informace z obrázků a vyměňte je za použitelná data. Vyhledávací stroje neumí číst obsah obrázků, takže aby je bylo možné prohledávat, musí v názvu, značkách a okolním obsahu obsahovat popisná slova.
Příklady špatných názvů obrázků:
- picture1.jpg
- DSCN00023.jpg
- brýle% a% watch.jpg
Mnohem lepší název obrázku obsahuje několik popisných slov, například brýle a hodinky-a-rostlina.jpg. Thetag reference pro obrázek by měl obsahovat podobný popis, například „položky na pultových brýlích, hodinkách a rostlinách“. (A nezapomeňte správně hláskovat slova.)
Řešení: Pro všechny obrázky webových stránek a párování obrázků s obsahem, který se vztahuje ke každému vizuálnímu obsahu, použijte silné konvence pojmenování. Názvy obrázků by měly obsahovat popisná slova oddělená spojovníky.
Chyba: Nesprávné měřítko nebo protažení
Nic nevypadá divněji, že osoba s nataženou tváří nebo obrázkem, který je nesprávně upraven. Protahování nebo neproporcionální škálování obrázků (což může být obzvláště běžné, když dojde ke změně motivu nebo pozadí) je ne-ne. Každý obrázek musí být upraven v měřítku 1: 1, svisle a vodorovně. Cokoliv jiného poškozuje integritu fotografie.
Řešení: Sledujte pečlivě všechny proporce a pravidelně kontrolujte své stránky.
Chyba: Neplánuje plánování pro více velikostí zařízení
Responzivní konstrukční rámce přicházejí s některými důsledky pro obrázky. Změnou tvaru nebo velikosti ze zařízení na zařízení nebo podle orientace je důležité diktovat, jak se obrázky budou vykreslovat napříč zařízeními.
Jedním z nejčastějších postupů je použití mediálních dotazů k plánování těchto změn podle zařízení. CSS umožňuje použití specifických stylů na obrázky na základě rozměrů obrazovky a pomáhá obrazům dobře vypadat, aniž by „narušil“ design.
Řešení: Dotazy na média používejte pro responzivní rámce a testujte vykreslování obrázků na řadě zařízení.
Chyba: Ignorování sítnice
Nebylo to tak dávno, kdy byl pro web potřebný standardní obraz o šířce 600 pixelů při 72 ppi. Obrazovky se však zlepšují rychlostí, kdy tomu tak již není.
V závislosti na vašem rámci může každý obrázek ve skutečnosti zahrnovat více obrázků uložených pro různé velikosti a rozlišení obrazovky, včetně sítnice. (Rozlišení displejů sítnice se může lišit podle zařízení, ale je výrazně vyšší než u standardních displejů.)
Řešení: Zahrňte soubory a dotazy na média, které jsou speciálně pro zobrazení sítnice. (CSS-Tricks může pomoci.)
Chyba: Nadužívané nebo obecné umění
Fotografie fotografií může být skvělá rychlá oprava, ale mohou mít některé nezamýšlené důsledky. Fotografie, které jsou používány na příliš mnoha webových stránkách nebo které mají jen obecný vzhled a dojem, nevytvoří vizuální prvek, který naváže spojení s uživateli. (Nechcete, aby váš web vypadal jako každý jiný, že?)
Pokud plánujete použít fotografování, zvažte obrázky, které můžete upravovat nebo pracovat zajímavými způsoby. Vyhněte se obrázkům, které vypadají jako věci, které jste viděli na jiných místech (podívejte se na obrázky pro všechny konkurenty nebo podobné stránky).
Řešení: Zvažte najmutí fotografa a vytvořte skvělý obrazový soubor specifický pro váš web. Zahrňte vizuální prvky, které se vztahují k vaší společnosti nebo značce a odrážejí vaše stránky správným způsobem.
Závěr
Výběr a vytváření obrázků pro webový projekt může být jednou z nejzábavnějších částí procesu návrhu. S každým obrázkem a pixelem buďte opatrní, abyste se ujistili, že váš web běží dobře a obsahuje obrázky, které zaujmou uživatele.
Máte nějaké tipy nebo triky, pokud jde o používání obrázků pro webové stránky? Rádi bychom věděli, co jsou. Sdílejte je v komentářích.
