A képek optimalizálása a WordPresshez, teljes útmutató

A képek optimalizálása a WordPresshez, teljes útmutató

Az internetes embereknek nincs sok idejük az adatok fogyasztására – mert ilyen sok az utóbbi. Olyan sok adat van, hogy egyszerűen nincs időnk az egészet elolvasni! A modern web tartalmi kurátoraként az Ön feladata az átviteli sebesség maximalizálása. Minél többet kevesebb szóval fejez ki, annál jobb a munkája.


Miért fontosak a képek (nagyon nagyon)??

Számos oka van annak, hogy miért használná (és kellene) képeket a bejegyzésében és cikkében:

  • A képek vizuális ingerekként szolgálnak a cselekvésre ösztönzéshez (CTA). A CTA bármilyen feladat lehet, amelyet a látogató elvégz. A gyakori CTA-k között szerepel hírlevelének feliratkozása, a cikk megosztása a közösségi médián keresztül vagy a termék vásárlása.
  • A képek javítják azt a kapcsolatot, amelyet az író megkísérel létrehozni az olvasóval.
  • A képek tovább adnak kevesebbel.

Ezért alapvető fontosságú, hogy bemutatóinkban megfelelő képeket használjunk (blogbejegyzés, informális jelentés, aktuális PowerPoint bemutató stb.) Annak érdekében, hogy nyomot hagyjunk az olvasó elméjében!

De várj! Van egy probléma!

A képek a modern webhelyek által használt sávszélesség kb. 63% -át teszik ki, ezért egyre fontosabb, hogy megfelelően optimalizálják őket a sebesség érdekében.

Az oldal betöltési idejének egy másodperces késése 7% -kal csökkentheti az átváltási arányokat

Megállapítottuk, hogy az embereknek rövid figyelmeztetési képességük van (a modern tartalom-előállítási arány egyik hátránya). Még akkor is, ha a megfelelő képeket használja, ha azok nem töltődnek be az elfogadható időn belül, akkor az érdeklődés elveszik.

10 leggyakoribb képoptimalizálási hiba

A webhelyek nagy részén probléma van – kiváló képeket használnak, de a kép kiszolgálásának módja rossz. A nagy méret, a rossz optimalizálás, a helytelen formátum, a szükségtelenül nagy méretek (méretek), a nem reagáló képek és a gondatlan SEO hibák – a modern web szembesül leggyakoribb problémái. A mai cikkben ezeket a kérdéseket tárgyaljuk!

1. Nagy méretek

Az „extra krumpli” nem mindig jó

Ez egy klasszikus. Tegyük fel, hogy 150 × 150 képpontos fényképre van szüksége a webhely „Csapat” oldalán. Általában 5MP fejlövést használ, kicsit szerkeszti és végül feltölti.

Megfigyelte a problémát? Néhány ember közvetlenül feltölti a tényleges 5MP-képet! A WordPress téma betölti a teljes 5MP képet (azaz 5×10 ^ 6 pixel), és kéri a böngészőt, hogy csökkentse azt a kívánt 150x150px méretre. Lényegében a böngésző az eredeti képnek csupán 0,0045% -át jeleníti meg!

A végén elveszíti mind a látogatói, mind a látogatók sávszélességét (még akkor is, ha a képet egy tartalomszolgáltatási hálózaton keresztül szolgáltatja, mint például a Stackpath CDN), így több merevlemez-helyet fogyaszt, és növeli a betöltési időt. A szolgáltatások egyike sem olyan, amit a webhelyén szeretne.

Mindig átméretezze (és átméretezés alatt azt értem, hogy kicsinyítem) képet a kívánt méretekre, majd töltse fel!

ImageResize.org

Ehhez nincs szükséged divatos szoftverre – vannak olyan ingyenes online eszközök, mint például ImageResize.org felhasználhatja a képek gyors átméretezésére és optimalizálására. Csak töltse fel és módosítsa a fotóbeállításokat. Ha elkészült, töltse le az optimalizált képet a webhelyén való felhasználáshoz. Ők is kínálnak gyors Képkompresszor ha csak csökkenteni szeretné a fájl méretét.

Hasznos eszközök:

  • IrfanView kiváló ingyenes alkalmazás a képek kötegelt átméretezésére olyan fejlett lehetőségekkel, mint az optimalizálás, a vízjel és a szegélyek.
  • ImageMagicknek egy fejlett nyílt forrású eszköz, amely különféle programozási nyelveken és operációs rendszerekön használható. Írhat saját alkalmazást, vagy egyszerűen felhasználhatja a parancssorba.
  • ImageOptim (Mac) lehetővé teszi a teljes mappák húzását és a több kép gyors optimalizálását.
  • TinyPNG egy online képtömörítő eszköz API-val.

2. Helytelen képformátum

shutterstock_108312266

A képhez használt formátum döntő szerepet játszik. Általános szabály, hogy használja PNG vektorgrafikákhoz és számítógéppel generált képekhez, például clip arthoz stb JPEG sokféle színű fényképhez vagy képhez. Részletes magyarázatért olvassa el ezt félelmetes StackOverflow válasz.

3. Nem használ progresszív JPEG fájlokat

Alapérték (normál) JPG és progresszív JPG

Alapérték (normál) JPG és progresszív JPG

A hétköznapi ember számára a JPEG-k kétféleek: alapvonal és progresszív. Vizuálisan mindkettő azonos. A különbség abban rejlik, hogy miként töltik fel őket:

  • Az alapvonal JPEG-nek csak egy rétege van – amely tartalmazza a teljes képet. Kérésre a teljes képet egyszerre tölti be.
  • A progresszív JPEG-ek többrétegű képet alkotnak. A progresszív JPEG-képet rétegenként tölti be, amely fokozatosan növekszik a minőségben, végül veszteségmentes képet biztosítva.
Az IrfanView támogatja a kötegelt konverziót a progresszív JPEG formátumban

Az IrfanView támogatja a kötegelt konverziót a progresszív JPEG formátumban

Az összes nagyobb képminősítő lehetővé teszi a képek progresszív JPEG formátumban történő mentését.

4. Nem használja a lusta terhelést

Lazy-Loading kiváló erőforrás-megtakarítás technika, ahol a képet csak akkor töltik be, amikor a látogató lefelé görgeti a képet a képkeretbe. Vegyünk egy cikket – „2014-ben a 15 legüzemanyag-takarékosabb autó”. Természetesen ez a cikk legalább 15 képet tartalmaz. És nem számít a megjelenítő eszköz – monitor, táblagép vagy okostelefon – magasságától, mind a 15 képet nem illesztheti be a képkeretbe. Az összes kép megtekintéséhez görgessen lefelé.

Ha a Lazy Loading engedélyezve van, a képeket csak akkor töltik be, ha egy látogató a kép közelében van. Más szavakkal, a képek csak akkor kezdnek betöltődni, amikor lefelé görgetik a megtekintéshez. Az első néhány kép azonban azonnal betöltődik, mivel Ön már a nézetben van. A Lazy Loading megtakarítja a sávszélességet mindkét végén, és javítja a betöltési időt! A Lazy Loading a WordPress programban használható a BJ Lazy Load plugin.

5. Nem használ CDN-t

CDN-hálózat

A Tartalomszolgáltatási Hálózat (CDN) használatával a képet kiszolgálótól kell kiszolgálni, amely fizikailag legközelebb van a látogató helyéhez. Ha egy indiai látogató kért képet, és a CDN rendelkezik POP-vel (a jelenléti pont, vagy egyszerűen egy szerver) Tokióban és New York-ban, a képet a Tokióban található kiszolgálón kell kiszolgálni..

Ha jelentős forgalom van, akkor be kell állítania a CDN-t a WordPress használatával, hogy csökkentse a betöltési időt és javítsa az általános teljesítményt. Itt, a WPExplorernél, ajánljuk CloudFlare. Újszülött webhelyekhez javasoljuk az ingyenes CDN-szolgáltatások listáját, amelyeket kipróbálhat.

6. Nem deklaráljuk az „alt” attribútumot

Az „alt” attribútum leírja a keresőmotor képét. A mezőbe beírt szöveg akkor jelenik meg a felhasználó számára, ha a képet nem lehet betölteni. Sokan hajlamosak ezeket a mezőket üresen hagyni. Ez nagyon káros a SEO számára, és ezzel elveszíti a forgalmat. Mindig meg kell próbálnia beépíteni a webhely kulcsszavait a képei alt tagjába.

7. Nem optimalizálja a képeket

ceruza ceruzák-pontok

Az optimalizált képek 40% -kal könnyebbek, mint a normál képek. Ez javítja a betöltési időt és csökkenti a sávszélességet. Freddy legjobb WordPress Image Optimization plugins listájából javasoljuk WPSmush.it a képek optimalizálása érdekében. Kraken.io kiváló online lehetőség a képek tömörítésére is. Mindig itt használjuk a WPExplorer programot, hogy optimalizáljuk a kiemelt képeket, mielőtt feltöltjük őket üzenetekre és témákba.

8. Érzékeny képek

Itt található az adaptív webdesign

Itt található az adaptív webdesign

Még ha webhelye reagáló is, ez nem azt jelenti, hogy képei vannak. Ez azt jelenti, hogy a fejléc-képet, amelyet egy 22 ”-es asztali képernyőhöz használ, az 5” -es iPhone készülékhez is megjelenik. Kép feltöltésekor a WordPress több verzióra méretezi át – Miniatűr, Közepes, Teljes méret stb. – Ezt a fejlesztő módosíthatja. Egy jól kódolt téma a kép „közepes” méretű változatát szolgálja, ezzel csökkentve a sávszélességet.

Az Picturefill.WP A plugin helyettesíti a képcímkéket egy újval elem, amely különféle képeket szolgáltatna a médialekérdezések alapján. Ez meglehetősen kísérleti jellegű (vagyis hibák vannak), ezért nem szabad élő oldalon használni.

9. Képfeliratok

A képaláírások nem mindig szükségesek, bár bizonyos esetekben erre szükség van – például képernyőképeket egy oktatóanyagban. A képaláírás segít az olvasóknak a téma jobb megértésében, miközben javítja a SEO-t.

10. Képfájlnév

Gondoljon a fájlnévre egy keresőmotor szempontjából. Használd ugyanazt a szöveget, mint amit a kép „címe” címkéjén használnál. Ezenkívül próbálja meg beilleszteni a webhelyéhez leginkább releváns kulcsszavakat.

Következtetés

hős-11

Az Image SEO kritikus jelentőséggel bír minden weboldalon – akár régi, akár új. Emberek, akik végrehajtják a kép SEO-t megfelelően (időnként meglehetősen hétköznapi lehet), jelentős mennyiségű organikus forgalmat (a legjobb típusú forgalmat) szerezhet a Hosszú távon.

Van egy fantasztikus optimalizálási technika? Ellövöldöz!

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