Jak optimalizovat obrázky pro váš web a zajistit, aby fungovaly na všech zařízeních (citlivé obrázky pro mobily, počítače, tablety)

Proč se obtěžovat s optimalizací obrázků? Dovolte mi, abych se vás na to zeptal; kdy jste naposledy viděli web bez jakýchkoli obrázků na něm? "Nikdy" by byla správná odpověď. ��‍♂️ Obrázky jsou prostě příliš důležité. A nejedná se ani o tu fotografii, která by stála za to, abych šla po vaší "10 tipů online marketingu" pošta. Obrázky jsou užitečné pro více účelů. Zamyslete se nad rozvržením, designovým prvkem, logem, profilovými obrázky a, ano, také obrázky z blogů.


Upřímně řečeno, v roce 2020 nemůžete mít web, aniž byste na něm použili alespoň hrst obrázků. Jak již bylo řečeno, obrázky nejsou tak jednoduché na to, aby se zjistilo, že majitel webových stránek je. Dokonce i vynětí problémů z toho, jaké obrázky použít a kde, existují také problémy s jejich zobrazováním z čistě technického hlediska:

  • Jak poskytovat citlivé obrázky na více zařízeních?
  • Jak je nutit, aby vypadaly skvěle na všech těchto zařízeních?
  • A co je nejdůležitější, jak zajistit, aby se načítaly ve slušném čase?

To jsou otázky, na které dnes odpovídáme. Zde je váš konečný průvodce jak optimalizovat obrázky pro váš web a zajistit, aby vypadaly skvěle na všech zařízeních:

Jak optimalizovat obrázky pro váš web a zajistit, aby fungovaly na všech zařízeních

�� Proč nás poslouchejte?

Obrázky byly pro nás v poslední době kritickým tématem, a to kvůli jednomu z novějších nástrojů v naší rodině – Optimole.

Optimole je služba optimalizace obrazu typu set-it-and-forget-it & nářadí. Považujeme to za nejlepší takové řešení na webu a můžeme to dokázat! Ale to je řeč jindy. Ať tak či onak, v průběhu let jsme se toho hodně naučili, jak správně optimalizovat obrázky. Chceme s vámi dnes sdílet některé z těchto znalostí.

�� Proč byste měli optimalizovat obrázky na svém webu

Obrázky, kromě vypadání skvěle, také spotřebovávají značné množství místa na disku a šířku pásma. Přesněji řečeno, obrázky představují něco od 30% do 85% velikosti standardní webové stránky.

test rychlosti

To je obrovské – a není to jako odebírání obrázků, je to možnost – takže nejlepší věcí, kterou můžeme udělat, je naučit se, jak optimalizovat obrázky způsobem, který jednoduše zabírá méně místa na disku..

Zisky mohou být obrovské, a to zejména při jednání s opakovanými obrázky – obrázky, které je třeba načíst na každou jednotlivou webovou stránku. To jsou věci jako pozadí, konstrukční prvky, loga, ikony atd. Optimalizace pouze jednoho pozadí může někdy vést ke snížení velikosti stránky o 70%.+.

Podívejte se na tento příklad:

porovnání velikosti stránky před a po optimalizaci obrázků

Ale vydrž, zhoršuje se to! Pokud obecné bitvy o výkon obrazu nestačily, existuje také mobilní oblast �� a přináší to zcela novou řadu výzev:

Za prvé, pravděpodobně byste neměli zobrazovat stejnou sadu obrázků návštěvníkům počítačů a mobilním návštěvníkům. Kontexty jsou prostě velmi odlišné – to zahrnuje velikosti obrazovky, orientaci (obvykle na výšku) a dokonce i myšlení čtenáře.

navíc, údaje naznačují že mobilní návrhy s menším počtem obrázků mají obvykle lepší výsledky, pokud jde o konverze.

Když jsou všechny sestaveny dohromady, existuje několik věcí, o které musíme při poskytování citlivých obrázků na více zařízeních dbát:

  • nejprve optimalizujte obrázky pro konkrétní zařízení
  • ujistěte se, že obrázky jsou komprimovány na maximální přijatelnou úroveň, aby byla zaručena nejrychlejší doba načítání
  • zobrazit optimální počet obrázků s ohledem na zařízení a obrazovku

��‍♂️ Jak optimalizovat obrázky a doručovat je do všech typů zařízení

Optimální zpracování vašich obrázků a jejich co nejrychlejší doručení návštěvníkovi má několik součástí. V této příručce si je projdeme všichni:

�� Vyberte správný formát

Začněme s věkovou otázkou: PNG nebo JPG?

Většina lidí říká "JPG po celou dobu!" Ale to opravdu není správné:

PNG vs. JPG

Ano, většinu času nebo alespoň v nejběžnějších scénářích toho, co bychom mohli potřebovat, JPG zabírají méně místa na disku a tím i menší šířku pásma.

Ale klíčové slovo je zde "nejběžnější scénáře." Ve skutečnosti, pokud to, co máte, je složitý obraz se spoustou barev a barevných přechodů (aka. Hodně "barevné informace"), pak JPG budou skutečně lepší. Myslete na standardní fotografie. Ty fungují lépe jako JPG.

Pokud však máte obrázek, který je o něco jednodušší, PNG bude vždy vyhrávat.

Zvažte následující příklad. Zde jsou čtyři obrázky:

image-1-aobrázek 1-a: JPG

image-1-bobrázek 1-b: PNG

image-2-aobrázek 2-a: JPG

image-2-bobrázek 2-b: PNG

  • obrázek 1-a je 312 KB
  • obrázek 2-a je 196 KB

Zkuste uhádnout velikosti dalších dvou obrazů…

Tvoje odpověď:

Špatně!

  • obrázek 1-b je 1,3 MB (pravděpodobně jste to uhádli)
  • obrázek 2-b je 106 KB (počkat, co ?!)

Jak vidíte, PNG vyhrává pro jednoduché obrázky s nízkými barvami.

Přemýšlejte například o screenshotech rozhraní, jednoduchých ilustracích atd.

�� Lekce 1:

Ne vždy jděte na JPG. Předpovídejte, jak velký bude obraz na základě jeho obsahu, a poté použijte správný typ obrázku.

Nyní na trochu aktuálnější otázku: SVG? WebP?

SVG a WebP

SVG a WebP jsou o něco méně běžné typy obrázků na webu, ale jsou skvělé, pokud je používáte, jak by se měly používat. Dovolte mi objasnit:

  • SVG je formát vektorového obrázku založený na XML. Obsah obrázku lze definovat v jednoduchém souboru XML – stejný soubor XML, který byste použili pro jiné základní účely zpracování dat. Díky tomu je SVG dobrým formátem, pokud pracujete s jednoduchým vektorovým obrázkem.
  • WebP je nový formát společnosti Google. Chválí se, že WebP je o 25-34% menší než srovnatelné JPEG a 26% menší než srovnatelné PNG.

Jaký je úlovek? Můžete optimalizovat obrázky tak, že je všechny změníte na SVG a WebP?

za prvé, SVG. V zásadě používejte SVG, pouze pokud (A) obrázek lze efektivně uložit jako SVG a (b) pokud vám nevadí, aby si lidé vzali tuto SVG a upravili ji.

Jak jsem řekl, SVG je založeno na XML, což znamená, že úpravy SVG grafiky je opravdu snadné. Toto není vždy něco, co chcete – zejména při jednání s logem vaší značky nebo jinou důležitou grafikou.

Ve většině scénářů SVG nejsou formátem, který budete používat velmi často.

Teď, na WebP. Formát je skvělý a ve většině případů skutečně ušetří spoustu místa na disku, jak bylo slíbeno. Podívejte se na tyto dva příklady obrázků:

Příklad obrázku jpg

příklad obrázku webp

  • původní verze JPG je 204 KB
  • WebP je 58 KB

Trik je v tom, že ne všechny prohlížeče podporují WebP. Ve skutečnosti možná ani nevidíte obrázek WebP, který jsem použil výše. V době psaní pracuje WebP v prohlížečích Google Chrome, Firefox, Edge a Opera. Starší verze tento formát samozřejmě nepodporují.

To v praxi znamená, že přidání obrazu WebP není tak jednoduché jako přidání JPG nebo PNG.

Myslím, že technicky můžete použít kus kódu, jako je tento:

… Ale pokud prohlížeč uživatele nepodporuje formát, místo toho uvidí ikonu známého nefunkčního obrázku.

Abyste mohli efektivně používat WebP, měli byste poskytnout záložní obrázky. Například:

To znamená mnohem více práce. Představte si, že budete muset vytvořit takovou značku pokaždé, když chcete přidat obrázek WebP do blogového příspěvku nebo stránky. A dovolte mi, abych vás tam zastavil, ne, WordPress nativně nepodporuje WebP, takže to musíte udělat ručně.

Přesto doporučuji tuto komplikovanou manuální trasu WebP pokaždé, když se zabýváte obrázky, které se objevují na více stránkách na vašem webu, nebo obrázky, které mají obrovskou velikost, a potřebujete každý nástroj, který tuto velikost nějakým způsobem potřebuje.

Můžete uložit obrázky jako WebP ve Photoshopu nebo použít nástroj jako XnConvert (volný, uvolnit).

�� Lekce č. 2:

Pokud se chcete rychle optimalizovat obrázky, neobtěžujte se SVG. Čas, kdy je zbytečně vytvoříte, se nevyplatí (i když neváhejte nesouhlasit; tady je dobré) alternativní vzít). Používání PNG bude mnohem rychlejší a pokud jde o spotřebu místa na disku, nebude o nic horší.

WebP použijte, když pracujete s obrázky, které se objevují na více stránkách, nebo obrázky, které jsou dostatečně velké. To je, pokud nemůžete zpracovat zpracování WebP automaticky, což lze provést pomocí některých dalších nástrojů. V takovém případě použijte WebP všude. O tom si promluvíme za sekundu.

��️ Komprimujte obrázky

Komprese obrazu je jako magie. Dovol mi ukázat ti:

Toto je stejný obrázek JPG, uložený pouze na jiné úrovni komprese (často označovaná jako úroveň kvality):

coon-100%100% kvalita

coon-95%95% kvalita

coon-85%85% kvalita

coon-50%50% kvalita

Pokud jste jako většina lidí, pak ti první tři vypadají stejně. Čtvrtý začíná hledat "trochu horší." (Klikněte pravým tlačítkem a "Otevřít obrázek na nové kartě")

Kolik místa zabere každý z těchto obrázků:

  • 100% kvalita: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Obrovské, že ?! Můžete přejít z ~ 1 MB na ~ 500 KB bez výrazné ztráty kvality, stačí změnit kompresi ze 100% na 95%.

Tuto kompresi JPG lze zvládnout poměrně automaticky pomocí různých nástrojů, což je skvělá zpráva. Ne všechny obrázky jsou však vytvořeny stejně, takže někdy můžete získat špatně vypadající obrázky vedle špatně vypadajících obrázků, přestože prošly stejným procesem komprese..

Celkově si můžete udělat skok sem a docela výrazně snížit kvalitu vašich JPG. Pravda je, že návštěvníci vašeho webu se nestarají o ostré obrázky všude.

Dobře, měl bych to objasnit; ano, když jim chcete něco ukázat – například obrázek, který je klíčem k určitému obsahu, např. obrázky produktů, fotografie z hotelových pokojů – pak by tyto měly být ostré.

Ale v jiných oblastech můžete být trochu uvolněnější. Například pozadí nemusí být 100% ostré. Obecně platí, že všechny obrázky, které návštěvník přímo nezasahuje, mohou mít nižší kvalitu.

Dva z mých oblíbených nástrojů, které vám zde mohou pomoci, jsou:

ImageOptim pro kompresi stolního počítače v systému Mac. Můžete jen uchopit obrázek z plochy, přetáhnout ho na ImageOptim a poté nástroj provede jeho magii a po dokončení přepíše zdrojový obrázek.

Poté můžete tento obrázek získat a normálně jej nahrát na svůj web.

ImageOptim - skvělý nástroj pro optimalizaci obrázků na ploše

Druhým nástrojem je Optimole. Tento nástroj do značné míry předefinuje způsob zpracování obrázků na webových stránkách. Pro účely této diskuse řekněme, že je skutečně efektivní, když chcete optimalizovat obrázky, které jsou ve vaší knihovně médií.

optimole - skvělý nástroj pro optimalizaci obrázků v cloudu

Nyní na PNG. Stejně jako JPG lze i PNG komprimovat. Tentokrát však není nevýhodou, pokud jde o ztrátu kvality. PNG lze efektivně komprimovat pomocí bezeztrátových algoritmů.

Jinými slovy, vždy komprimujte své PNG!

Podívejte se na tyto tři obrázky:

kwf-1
kwf-2

kwf-3

Vypadají stejně, ale ve skutečnosti se ujímají:

  • 346 KB
  • 215 KB
  • 100 KB

Zkuste hádat, který je který.

Tři nástroje pro kompresi a zmenšení obrázků:

  • ImageOptim znovu. Ale tohle zabere hodně času s PNG, takže pokud máte mnoho z nich na zpracování, možná budete chtít udělat šálek kávy, zatímco nástroj pracuje.
  • ImageAlpha. Mnohem rychlejší než ImageOptim. Je to moje řešení pro stolní počítače pro PNG.
  • Optimole. Není divu, že Optimole také zpracovává PNG kompresi. Všechno se děje na autopilotu.

�� Lekce č. 3:

Komprimujte své JPG tak, aby dosáhly přijatelné úrovně kvality vs místa na disku.

Komprimujte své PNG vždy.

�� Zobrazujte správné rozměry

To je možná nejdůležitější aspekt celku "citlivé obrázky" hádanka. Jak víme, jsou tam desítky, ne-li stovky různých velikostí obrazovky, a my musíme nějak zajistit, aby naše obrázky vypadaly skvěle na všech.

Snadné řešení? Slouží velkému obrazu … to může být vždy zmenšeno, že? Technicky je to správné, ale v praxi to ztratí velkou šířku pásma a vaše stránky se na většině zařízení opravdu pomalu načítají..

Lepším řešením je změnit měřítko všech obrázků na správné velikosti, které jsou nejvýhodnější u nejběžnějších zařízení, a poté je podle toho obsluhovat.

Jak byste očekávali, k dosažení tohoto cíle potřebujete různé verze stejného obrazu.

Jedním ze způsobů, jak toho dosáhnout, je začít se základní šířkou vašeho návrhu a největší velikostí obrázku, kterou lze použít, a poté odtamtud zmenšit některá běžná zařízení a body přerušení.

Například většina webů nepřekračuje značku 1100 px pro šířku bloku obsahu, takže lze předpokládat, že maximální obrázek, který lze v tomto případě zobrazit, je také 1100 px na šířku.

Poté můžete vytvořit body přerušení pro 800 px a 550 px (společné hodnoty), které pokryjí scénáře tabletů a mobilních zařízení. I když vám to nedá 100% perfektní výsledky na všech zařízeních, alespoň optimalizujete v rozumné míře a udržujete své obrázky pod kontrolou.

Za tímto účelem musíte nyní vytvořit několik různých verzí každého obrázku, který chcete na svém webu použít.

Zde je příklad, jak zacházet se skutečným zobrazovacím kódem:

Kouzlo atributu srcset je, že prohlížeč sleduje, co je v něm, a poté vybere nejlepší obrázek na základě použitého zařízení.

Další přizpůsobení, které můžete vidět výše, je atribut velikosti. Tento říká prohlížeči, jak by se měl obrázek chovat na určitých obrazovkách. V tomto scénáři bude mít obrázek při zobrazení na výřezech větších než 1100 px 1100 px, zatímco na menších zařízeních zabere celý výřez.

Tento druh řešení zajišťuje, že obraz nezabírá celou obrazovku 4K o šířce 3840px. Při zobrazení na mobilním telefonu však stále zabírá celou obrazovku.

Efektivní použití atributu velikosti je způsob, jak zajistit, aby vaše obrázky skutečně odpovídaly.

⭐ Pro trik: Vyhledejte obrázky, které jsou o 10% menší v rozměrech, než je potřeba, a poté je nechte v prohlížeči zvětšit. To vám ušetří další prostor a šířku pásma. Pokud například požadujete obrázek o rozměrech 500 × 500 px, můžete svůj obrázek upravit na 450 × 450 px a nechat jej v prohlížeči upravit jeho velikost na 500. To záleží na obrázku, ale ve většině případů na uživateli si toho nevšimne.

�� Lekce č. 4:

Použijte správné velikosti obrázku pro svůj design.

Vytvářejte body přerušení.

Vytvořte více verzí stejného obrázku tak, aby pokrývalo body přerušení.

Při zobrazování obrázků použijte atributy srcset a velikosti.

�� Optimalizujte obrázky pro sítnice a HiDPI obrazovky

Druhým koncem spektra obrazových rozměrů jsou obrázky podporující HiDPI.

Příběh je ten, že plochy se stále zvětšují a jejich pixely jsou stále hustěji zabaleny. V těchto dnech není neobvyklé mít 4K obrazovka zabalená do 15palcového notebooku. 4K rozlišení je 3840 × 2160 px, takže každý z těchto pixelů musí být opravdu malý.

To vytváří problémy pro webové stránky. V zásadě, pokud by váš web byl definován jako široký 1100 px, za normálních podmínek by zabíral pouze přibližně 25% dostupné obrazovky nemovitostí 4K obrazovky. To není optimální. Naštěstí to nefunguje.

Aby se tomuto problému zabránilo, fungují tyto obrazovky s vysokým rozlišením, jako by byly poloviční velikosti (příliš zjednodušuji, ale slyším mě ven). Takže místo toho, aby vaše webové stránky o šířce 1100 pixelů zabíraly malou část obrazovky HiDPI, bude se škálovat na dvojnásobek, přičemž zabere 2200 px a vyplní obrazovku mnohem lépe..

Tento proces umožňuje, aby se obrazovky stále ostřejší a ostřejší, aniž by v tomto procesu všechno vypadalo nepatrně.

Tato praxe však není bez jejích vad. Hlavně, vaše obrázky mají obrovský zásah. Text lze snadno zvětšit bez ztráty kvality. Písma jsou vůči měřítku imunní. Obrázky nejsou. Přímým výsledkem bude, že každý obraz, který není připraven pro obrazovky HiDPI, bude vypadat rozmazaně!

Chcete-li to vyřešit, musíte doručit zmenšené obrázky pro každý poměr zvětšení. Zde je několik jednoduchých kódů:

(Pokud prohlížeč nepodporuje srcset, použije se standardní src.)

Teď, když řeknu "zmenšené obrázky," Vlastně myslím, že byste měli začít od druhého konce. Začněte velkým obrázkem (označte jej 3x), poté jej zmenšete a zmenšete (na 2x), nakonec ho udělejte 1x a použijte jako výchozí obrázek.

�� Lekce č. 5:

Ujistěte se, že vaše loga, brandingové obrázky a všechny obrázky použité ve vašich příspěvcích a stránkách jsou připraveny pro obrazovky HiDPI.

⌛ Odložte načítání obrázku

To je v zásadě jednoduché; všechny obrázky, které jsou nad záhybem, by měly být načteny okamžitě (při načtení stránky). Všechno ostatní může být odloženo na později a dokonce "líný načten."

Líné načítání je načítání obrázků na vyžádání. To znamená, že obrázky se načtou pouze zlomek vteřiny, než je uživatel potřebuje – ne dříve, ne později. A to "ne dříve, ne později" část je zde klíčová.

V ideálním případě by měl být obrázek načten těsně před jeho posouváním do výřezu. Uživatel by tedy před zobrazením obrázku neměl vidět zástupný symbol. Pokud k tomu dojde, mohou posouvat projít kolem obrázku bez toho, aby se mu podařilo načíst včas – není to skvělý způsob, jak optimalizovat obrázky.

Jak již bylo řečeno, líné načítání je na stránkách WordPress snadné. Můžete líně načíst pomocí JavaScriptu / jQuery, a můžete dokonce napsat kód pro sebe sami, pokud chcete. Případně můžete získat plugin jako a3 Lazy Load, nebo můžete použít Optimole, který obsahuje líný zaváděcí modul.

�� Lekce č. 6:

Líné načtení obrázků, které jsou pod záhybem.

�� Doručujte obrázky prostřednictvím CDN

Síť pro doručování obsahu je jako cheatový kód pro rychlost webu. Podvádíte se, protože svůj web nezrychlujete tak, jak říkáte někomu jinému, aby převzal zátěž a doručil údaje o vašem webu návštěvníkovi za vás..

�� Hovořili jsme o hlouběji CDN, podívejte se na to.

TL; DR je to, že CDN využívají síť serverů, které všechny drží kopii vašeho webu a poté ji doručují návštěvníkovi z nejbližšího dostupného místa. To bude vždy rychlejší než poskytování z vašeho hlavního serveru.

Image CDN fungují téměř stejně, ale zaměřují se pouze na, uhodli jste to, obrázky.

Většinou je operace z vašeho pohledu bezproblémová. Všechny obrázky na vašem webu budou nahrazeny jejich hostitelskými verzemi CDN (což znamená, že se adresy URL obrázků mění).

  • Raketový batoh má přímo zabudovanou oblíbenou image CDN. Můžete ji používat zdarma, což je skvělé. Hlavním omezením je, že funguje pouze s obrázky ve vašich příspěvcích, stránkách a vašich doporučených obrázcích. Nepracuje pro žádné obrázky, které tvoří váš návrh (části motivu, rozvržení atd.). To jsou obrázky, které by mohly opravdu použít nějaké CDN-ing.
  • Optimole má zabudovanou CDN jako součást hlavní funkce optimalizace obrazu. Tento se neomezuje pouze na vaše příspěvky a stránky.

�� Lekce č. 7:

Připojte svůj web k obrazovému CDN (Jetpack nebo Optimole) nebo obecnému CDN (MaxCDN / StackPath).

�� Poskytujte uživatelům menší obrázky při pomalém připojení

Při rozhodování, jaký typ obrázku by měl uživatel vidět, záleží nejen na velikosti obrazovky. Pravděpodobně ještě důležitější je, že pokud mají pomalé připojení k internetu, opravdu nechtějí čekat 10 sekund, než se obrázek načte.

V těchto scénářích je mnohem lepší nápad snížit kvalitu obrázků výměnou za dobu načítání. Uživatelé s pomalejším připojením ocení, že mohou obrázky vidět vůbec.

Toho můžete dosáhnout pomocí API Network Information API. Zde je skvělý návod o tom, jak to všechno funguje, pokud ho chcete implementovat ručně.

Pokud si přejete, aby se s autopilotem zacházelo znovu, Optimole!

�� Lekce č. 8:

Poskytujte uživatelům menší a komprimovanější obrázky při pomalejším připojení k internetu.

�� Nástroje nástroje nástroje!

Cestou jsem zmínil řadu nástrojů, které můžete použít ke zefektivnění zobrazování obrázků na vašem webu. Zde je jejich shrnutí:

  • Optimole – umožňuje automaticky optimalizovat obrázky, komprimuje je, vybere správnou velikost obrázku pro výřez návštěvníka, podává obrázek přes CDN, líné načítání obrázků, pracuje s nižší rychlostí připojení.
  • ImageOptim a ImageAlpha – zvládnout kompresi obrazu na ploše v systému Mac. Můžeš použít TinyPNG na Win. Udělejte to před nahráním obrázků na svůj web.
  • XnConvert – umožňuje převádět obrázky na WebP.
  • a3 Lazy Load plugin – líný načte všechny obrázky.
  • Raketový batoh plugin – přichází s bezplatným obrázkem CDN.
  • MaxCDN / StackPath – obecné CDN, které se postará o celý váš web, nejen o obrázky.

nástroje pro optimalizaci obrázků

�� Další čtení:

  • Imagify vs WP Smush vs ShortPixel vs Optimole: Který je nejlepší pro optimalizaci obrázků WordPress? Srovnání hlava-hlava
  • Obrázky zdarma pro blogy – jak je získat & efektivně je používat (varování! neviditelné rady, data-backed)
  • 11 způsobů, jak urychlit výkon WordPress
  • Optimalizace rychlosti webových stránek: jak na to v roce 2019
  • Nejrychlejší hosting WordPress – průvodce pro začátečníky, jak jej najít

��‍♂️ TL; DR:

Zde je přehled všech výše uvedených lekcí:

Lekce 1:

Ne vždy jděte na JPG. Předpovídejte, jak velký bude obraz na základě jeho obsahu, a poté použijte správný typ obrázku.

Lekce č. 2:

Pokud se chcete rychle optimalizovat obrázky, neobtěžujte se SVG. Čas, kdy je zbytečně vytvoříte, se nevyplatí (přesto neváhejte). Používání PNG bude mnohem rychlejší a pokud jde o spotřebu místa na disku, nebude o nic horší.

WebP použijte, když pracujete s obrázky, které se objevují na více stránkách, nebo obrázky, které jsou dostatečně velké. To je, pokud nemůžete zpracovat zpracování WebP automaticky, což lze provést pomocí některých dalších nástrojů. V takovém případě použijte WebP všude. O tom si promluvíme za sekundu.

Lekce č. 3:

Komprimujte své JPG tak, aby dosáhly přijatelné úrovně kvality vs místa na disku.

Komprimujte své PNG vždy.

Lekce č. 4:

Použijte správné velikosti obrázku pro svůj design.

Vytvářejte body přerušení.

Vytvořte více verzí stejného obrázku tak, aby pokrývalo body přerušení.

Při zobrazování obrázků použijte atributy srcset a velikosti.

Lekce č. 5:

Ujistěte se, že vaše loga, brandingové obrázky a všechny obrázky použité ve vašich příspěvcích a stránkách jsou připraveny pro obrazovky HiDPI.

Lekce č. 6:

Líné načtení obrázků, které jsou pod záhybem.

Lekce č. 7:

Připojte svůj web k obrazovému CDN (Jetpack nebo Optimole) nebo obecnému CDN (MaxCDN / StackPath).

Lekce č. 8:

Poskytujte uživatelům menší a komprimovanější obrázky při pomalejším připojení k internetu.

Dejte mi vědět, co si myslíte o celé výzvě k co největší optimalizaci obrázků pro web. Co také děláte se svými obrázky, aby se načítaly rychleji? Podělte se o komentáře.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení, prezentace a úpravy Karol K.

* Tento příspěvek obsahuje přidružené odkazy, což znamená, že pokud kliknete na jeden z odkazů na produkt a poté produkt zakoupíte, dostaneme malý poplatek. Bez obav však budete stále platit standardní částku, takže z vaší strany nevzniknou žádné náklady.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map