Když potenciální zákazník přistane u vás Shopify webových stránkách , použijí obrázky k rozhodnutí, zda chtějí provést nákup. Vaším úkolem jako obchodníka je proto zajistit, aby obrázky nesnižovaly rychlost načítání stránek (abyste lidi odstrčili) a obrázky správně formátovat a velikost.
Tímto způsobem se obrázky nezdají být roztažené nebo oříznuté. V naší konečné Shopify průvodce velikostí obrázků, ukážeme vám důležitost konkrétních velikostí obrázků Shopify fotografie a poskytují ideální velikosti pro věci, jako je vaše logo, obrázek banneru a obrázky produktů.
Pokračujte ve čtení a dozvíte se vše Shopify velikosti obrázků!
Proč by vás to mělo zajímat Shopify Velikosti obrázků?
Správa a nahrávání obrázků je únavné. Přesto jsou často hlavními pachateli, pokud jde o pomalou rychlost webu, problémy se SEO a nízké konverze na webu elektronického obchodu.
A choulostivá část všech tvůrců webových stránek a platforem elektronického obchodu spočívá v tom, že se musíte držet velmi konkrétních velikostí obrázků, abyste zajistili, že jsou optimalizovány a vypadají reprezentativně.
Abych to shrnul, zde je důvod Shopify Na velikosti obrázku záleží:
- Zadejte každý obrázek Shopify vyžaduje jedinečné rozměry, například jak by loga měla mít jinou velikost než obrázky bannerů.
- Uživatelé se s větší pravděpodobností přemění v platící zákazníky, když jasně vidí obrázky ve správném formátu.
- Správně dimenzované a optimalizované obrázky mohou zvýšit váš SEO potenciál.
- Fotografie špatné velikosti mohou způsobit roztažení nebo oříznutí obrázků, což může vést k ošklivé webové stránce.
- Možná zjistíte, že obrázky s nesprávnou velikostí způsobí zpomalení vašeho webu nebo zabrání zákazníkům v tom, aby vůbec čekali.
Spolu s těmito body: ostré obrázky s dobrou velikostí představují určitou úroveň profesionality a poskytují zákazníkům emocionální reakce, že jste důvěryhodná firma a vaše produkty jsou té nejvyšší kvality. Špatné fotografie jednoduše vypadají, jako byste se nestarali o své produkty nebo způsob, jakým jsou zobrazeny. Vaši zákazníci se mohou ptát: „Kde jinde kráčí za rohy?“
Díky tomu se podívejte na naši rychlou referenční příručku o tom nejlepším Shopify velikosti obrázků pro oblasti, jako jsou stránky produktů, obrázky bannerů a loga.
Nejlepší Shopify Velikosti obrázků (podle toho, kde jsou obrázky použity)
Ne všechna jsou tvrdá pravidla, ale nejlepší je držet se co nejvíce „ideální velikosti“. Témata mají občas své vlastní obrazové standardy, takže na to dávejte pozor. V opačném případě vám to vysvětlíme, až budete mít určitou volnost, pokud jde o rozměry.
Existuje přechodná velikost obrázku pro použití napříč? Shopify?
Ne, ale pokud plánujete použít tento přístup, doporučujeme následující:
- Ujistěte se, že všechny obrázky jsou dostatečně velké, aby zobrazovaly složité detaily produktu.
- Přesto udržujte obrázky dostatečně malé, aby nebrzdily výkon webu.
- Dobrým pravidlem je držet se 2048 × 2048 pixelů pro čtvercové obrázky.
- U čtvercových obrázků se vyhněte čemukoli menšímu než 800 × 800 pixelů.
- U čtvercových obrázků se vyhněte čemukoli většímu než 4472 × 4472.
U nečtvercových obrázků rozhodně doporučujeme použít níže uvedené průvodce. Za zmínku také stojí, že některá témata ořezávají obrázky odlišně, takže možná budete muset uhodnout a zkontrolovat, které velikosti obrázků jsou pro váš internetový obchod nejvhodnější.
Pro nejlepší vodítko se podívejte na ideál Shopify níže uvedené velikosti obrázků, všechny roztříděné podle typu obrázku:
1. Shopify Velikost obrázku produktu (ideální velikost: 2048 × 2048 pixelů)
Obrázky produktů slouží jako primární formy médií používaných k prodeji. ShopifyMotivy 's dělají docela dobrou práci při ořezávání a optimalizaci obrázků produktů, ale nikdy byste neměli spoléhat na automatické nástroje.
Jedno doporučené rozměry pro obrázky produktů na Shopify jsou 2048 x 2048 pixelů.
Je to skvělé místo, kde můžete zajistit, aby vaše obrázky nezpomalily rychlost vaší stránky, a zároveň zajistit, aby zákazníci viděli bohatost detailů z vašich původních fotografií.
Pro fotografie produktů navrhujeme čtvercový obrázek, aby nedošlo k nechtěnému oříznutí Shopify témata.
Snímek obrazovky níže ukazuje obrázek nahraný v rozlišení 2048 × 2048 pixelů a nedošlo k žádnému oříznutí.
U produktových fotografií mohou stále fungovat delší a širší obrázky, ale máte menší kontrolu nad tím, co motiv s vašimi obrázky udělá. Můžete zjistit, že fotografie na šířku se ve srovnání s formátem na výšku zmenšují.
2. Shopify Velikost obrázku sbírky (ideální velikost: 2048 × 2048 pixelů)
Přidání kolekce nutně nevyžaduje obrázek, ale umožňuje vám vytvořit samostatnou stránku pro tuto kolekci, téměř jako vstupní stránku vytvořenou pouze pro malou podmnožinu produktů.
Obrázek sbírky je nahrán pod Vytvořit sbírku část v Shopify.
Poté můžete přidat produkt do této kolekce a zobrazit jej v bloku obsahu na domovské stránce nebo jako samostatnou stránku.
Pokud opustíte Obraz prázdné pole na stránce kolekce, převezme jeden z obrázků doporučených produktů z této kolekce jako výchozí.
Doporučená Shopify velikost obrázku pro kolekce je 2048 × 2048 pixelů.
Čtvercové rozměry pomáhají vytvořit standardizovaný formát napříč všemi kolekcemi, zvláště když jsou zobrazeny vedle sebe.
Zjistíte také, že se čtvercovými obrázky se snáze pracuje, když použijete bloky obsahu, které představují kolekce.
Jako vždy se vaše výsledky mohou lišit v závislosti na použitém tématu. Některá témata ve skutečnosti nabízejí další možnosti s obrázky vaší sbírky a umožňují vám sdílet obrázek jako banner na stránce samostatné sbírky. V tomto případě může být optimální velikost obrázku vaší sbírky zcela odlišná od toho, o čem jsme zde mluvili. Celkově je nejlepším akčním plánem projít testování s vaším tématem. Nahrajte do svých sbírek několik obrázků jedinečných velikostí. Zapište si ty, které fungují, a pak vždy použijte tyto rozměry. Jen se ujistěte, že obrázky nejsou příliš velké nebo příliš malé, a budete v pořádku.
3. Shopify Velikost obrázku loga (ideální velikost: 450 W × 250 V pixelů)
Logo vynikne jako markýza vašeho e-shopu. Zobrazuje se přímo, když se někdo dostane na vaši domovskou stránku, a na celém webu, vzhledem k tomu, že je obvykle viditelný v oblasti záhlaví.
Shopify uživatelé, kteří mají problémy s velikostí log, mohou zjistit, že logo není dostatečně velké nebo že způsobí určitým deformacím navigační nabídky. Nebo můžete zjistit, že logo nechává pod nebo nad sebou hodně bílého místa.
Chcete-li vyřešit většinu těchto problémů, doporučujeme použít rozměry loga 250 pixelů na výšku a 450 pixelů na šířku.
Ve skutečnosti, Shopify doporučuje nikdy nepřesahovat tyto rozměry pro šířku a výšku. Nicméně, můžete se zmenšit, pokud to vaše téma umožňuje.
Občas se stane, že postranní panel něco odhodí, nebo možná vaše navigační nabídka obsahuje příliš mnoho prvků, které tlačí logo podivným směrem. Bez ohledu na to je nejlepší pohrát si s rozměry loga a nastavením webu, abyste dosáhli nejlepšího vzhledu.
Jako alternativa vypadají některá témata skvěle se čtvercovými logy, ale udržujte je pod značkou 250 x 250 pixelů, takže nezaberou příliš mnoho místa.
Pro maximální všestrannost přejděte na Nastavení > Značka in Shopify přidat a Automaticky a Square obraz. Tímto způsobem můžete nahrát buď v závislosti na situaci.
4. Shopify Velikost obrázku banneru (ideální velikost: 2000 W × 600 V pixelů)
Obvykle se jim říká obrázek hrdiny nebo obrázkový banner. Jedná se o větší obrázky, které můžete umístit do horní části domovské stránky, abyste předvedli nové produkty a zahrnuli text s tlačítkem. Je nezbytné, aby obrázky bannerů měly vysoké rozlišení, aby se zabránilo zrnitosti po změně velikosti a při zobrazení na různých zařízeních.
Shopify má také Hlavička obsahová sekce, která funguje podobně jako Banner Image obsahová sekce.
Bez ohledu na to, který z nich si vyberete, doporučujeme u bannerů a obrázků hrdinů dodržet rozměry 1200 pixelů na šířku x 600 pixelů na výšku.
Jak již bylo řečeno, často vám projde 1200–2000 pixelů na šířku a 400–600 pixelů na výšku. A jako vždy záleží na vašem tématu.
Nakonec je také rozumné upravit nastavení pro všechny obrázkové bannery a obrázky hrdinů. U většiny témat můžete upravit výšku banneru a říct Shopify kde chcete obsah banneru umístit, například v pravém dolním rohu nebo nahoře – abyste získali lepší přehled o obrázku za obsahem.
5. Shopify Velikost obrázku prezentace (ideální velikost: 2000 W × 600 H pixelů)
Podobně jako banner musíte v prezentacích používat obrázky s vysokým rozlišením. Tyto sekce obsahu umožňují zobrazit více fotografií v jedné oblasti stránky. Poté se posunou na další snímek v řadě.
Vzhledem k tomu, že jsou tak podobné bannerům, ve skutečnosti zachováte stejnou šířku a výšku, jako byste měli u hrdiny nebo obrázku banneru. Doporučení je šířka 2000 pixelů a výška 600 pixelů. Výška se však může pohybovat v rozmezí 400–600 pixelů a šířka může být v rozmezí 1200–2000 pixelů.
Ujistěte se, že spravujete všechna nastavení prezentace, abyste vytvořili nejlepší formátování vaší prezentace. Možná budete muset přesunout pole obsahu na jiné místo, nebo by prezentace možná vypadala lépe, kdybyste trochu zvětšili výšku.
Jedním z hlavních pravidel prezentace je vždy nahrát do stejné prezentace obrázky stejné velikosti. Při vytváření samostatné prezentace můžete upravit rozměry, ale ujistěte se, že všechny obrázky spojené do jedné prezentace mají stejné rozměry, aby byla zajištěna kontinuita a uživatelská zkušenost.
Jak optimalizovat Shopify snímky
Optimalizace vašich obrázků vám pomůže zlepšit načítání fotografií ve vašem e-shopu. Pomáhá vám také vytvořit uživatelsky přívětivější prostředí na webu, protože obrázky by měly doplňovat zážitek z nakupování, nikoli jej přebíjet.
Při optimalizaci obrázků je třeba vzít v úvahu několik aspektů Shopify. Tyto oblasti zahrnují optimální formáty obrázků, komprese, zdroje obrázků, styling a další. Pokračujte ve čtení, abyste se dozvěděli vše o osvědčených postupech a krocích, které je třeba podniknout pro optimalizaci obrázků Shopify.
Krok 1: Vyberte optimální obrázek Format
Shopify velikosti obrázků jsou důležité, ale první krok jakékoli optimalizace fotografií by měl zahrnovat výběr nejlepšího formátu obrázku.
Existuje mnoho obrazových formátů, které Shopify umožňuje.
Zde je to, čím jsou výjimečné:
- JPEG/JPG: Snad nejběžnější formát souborů pro obrázky, a je to tak správně. JPEGy se dobře komprimují a poskytují vynikající kvalitu. Doporučujeme je na stránky produktů, zvláště když máte na fotkách jemné detaily.
- PNG: Tento typ souboru je ve skutečnosti lepší než JPEG při zachování kvality po zmenšení velikosti obrázku. Můžete však zjistit, že soubory PNG se tolik nekomprimují. Jsou nejlepší, když potřebujete průhledné pozadí (nepodporované soubory JPEG), takže je máme rádi pro loga a některé obrázky bannerů.
- GIF: GIF je obrázkový formát pro animace. Je to v podstatě jako převést krátké video na pohyblivý obrázek, což je užitečné pro stručné vysvětlení produktu bez přehnané velikosti videa. Líbí se nám na domovských stránkách, produktových stránkách a příspěvcích na blogu. Nepoužívejte nadměrně GIFy, protože jim chybí bohatá barevná kvalita, kterou lze nalézt v jiných formátech, jako jsou JPEG, TIFF a PNG.
- WebP: Snad nejuniverzálnější ze všech obrazových formátů, WebP se stává stále běžnějším, protože nabízí silnější kompresi a kvalitu než JPEG i PNG, spolu s výhodami transparentnosti PNG. Nemluvě o tom, že můžete vytvářet animace s WebP. Zvažte použití WebP pro všechny typy obrázků v Shopify. Očekáváme, že v budoucnu budeme na internetu používat WebP častěji.
Jiné, než je, Shopify podporuje formáty jako HEIC, progresivní JPEG a AVIF. HEIC je standard formátu obrazu používaný na zařízeních Apple. Je extrémně kompaktní, může obsahovat více obrázků v jednom obrázku a poskytuje vynikající kvalitu. Jsou však nekompatibilní s většinou zařízení jiných výrobců než Apple, takže je těžké je doporučit. Obrazový formát AVIF má poměrně silné výhody díky vysoké kvalitě a dramatickým kompresním poměrům. Stručně řečeno, váš výkon s AVIF by měl být ve skutečnosti silnější než s obrázky JPEG a WebP. Chvíli však trvá, než jej stolní a mobilní prohlížeče přijmou jako standard formátu souborů. Takže to teď nemůžeme doporučit. Dokud si obrázky nebude moci prohlížet online téměř každý, kdo má připojení k internetu.
Na základě toho, k čemu chcete obrázek použít, vyberte shora vhodný formát. Poté přejděte k dalšímu kroku, aby styly obrázků zůstaly na vašem webu stejné.
Krok 2: Fotografujte na stejný styl na všech fotografiích
Kontinuita je pro fotografii v elektronickém obchodování klíčová. Utváří celkový vzhled vaší značky a vytváří standardizovaný dojem na celém vašem webu.
Například je běžné, že značky používají jednu barvu pozadí pro všechny obrázky produktů.
To platí i pro rozměry a styl obrázků. Pokud je většina obrázků vašich produktů orientována na šířku, nemíchejte několik fotografií s orientací na šířku. Jste více než vítáni, když do mixu začleníte jak lifestylové, tak produktové fotografie, ale nejlepší je držet se jednoho stylu pro většinu vašich focení.
Krok 3: Vytvořte kombinaci produktové a lifestylové fotografie
Jak již bylo zmíněno, s největší pravděpodobností budete chtít použít jeden typ fotografického stylu pro většinu svých produktových fotografií. Je však nezbytné zahrnout některé fotografie životního stylu, které doplní standardní fotografie produktů s jednobarevným pozadím a jiným pohledem na produkty.
Podniky s elektronickým obchodem mají nevýhodu, kdy si zákazníci nemohou produkty přímo vyzkoušet nebo si je osahat. Právě tam vstupují do hry lifestylové fotografie. Uživatelé mohou vidět, jak produkty vypadají v akci. Jak košile přehozená přes tělo nebo velikost skateboardu, na kterém někdo skutečně stojí.
Krok 4: Vyberte vhodné názvy a názvy souborů
Každý soubor obrázku má název a Shopify vezme tento název souboru a publikuje jej v metadatech vašeho webu (to dělá každá platforma elektronického obchodu).
Pokud tedy uložíte fotografie jako nová-fotka(1).jpg na vašem počítači a nahrajte je do svého obchodu, vyhledávače nebudou mít žádné informace o obsahu fotografie. To by mohlo poškodit vaše SEO.
Při optimalizaci obrázků projděte tyto kroky, abyste zajistili, že vyhledávače (a osoby se zrakovým postižením) pochopí, co se na obrázku děje:
- Přidejte název souboru, který připomíná to, co je uvnitř obrázku.
- Pokud náhodou nahrajete obecný název souboru, změňte obrázek Titul in Shopify. Toto nahradí výchozí.
- Použijte alt tagy pro ještě silnější reprezentaci toho, co je zobrazeno na obrázku. Toto jsou hlavní prvky, na které se vyhledávače zaměřují, protože ukazují, že vaše uživatelská zkušenost se zlepšila pro zrakově postižené.
Krok 5: Komprimujte obrázky před nebo během nahrávání
Shopify nabízí automatickou kompresi pro všechny obrázky nahrané na jeho servery, ale neměli byste se na to úplně spoléhat.
Nejlepším řešením je buď použít nástroj třetí strany ke kompresi obrázků před nahráním do Shopifynebo nainstalovat a Shopify plugin který automaticky komprimuje fotografie po nahrání.
Je mnohem snazší jít cestou aplikace, ale většina z nich vyžaduje předplatné, takže chápeme, zda potřebujete zůstat na rozpočtu.
Některé aplikace, které dobře fungují pro kompresi obrázků, zahrnují:
Vyzkoušejte tyto aplikace pomocí jejich bezplatných zkušebních verzí, abyste pochopili, jak dobře komprimují obrázky a jak automatizovaný proces je pro vás. Poté se můžete zavázat k odběru. Pro nástroje třetích stran doporučujeme TinyPNG a Image Resizer.
Krok 6: Zvažte bezplatné aplikace Image Finder
Přestože se důrazně doporučuje, aby značky elektronického obchodu pořizovaly své vlastní fotografie (místo hledání bezplatných alternativ nebo jejich přebírání z webových stránek výrobce), existují některé oblasti internetového obchodu, které jsou vhodné pro použití s obrázky zdarma.
Můžete například potřebovat scénický snímek někoho, kdo se dívá přes kaňon, aby doplnil příspěvek na blogu. Na druhou stranu můžete chtít použít fotografii jako pozadí k obrázku hrdiny, což vám umožní umístit skutečný obrázek produktu a popis na pozadí.
Pro tyto situace doporučujeme použít některé z těchto stránek s obrázky s licencí Creative Commons:
- Unsplash
- Roztržení (Od Shopify)
- Pexels
- Otevřený verš
Je důležité zdůraznit, že licence Creative Commons neznamená, že si můžete obrázek zdarma vzít a umístit na svůj web. Občas to tak je, ale musíte zkontrolovat každý obrázek, abyste se ujistili, jaká práva máte pro jeho použití.
Například licence Creative Commons vám říká:
- Pokud můžete obrázek použít pro komerční nebo nekomerční účely
- Když musíte uvést tvůrce, nebo pokud je to jednoduše doporučeno, udělejte to
- Pokud máte povoleno obrázek jakýmkoli způsobem upravit
Kromě toho existuje spousta bezplatných aplikací pro úpravu obrázků, které převezmou kontrolu nad změnou velikosti, filtry a oříznutím, aniž byste museli platit desetník:
Navrhujeme:
Krok 7: Spusťte A/B testování, abyste zjistili nejlepší snímky a Formats
Poté, co svým fotografiím dáte relevantní názvy souborů, změníte jejich velikost, oříznete je a rozhodnete se pro perfektní formát a velikost, je čas podívat se, jak vypadají ve vašem obchodě.
Naštěstí nesmíte držet palce a doufat, že obrázky jsou pro převody nejlepší. Máte možnost nahrát více variant stejných obrázků na produktové stránky, vstupní stránky a domovské stránky a poté zjistit, která z nich si vede nejlépe z hlediska konverzí.
Oba Téma Vědec a Shogun nabídnout funkce A/B testování pro několik částí vašeho Shopify design.
Na A/B testování je skvělé, že experiment nikdy nekončí. To vám umožní sledovat každý aspekt vašeho webu. Můžete vyměnit obrázky, které časem ztrácejí na síle, a spustit několik testů během jednoho časového období.
Shopify Průvodce velikostí obrázku: Náš závěr
Lepení čtvercových obrázků je jedním ze způsobů, jak zajistit, aby vaše fotografie z elektronického obchodu zůstala neoříznutá. Možná však zjistíte, že toto pravidlo není vždy pravdivé, pokud jde o vás Shopify téma.
Proto doporučujeme nahrát více velikostí obrázků pro produkty, kolekce a bannery, abyste pochopili, co váš motiv nejlépe zvládne. Jinak se nám líbí standard 2046 × 2046 pixelů. Pro bannery, loga a prezentace však budete chtít použít konkrétnější rozměry uvedené výše v tomto článku.
Pokud potřebujete nějaké vysvětlení, dejte nám vědět v komentářích níže Shopify velikosti obrázků!
Komentáře 0 Odpovědi