Ako optimalizovať obrázky pre WordPress, Kompletný sprievodca

Ako optimalizovať obrázky pre WordPress, Kompletný sprievodca

Ľudia na webe nemajú dostatok času na spotrebu údajov – pretože je ich toľko. Existuje toľko údajov, že jednoducho nemáme čas ich všetky prečítať! Ako kurátor obsahu pre moderný web je vašou úlohou maximalizovať priepustnosť. Čím viac vyjadrujete slovami, tým lepšie ste vo svojej práci.


Prečo sú obrázky (také veľmi) dôležité?

Existuje veľa dôvodov, prečo by ste (a mali) používať obrázky vo svojich príspevkoch a článkoch:

  • Obrázky slúžia ako vizuálne podnety pre výzvu na akciu (CTA). CTA môže byť akákoľvek úloha, ktorú má váš návštevník vykonať. Medzi bežné CTA patrí prihlásenie sa na odber bulletinu, zdieľanie článku na sociálnych sieťach alebo nákup produktu.
  • Obrázky zvyšujú spojenie, ktoré sa autor pokúša nadviazať so čitateľom.
  • Obrázky sprostredkujú viac menej.

Preto je veľmi dôležité, aby sme v našich prezentáciách používali správne obrázky (blogový príspevok, neformálnu správu, aktuálnu prezentáciu programu PowerPoint atď.), Aby sme v mysli čitateľa nechali značku.!

Ale počkaj! Vyskytol sa problém!

Obrázky zaberajú približne 63% šírky pásma používaného modernými webovými stránkami, takže je stále dôležitejšie, aby boli správne optimalizované pre rýchlosť.

Jednosekundové oneskorenie v načítaní stránky by mohlo znížiť mieru konverzie o 7%

Zistili sme, že ľudia majú krátke rozpätie pozornosti (jedna z nevýhod modernej produkcie obsahu). Aj keď použijete správne obrázky, ak sa nenačítajú v prijateľnom časovom rámci, záujem sa stratí.

10 najčastejších chýb optimalizácie obrazu

Väčšina webových stránok má problém – používajú vynikajúce obrázky, ale spôsob, akým sa obrázok zobrazuje návštevníkovi, je zlý. Veľké rozmery, zlá optimalizácia, nesprávny formát, zbytočne veľké rozmery (veľkosti), nereagujúce obrázky a neopatrné chyby SEO sú niektoré z najbežnejších problémov, ktorým čelia moderné webové stránky. V dnešnom článku sa budeme venovať týmto problémom!

1. Veľké rozmery

„Extra hranolky“ nie sú vždy dobré

Toto je klasika. Predpokladajme, že na stránke „Team“ vášho webu potrebujete fotografiu s rozmermi 150 × 150 pixlov. Obvykle použijete headshot 5MP, trošku ho upravíte a nakoniec ho odovzdáte.

Zistili ste problém? Niektorí ľudia priamo odovzdávajú skutočný obrázok 5MP! Téma WordPress načíta celý obrázok 5MP (tj 5 x 10 ^ 6 pixelov) a požiada prehliadač, aby ho zmenšil na požadovanú veľkosť 150 x 150 pixlov. Prehliadač v podstate zobrazuje iba 0,0045% pôvodného obrázka!

Konečne strácate šírku pásma vášho aj návštevníka (aj keď zobrazujete obrázok prostredníctvom siete na doručovanie obsahu, ako je napríklad Stackpath CDN), zaberáte viac miesta na pevnom disku a predlžuje sa doba načítania. Žiadna z funkcií nie je niečo, čo by ste na svojom webe chceli.

Vždy upravte veľkosť obrázka (a tým myslím zmenšenie veľkosti obrázka) na požadované rozmery a potom ho odovzdajte!

ImageResize.org

Na to nepotrebujete vynikajúci softvér – existujú bezplatné nástroje online ImageResize.org môžete použiť na rýchlu zmenu veľkosti a optimalizáciu svojich obrázkov. Stačí odovzdať a vylepšiť nastavenia fotografií. Po dokončení stiahnite optimalizovaný obrázok, ktorý chcete použiť na svojich stránkach. Ponúkajú tiež rýchle Image Compressor ak chcete iba znížiť veľkosť súboru.

Užitočné nástroje:

  • IrfanView je vynikajúci freeware na dávkovú zmenu veľkosti obrázkov pomocou pokročilých možností, ako je optimalizácia, vodoznak a hranice.
  • ImageMagick je pokročilý nástroj s otvoreným zdrojovým kódom, ktorý možno použiť v rôznych programovacích jazykoch a operačných systémoch. Môžete napísať svoju vlastnú aplikáciu alebo ju jednoducho použiť pomocou príkazového riadku.
  • ImageOptim (Mac) vám umožňuje presúvať celé priečinky a rýchlo optimalizovať viac obrázkov.
  • TinyPNG je online nástroj na kompresiu obrázkov s rozhraním API.

2. Nesprávny formát obrazu

shutterstock_108312266

Formát použitý pre obrázok zohráva dôležitú úlohu. Ako všeobecné pravidlo použite PNG pre vektorovú grafiku a počítačom generované obrázky, napríklad kliparty atď JPEG pre fotografie alebo obrázky s rôznymi farbami. Podrobné vysvetlenie nájdete v tomto dokumente úžasná odpoveď StackOverflow.

3. Nepoužívame progresívne JPEG

Základná (normálna) JPG verzus progresívna JPG

Základná (normálna) JPG verzus progresívna JPG

Pre obyčajného človeka sú JPEG dva typy – základná a progresívna. Z vizuálneho hľadiska sú obe rovnaké. Rozdiel spočíva v spôsobe ich načítania:

  • Základná JPEG má iba jednu vrstvu – obsahujúcu celý obrázok. Na požiadanie sa celý obrázok načíta naraz.
  • Progresívne súbory JPEG komponujú obrázok s viacerými vrstvami. Progresívny obrázok vo formáte JPEG sa načítava vrstva po vrstve, ktorá sa postupne zvyšuje v kvalite a nakoniec vám poskytuje bezstratový pohľad.
IrfanView podporuje dávkovú konverziu s progresívnym JPEG

IrfanView podporuje dávkovú konverziu s progresívnym JPEG

Všetky hlavné Image Resizer vám umožňujú ukladať obrázky ako progresívne JPEG.

4. Nepoužívame Lazy Load

Lazy-Loading je vynikajúci úspora zdrojov technika, pri ktorej sa obrázok načíta iba vtedy, keď návštevník prejde nadol do zobrazovacieho rámca obrázka. Zoberme si článok – „15 z najúčinnejších automobilov v roku 2014“. Tento článok bude samozrejme obsahovať najmenej 15 obrázkov. A bez ohľadu na výšku zobrazovacieho zariadenia – monitora, tabletu alebo smartfónu, nemôžete umiestniť všetkých 15 obrázkov do rámu snímky. Ak chcete zobraziť všetky obrázky, musíte prejsť nadol.

Ak je povolená funkcia Lazy Loading, obrázky sa načítajú iba vtedy, keď sa návštevník nachádza v blízkosti obrázka. Inými slovami, obrázky sa začnú načítavať, keď ich posuniete nadol a zobrazíte. Prvých niekoľko obrázkov sa však načíta okamžite, pretože ste už v zobrazovacom rámčeku. Lazy Loading šetrí šírku pásma na oboch koncoch a zlepšuje čas načítania! Môžete použiť Lazy Loading v WordPress s BJ Lazy Load Plugin.

5. Nepoužívate CDN

CDN-network

Pri použití siete na doručovanie obsahu (CDN) sa obrázok zobrazí zo servera, ktorý je fyzicky najbližšie k miestu návštevníka. Ak návštevník z Indie požiada o obrázok a CDN má POP (miesto prítomnosti alebo jednoducho server) v Tokiu a New Yorku, obrázok sa doručí zo servera umiestneného v Tokiu..

Ak máte značnú premávku, mali by ste nastaviť CDN pomocou WordPress, aby ste skrátili čas načítania a získali celkový výkon. Tu vo WPExplorer odporúčame CloudFlare. Pre novo narodené weby odporúčame zoznam bezplatných služieb CDN, ktoré by ste mohli vyskúšať.

6. Nepotvrdenie atribútu „alt“

Atribút „alt“ popisuje obrázok vyhľadávacieho nástroja. Text, ktorý zadáte do tohto poľa, sa používateľovi zobrazí v prípade, že sa obrázok nedá načítať. Mnoho ľudí má tendenciu tieto polia nechať prázdne. To je veľmi škodlivé pre SEO a stratíte na prevádzke. Vždy by ste sa mali snažiť zahrnúť kľúčové slová svojich stránok do alt značky pre obrázky.

7. Neoptimalizácia obrázkov

ceruzkou pastelky body

Optimalizované obrázky sú o 40% ľahšie ako bežné obrázky. To zlepšuje čas načítania a šetrí šírku pásma. Z Freddyho zoznamu najlepších doplnkov na optimalizáciu obrázkov WordPress odporúčame WPSmush.it na optimalizáciu obrázkov. Kraken.io je tiež vynikajúcou možnosťou online na kompresiu obrázkov za okamih. Používame ich tu na WPExplorer na optimalizáciu odporúčaných obrázkov pred ich odovzdaním na príspevky a ukážky motívov.

8. Responzívne obrázky

Responzívny webdizajn je tu

Responzívny webdizajn je tu

Aj keď vaše stránky reagujú, neznamená to, že vaše obrázky sú. To znamená, že obrázok hlavičky, ktorý používate pre 22 ”obrazovku na ploche, sa tiež zobrazí pre 5” iPhone. Keď odovzdáte obrázok, WordPress zmení jeho veľkosť na viacero verzií – miniatúry, stredné, plné veľkosti atď. Vývojár to môže zmeniť. Dobre kódovaná téma bude slúžiť pre „strednú“ verziu obrázka, čím sa ušetrí šírka pásma.

Picturefill.WP doplnok nahradí značky obrázkov novými prvok, ktorý by slúžil rôznym obrázkom na základe mediálnych dopytov. Je to dosť experimentálne (to znamená, že existujú chyby) a nemali by sa používať na živých stránkach.

9. Názvy obrázkov

Titulky nie sú vždy potrebné, aj keď v niektorých prípadoch je to potrebné – napríklad snímky obrazovky v návode. Obrázky s titulkami pomáhajú čitateľom lepšie porozumieť téme a zároveň vylepšujú vaše SEO.

10. Názov súboru obrázka

Premýšľajte o názve súboru z pohľadu vyhľadávacieho nástroja. Použite rovnaký text ako v značke „title“ obrázka. Skúste tiež zahrnúť kľúčové slová, ktoré sú pre váš web najrelevantnejšie.

záver

hero-11

Image SEO je kriticky dôležitý pre všetky webové stránky – staré alebo nové. Ľudia, ktorí implementujú obrázkové SEO správne (niekedy to môže byť dosť všedné), je možné získať značné množstvo organickej dopravy (najlepší druh prepravy) v dlhý beh.

Máte úžasnú optimalizačnú techniku? Oheň preč!

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