Ukládání obrázků pro web bylo vždy trochu záhadou pro mnoho. Vkládání obrázků, které jsou těžké (originální obraz velikosti na 5000px šířka, neoptimalizovaných obrázků) nebudou vytvářet pouze otázky s uživatelské zkušenosti na vaše stránky, ale bude také mít vliv na vaše SEO strategie (rychlost načítání, míra okamžitého opuštění, pořadí, atd.).,
Tento článek je rozdělen do několika částí, které pokrývají vše, co potřebujete vědět o tom, jak připravit obrázky pro web. V první části příspěvku uvedeme doporučené velikosti obrázků pro váš web Flothemes. Dále se článek bude zabývat tím, jak zkontrolovat různé sekce na vašem webu, abyste identifikovali správné velikosti obrázků před jejich nahráním na web. Vysvětlíme také, jak správně exportovat / ukládat obrázky, takže jsou optimalizovány pro rychlost.,
nakonec poskytneme několik tipů pro SEO obrázků, jak správně pojmenovat obrázky při jejich ukládání a proč používání značek ALT zlepší vaše SEO. U již nahraných obrázků na váš web vám ukážeme, jak identifikovat obrázky, které jsou příliš velké a zpomalují váš web. Začneme!
proč jsou důležité velikosti obrázků a výkon webu?
Neoptimizované obrázky zpomalují webové stránky. Pomalé webové stránky = špatná uživatelská zkušenost, nižší šance na zařazení do Vyhledávání Google a nakonec méně dotazů a zákazníků.,
Ukládání obrázků s vhodnými rozměry a optimalizaci obrazů pro web může pomoci s pár věcí:
- Rychlost – podle výzkumu provádí Google, pokud webová stránka načte za více než 5 sekund, pravděpodobnost, že mobilní uživatel opustí, že stránka zvyšuje o 90%. Změnou velikosti a zmenšením velikosti obrázků zrychlíte stránky svých webových stránek.
- uživatelská zkušenost-kvalitní, působivé obrázky pomáhají návštěvníkům mít poutavější zážitek při procházení vašich webových stránek., Tím, že drží ty obrázky optimalizované a rychlé načítání – to zajišťuje plynulý a hladký zážitek pro vaše návštěvníky, což je motivuje, aby trávit více času na vašich stránkách a prozkoumat obsah.
- SEO ranking – rychlost webu je faktorem hodnocení. Čím rychleji je váš web, tím lépe můžete potenciálně zařadit. Webové stránky s optimalizovanými obrázky se načtou mnohem rychleji na stolních i mobilních zařízeních.
- Prodej – krát rychlejší načítání a lepší SEO může pomoci přivést více uživatelů na váš web, což zvyšuje vaše šance, že se zeptal a rezervované.,
poznámka: Když mluvíme o velikosti obrazu, máme na mysli rozměr obrazu v pixelech.
jaké jsou nejlepší obrázky velikosti pro web a Flothemes?
Při nahrávání obrázků na web existuje řada věcí, které berou v úvahu, jako je to, co je na obrazu se používá pro, jak velký by měl soubor mít, a jaký typ snímku, který by měl být použit pro různé oblasti na vašem webu.,
Obrázek Použití a Typ
Existují různé případy, kdy budete chtít používat různé velikosti obrázků pro různé oblasti vašeho webu, níže jsem se bude týkat nejčastějších oblastí a třídění možnosti, které lze použít pro každého. Všimněte si, že se doporučuje, retina friendly, možnosti dimenzování vzhledem k tomu, že většina uživatelů prohlížet stránky na zařízení, které je buď mobilní nebo 13-15 palců průměrná velikost. Pokud se však snažíte, aby web vypadal skvěle pro váš 27 palcový monitor (který má opravdu vysoké rozlišení), všimněte si, že to nemusí být to, co vaši potenciální klienti používají.,
chcete-Li být přesnější, jak se uživatelé prohlížet vaše stránky a vaše portfolio, můžete zkontrolovat zařízení používaná pro přístup k webu přes Google Analytics (přejděte na Publikum – Technologie – Browser & OS – rozlišení Obrazovky), a upravit doporučená velikost tak, aby odpovídala požadované podíl průměrného uživatele.
obrázky plné šířky
2400x1600px, jpeg, uložené pro web a optimalizované
na webu můžete mít sekce, kde musíte použít obrázky plné šířky, které pokrývají celou obrazovku zleva doprava., Tyto oblasti mohou být obrázky hrdinů, prezentace na celé obrazovce, bannerové obrázky. Chcete-li zajistit, aby vaše obrázky plné šířky vypadaly dobře na jakémkoli zařízení velkém nebo malém, doporučená velikost je 2400x1600px. Všimněte si, že zařízení mají jiný poměr než ten, který fotografujete, a je možné, že vaše obrázky budou oříznuty při prohlížení na webu. Jako doporučení se pokuste natočit širší snímky než obvykle pro váš webový obsah, abyste se vyhnuli oříznutí důležitého obrazového obsahu.,
Obsah Uvnitř Obrázky
Horizontální – max šířka 1500px, jpeg, uložit pro web, a optimalizované
Vertikální – max. šířka 1000 px, jpeg, uložit pro web, a optimalizované
Na vašem webu stránky, tam bude sekce se skládá z obrázků, textových oblastí, výzva k akci tlačítka, atd. V podstatě se jedná o sekce, kde jsou obrázky součástí vnitřního obsahu (přečteno jako „ne plná šířka“)., V těchto případech, pokud není doporučené dimenzování je uvedeno, jak některé z našich Flothemes bloky, můžete postupovat podle výše uvedených doporučení pro horizontální a vertikální snímky. Na základě vašeho poměru se výška při ukládání obrázků odpovídajícím způsobem upraví.,zobrazit galerií: ujistěte se, že jsou všechny stejné výšce doporučuje 1500px, bez ohledu na to, zda jsou horizontální nebo vertikální
Blog Post Obrázky
- pokud připravujete obrázky nahrát uvnitř blogpost, ujistěte se, že jsou všechny stejnou šířku, doporučená 1500px, bez ohledu na to, zda jsou horizontální nebo vertikální
Nejlepší Obrázky
k Dispozici jsou 3 typy uváděných snímků: portrét, krajina a hrdiny snímků., Velikost obrazu na výšku a na šířku se řídí stejným doporučením jako obrázky uvnitř obsahu, zatímco doporučená velikost pro obrázky hrdinů je pokryta obrázky v plné šířce. Klíčem k dobrým představeným obrázkům je konzistence. Pokud chcete použít všechny portréty, ujistěte se, že mají stejnou velikost, totéž platí pro obrázky krajiny a hrdiny. Pokud používáte mřížku zdiva, velikost výše není tak relevantní, jen se ujistěte, že obrázky mají šířku nejméně 1000px.,
Pokud máte nějaké problémy s velikostí obrazu, nezapomeňte se podívat na možnosti velikosti obrázku v nastavení Flothemes, abyste se ujistili, že jsou správně nastaveny.
Způsoby, jak zjistit správnou velikost obrázků pro váš web
Je možné, že doporučené velikosti výše nebude odpovídat vašim potřebám vzhledem ke specifické rozložení. Pokud si nejste jisti správnou image rozměr, naštěstí, existuje několik způsobů, které vám pomohou snadno zkontrolovat své webové stránky, obrázky, a určit správné dimenzování potřebné pro každý prvek na vaše stránky.,
důležitá věc, kterou si musíte pamatovat, je, že u zařízení retina musíte zdvojnásobit hustotu obrazových pixelů. To znamená, že potřebujete snímky dvakrát větší než zařízení retina, aby vypadaly hezky a svěží. Takže jakmile najdete správné velikosti obrázků pro každou sekci na vašem webu, budete chtít tyto velikosti zdvojnásobit a teprve poté je exportovat a nahrát na váš web.
a., Použití rozšíření Image Size Info
první metoda, jak najít velikost obrázku pro váš web, je použití rozšíření Image Size Info Pro Chrome (pokud nepoužíváte Chrome v počítači, doporučujeme jej použít při vytváření webu). Po instalaci rozšíření vám tento nástroj umožní zjistit velikost obrazu každého prvku obrázku na vašem webu.
Podívejte se na obrázky na vašem webu, dělat si poznámky, a pak s touto znalostí budete moci přizpůsobit své fotografie přesně, aby se vešly do prostorů, jako jsou určeny na téma design., Jen si pamatujte, že s sítnice obrazovek vy vyžadují, aby vaše snímky být dvakrát větší než zamýšlený prostor. Takže pokud máte obrazový prostor 750x500px, pro sítnici by to mělo být 1500x1000px při nahrávání do WordPress (nebo jiné platformy).
například: když jsme si prohlédněte obrázek s tímto rozšířením, je zobrazen na 780x520px, ale skutečná velikost je 1560x1040px. Je to proto, že při kontrole obrazu používáme obrazovku sítnice. V tomto případě můžete použít velikosti rozměrů k výběru velikosti obrázku.,
na zařízení bez sítnice zůstanou zobrazené a rozměry stejné. V tomto případě zdvojnásobte čísla a Nahrajte obrázky v této velikosti.
hlavním omezením tohoto nástroje je to, že nemůže prohlížet obrázky na pozadí pro dimenzování. Na mnoha tématech se obrázky na pozadí používají místo prvků HTML obrázku, protože jsou flexibilnější při zobrazování obrázků. Pokud nemůžete prohlížet obrázky, protože se jedná o obrázky na pozadí, můžete pomocí další metody zkontrolovat velikost obrázků na vašem webu.
b., Pomocí nástroje Inspector
s Chrome a Safari můžete také použít nástroj Developer inspector k nalezení velikostí obrázků na webu. Princip bude stejný jako dříve, zkontrolujte různé prvky na místě a poznamenejte si velikosti. Zdvojnásobte velikosti obrázků pro zařízení retina a poté je nahrajte do WordPress, Jakmile budou optimalizovány pro web a správně pojmenovány pro SEO.
omezení této metody bude, že pokud stránka používá některé citlivé prvky stanovené v REM hodnot, obrázky lze zmenšit při použití inspektor ve stejném okně., Pokud web také používá citlivé prvky, budou větší na větších obrazovkách a menší na jiných. Při kontrole webu je nejlepší použít větší obrazovku, pokud je to možné, takže můžete získat nejpřesnější velikost obrazu. V každém případě vám použití této metody poskytne dobrý údaj o velikostech vašeho webu a umožní vám přistupovat k přidávání obrázků na váš web s větší péčí.
Chrome
Chrome má vestavěné nástroje pro vývojáře, a proto je pro vývojáře a designéry nejoblíbenějším prohlížečem na webu., Následující video vysvětluje, jak si můžete prohlédnout obrázky na vašem webu zjistit jejich rozměry:
Firefox
Firefox, stejně jako chrome, mají vestavěný inspektor nástroj, který umožňuje zkontrolovat obrázky pro vaše stránky.
Safari
Pokud používáte Safari, můžete použít inspektor nástroj vidět velikostí obrázků. Podívejte se na následující příručku, Jak povolit nástroje pro vývojáře.,
nyní můžete přejít do různých sekcí na vašem webu a připravit rozměry obrazu.
Pro galerie se budete chtít podívat na výšku obrázků, protože jsou obecně omezeny výškou (takže šířku lze nastavit na auto).
u blogových příspěvků si budete chtít všimnout šířky obrázků, protože jsou omezeny šířkou (výška může být automatická).,
u ostatních prvků na vašem webu byste měli použít výše popsanou metodu k získání správných rozměrů a nahrát je v optimálních rozměrech pro váš web.
Nyní, když víte, jaké rozměry potřebujete pro všechny prvky na vašem webu, vysvětlíme, jak optimalizovat všechny vaše obrázky pro velikost,to je z hlediska velikosti dat. Velikost souboru vašich obrázků je také velmi důležitá pro web. Nahrávání nafouklé a těžké obrázky na svých webových stránkách bude namáhat své serverové zdroje, zpomalit váš web, a ve skutečnosti vytvořit negativní uživatelský dojem.,
optimalizace a ukládání obrázků pro web
při optimalizaci a ukládání obrázků na web je třeba zvážit řadu věcí. Měli byste zvážit, jaký typ souboru použít, JPG, PNG nebo GIF v závislosti na účelu. Budete chtít správně označit obrázky pro účely SEO a budete je chtít uložit ve správném barevném formátu (sRGB pro web).
V závislosti na účelu je třeba ukládat obrázky v jednom z následujících formátů .jpg, .gif, nebo .GIF. JPG bude nejběžnějším formátem při ukládání obrázků pro vaše webové stránky portfolia, budou také nejlehčí.,
pro názvy souborů se ujistěte, že jsou vhodné pro každý konkrétní obrázek nebo blogový příspěvek. Používejte pouze písmena, čísla, podtržítka a pomlčky. Pokuste se používat pouze anglická písmena. Znaky z jiných jazyků, otazníky, mezery, procenta znamení mohou nahrát nesprávně nebo způsobit neočekávané chování ve vašich galeriích nebo blogových příspěvcích.
například, pokud jste právě udělali boho svatbu v Biltmore Santa Barbara, označte obrázky, boho-wedding-biltmore-santa-barbara_0001.jpg to bude mnohem více SEO přátelský, a mohl by poskytnout lepší hodnocení pro vaše stránky.,
optimalizace obrázků v Lightroom
přiznejme si to, existuje spousta různých nastavení pro výběr a nekonečné kombinace čísel pro vstup. Pokud však již znáte formát obrázku a požadované rozměry obrazu souboru, je to mnohem jednodušší.
v Lightroom se můžete dostat do exportního dialogu 3 způsoby:
zvýraznění a Export
můžete jednoduše zvýraznit / vybrat libovolnou fotografii z knihovny Lightroom a kliknout pravým tlačítkem myši na fotografii. V rozbalovací nabídce vyberte možnost Exportovat.,
Soubor a Export
druhý způsob je jít do Souboru -> Export
Používání klávesnice klávesová zkratka
třetí a nejrychlejší způsob je použít klávesovou zkratku:
shift + command + E (⇧+⌘+E)
nezáleží na Tom, jak se tam dostanete. Každý z nich bude fungovat, takže si vyberte ten nejjednodušší, který si pamatujete.,
Lightroom Export Dialogové okno
Nyní, když víte, jak exportovat obrázky pro web, budeme pokrývat 4 oddíly a různé možnosti, jak si vybrat v Lightroom export dialogové okno, které vám umožní exportovat optimalizované obrázky pro web.
1. Pojmenování souborů
každý export může obsahovat vlastní nastavení přejmenování. Pokud se budete držet výchozí možnosti, budou mít vaše obrázky stejný název jako původní soubory a budou uloženy jako obrázek JPEG., Doporučujeme však zaškrtnout políčko“ přejmenovat na “ a vybrat jednu z mnoha přejmenovacích šablon, které Lightroom nabízí k přizpůsobení exportovaných obrázků. V pojmenování souborů jsme přejmenovali názvy souborů na „vlastní název-sekvence“, kde je vlastní Text úzce spojen s naším názvem blogu nebo klíčovými slovy blogu.
2. V nastavení souboru
se ujistěte, že je formát obrázku nastaven na JPEG. To je nejvíce web-friendly možnost. Vaše kvalita by neměla být menší než 65., Normálně jsme to nastavili na 75. Váš barevný prostor musí být sRGB. Toto je barevný prostor používaný webem, takže to bude nejlepší. Zaškrtněte políčko “ Omezit Velikost souboru na:“. Zaškrtnutím tohoto políčka by se kvalita souboru výrazně snížila.
Chcete-li shrnout, při ukládání obrázků použijte tato nastavení:
- 75% kvalita
- .JPEG (.PNG pro loga a ikony)
- sRGB barvy
3. Velikost obrázku
zaškrtněte políčko Změnit velikost, aby se vešly, a vyberte šířku & výška., V poli W: H: zadejte W (šířka v pixelech) na požadovanou hodnotu (1500px pro příspěvky na blogu a 2880 pro prezentace). Ponecháním hodnoty v H (výška) prázdné bude nastavena na automatické dimenzování.
Pro galerie můžete ponechat W jako prázdné a nastavit H (výšku) na 1500px, což by mělo být optimální pro většinu témat.
výše uvedené velikosti jsou již optimalizovány pro zařízení retina.
4. Výstupní ostření
zaškrtněte políčko vedle položky “ zaostřit Pro „a vyberte částku na“Vysoká“.
nyní můžete exportovat obrázky a sledovat tento proces kdykoli exportujete obrázky.,
nastavení kvality obrazu
ve světě snů fotografa bychom vždy exportovali obrázky v maximální kvalitě. Ve skutečnosti zjišťujeme, že maximální kvalita exportu není nutná. U webových velikostí jsou rozdíly v kvalitě často těžko vnímatelné, což znamená, že můžeme mírně snížit kvalitu a výrazně snížit velikost souboru.
Pokud obrázky nejsou měkké, vaši klienti nebudou znát rozdíl mezi tím, jaký obrázek jste pořídili, a obrázkem, který je zobrazen na vašem webu.
to platí i pro barvy obrázků., Každý displej je kalibrovaný jinak, takže starosti o malé barevné odchylky mezi obrazem v prohlížeči a ve své editační nástroj výběru je ztráta času, pokud to ničí kvalitu obrazu.
Na horním konci stupnice kvality, tam jsou klesající výnosy. Rozdíl v vnímané kvalitě mezi nastavením kvality 75% a 100% je těžké vidět, ale výrazně zvyšuje velikost souboru.
s ohledem na výše uvedené výsledky, výběr export 65-75 kvality., Udeří správnou rovnováhu kvality a optimální velikosti obrazového souboru.
nyní je řada na vás přejmenovat soubory, exportovat je na web, uložit je na web a budete mít nějaké opravdu dobře optimalizované obrázky pro web.
Bonusové krok: optimalizovat obrázky před nahráním je na webu
je Tam jeden poslední krok, který může pomoci výrazně odstranit nadbytečná data z vašich obrázků, a snížit velikost souboru – mluvíme o nástroje, jako jsou JPEGmini nebo TinyJPG.
tyto nástroje vám mohou pomoci dále optimalizovat vaše obrázky., Vyberte si jeden a spusťte obrázky přes něj:
- JPEGmini – tato aplikace vám umožní komprimovat obrázky a snížit jejich velikost souboru bez viditelného vlivu na kvalitu obrazu. Pokud máte verzi Pro, existuje rozšíření pro Lightroom, které to provede automaticky při exportu-vysoce doporučený nástroj pro každého fotografa.
- TinyJPG nebo TinyPNG – obrázky můžete spouštět prostřednictvím tinyJPG nebo tinyPNG, abyste mohli obrázky dále komprimovat. Existují 2 omezení ačkoli., S bezplatnou verzí tohoto nástroje můžete komprimovat pouze 20 obrázků najednou a velikost souboru na obrázky by měla být nižší než 5 MB.
Toto je poslední krok při vytváření rychlý web-optimalizované obrázky, aby se vaše stránky rychlost rychle, a obrázky vypadají skvěle!
Přečtěte si více o této komplexní příručce, Jak optimalizovat obrázky pro váš web WordPress.
Image SEO
Nyní, když máte své obrázky velikosti, optimalizované a nahrané na váš web – nyní budete chtít přidat ALT tagy! Toto je poslední krok při vytváření optimalizovaných obrázků pro účely SEO., Značka ALT je to, co vyhledávače používají ke čtení obrázků. Bez nich jsou vaše obrázky na webu téměř neexistující.
naštěstí s WordPress můžete jít do knihovny médií po nahrání a označit každý obrázek., Jeden skvělý plugin, který vám umožní udělat to rychle, je WP Meta SEO, když přidáno můžete jít do WP SEO Meta > Informace o Obrázku a přidat Značky ALT na všechny obrázky, kde není přítomen, jakmile bude dokončen plugin může být de-aktivován:
Existuje také několik pluginů, které budou přidat značky alt automaticky. Rank Math je dobrým řešením pluginu, jednoduše jej nainstalujte a po nahrání z popisu obrázku nebo názvu automaticky přidá alt tagy.,
Přečtěte si tento obrázek SEO průvodce objevit další tipy a triky a ujistěte se, že dostanete co nejvíce z vašich obrázků ve výsledcích vyhledávání.
tak to je vše. Tyto 3 kroky k mít Optimalizované Obrázky pro vaše webové stránky.
začněte s zjišťováním rozměrů obrazu, poté je uložte správně na web, přidejte správné tituly a optimalizujte jejich velikost. Nakonec přidejte alt tagy pro zlepšení SEO prostřednictvím WordPress (mělo by být možné přidat alt tagy ve všech systémech pro správu obsahu, Podívejte se na dokumentaci a zjistěte, jak nebo oslovte podporu).,
Hledání Neoptimalizovaných Obrázků
Pokud jste již nahrané obrázky na vašem webu a chcete vědět, jak najít ty, které zpomalují vaše stránky, podívejte se na následující video. Nástroje jako GTMetrix nebo Pingdom nebo pomocí konzoly prohlížeče vám snadno umožní najít obrázky, které jsou pro web příliš velké.
Pokud byste se chtěli dozvědět více o optimalizaci webu pro rychlost, podívejte se na tento užitečný průvodce.
Flothemes
Empowering You
Leave a Reply