A WordPress Image Management végső útmutatója

  1. 1. Jelenleg olvas: A WordPress Image Management végső útmutatója
  2. 2. 3 Kevésbé ismert képkezelési tipp a WordPress programban
  3. 3. WordPress Image SEO hibák és azok kiküszöbölése

A vizuális hatás az egyik legfontosabb jellemző, amikor egy hatásos tartalom marketingtervet készítünk. Üdvözöljük a vadonatúj új sorozatban – A WordPress Image Management végső útmutatója.


Úgy tervezték, hogy biztosítsa az Ön képkészletének kezeléséhez szükséges eszközöket a WordPress programban – közvetlenül a műszaki optimalizálás, a SEO, a CDN integráció és a könyvtárkezelés kezdetén. Ebben a többrészes útmutatóban csak azokat a módszereket, oktatóanyagokat, beépülő modulokat és témákat ajánljuk, amelyeket kipróbáltunk, vagy amelyeket az iparági szakértők ajánlnak.

Kerüljük azt is, hogy vakon javasoljuk a WordPress-tárházban magas szintű használatú bővítményeket. Inkább azokat ajánljuk, amelyek tökéletes akkordot találnak az értékjavaslat és a teljesítmény optimalizálása között.

Kíváncsi lehet, hogy mi csináljuk ezt. Előfordulhat, hogy a ThemeForest összesen 2400+ letöltése a Total – Responsive Multipurpose WordPress témából.

Nos, az iparágvezető WordPress-üzemeltető társaságok (például a WPEngine és a Pagely) és megtanulta mit ők megtanulta, amikor milliárd oldalmegtekintést szolgált magas rangú ügyfelek ezrei között. Az összes ezt az információt apró bekezdésekké és pontokba tömörítettük az online siker érdekében. Most kezdjük el, kezdjük meg?

Műszaki és teljesítmény-optimalizálási tippek a WordPress-képekhez

A WordPress-ben jó néhány képoptimalizálási lehetőség áll rendelkezésre nem felesleges terhelést tesz a webszerverre. Néhány leggyakoribb képoptimalizálási tippet fogunk megnézni kellene kövesse, valamint néhány más, különös alkalmakkor hasznos jövedelmet.

JPG vagy PNG? A helyes képformátum használata

A képoptimalizálás legelső lépése jó indulás. Azt mondják, hogy a jól kezdett munka félig befejeződött. Pontosan ez a helyzet a WordPress képoptimalizálásakor. Az egész a megfelelő képformátum kiválasztásával kezdődik. A JPG és a PNG a két leggyakoribb képformátum, amelyet online használnak a tartalommarketingben.

A trükk az, hogy megértsük, mely formátumot válasszuk az egyes képtípusokhoz. Ha rosszul választja, a képméret monumentálisan növekszik. Itt vannak a szabályok.

Mikor kell használni a PNG formátumot?

Lapos képek – például vektorok, illusztrációk, betűtípusok, logók, szalagok, formák, szalagcímkék stb. – készítéséhez használjon PNG-t bármihez, amelyet vektor formátumban hoz létre, például EPS vagy Adobe Illustrator (.AI) formátumban. Végül optimalizált képet kap, szinte nulla minőségvesztéssel. Ha ebben az esetben JPG-t használ, akkor nem tesz kompromisszumot a mérettel, de előfordulhat, hogy a minősége elfogy. Valójában magasabb felbontás esetén a PNG könnyebb lenne, minőségromlás nélkül. A JPG szenvedni fog.

Vegyük példáját. Létrehozunk egy 5000 képpontos lapos képet, amelyet JPG és PNG formátumban mentünk.

A teszthez használt mintakép

Lapos kép
JPG233KB
PNG42KB

Dióhéjban a JPG kép 455% -kal magasabb volt, mint az azonos felbontás PNG képe.

Mikor kell használni a JPG formátumot?

Minden máshoz használjon JPG-t. A lapos vagy a vektorkép kivételével használjon JPG-t. Fotók emberekről, helyekről, dolgokról stb. – használja a JPG-t. A kategóriába tartozó szinte az összes stock fotó JPG formátumot használ. Ha PNG-t használsz egy JPG helyett, akkor beleütközhetsz néhányba komoly teljesítményproblémák.

Különösen óvatosnak kell lennie ebben az esetben. Ha JPG-t használ egy PNG helyett, akkor kevés vagy semmiféle károkat nem okozna. Ha azonban JPG esetén véres PNG-t használ, akkor sok helyet teremthet a károsodásokhoz. Vessen egy pillantást erre a példára.

Beállít: Letöltöttem ezt a képet a Shutterstock-ból, amely körülbelül súlyt ad 10.3MB határozattal 6149 × 4562 – lényegében egy 28MP stock fotó. Hacsak nem készítünk valamilyen nyomtatott kiadványt, nem használjuk a blog teljes felbontását. Tegyük fel, hogy rögzített maximális képmérettel rendelkezik a 1600px.

Kísérlet: A forrásképet átméretezzük 1600px-re, és létrehozzuk négy változat – kettő PNG formátumhoz és kettő JPG formátumhoz. Minden formátumhoz (JPG / PNG) az (a) ajánljuk a tömörítési beállításokat és a (b) a maximális tömörítési beállításokat.

Mintakép a JEPG kísérlethez

Eredmények: Íme az eredmények egy szép táblázatban, amelyet követni lehet:

Eredeti kép (KB)

10870
Célfelbontás1600px
FormátumBeállításokMéret (KB)% Csökkentés
JPGProgresszív, Minőség = 8523198%
Nem progresszív, minőség = 8523998%
PNGTömörítés = 0557549%
Tömörítés = 6185283%
Tömörítés = 9175084%

Első pillantásra gondolhatnánk, hogy a PNG tömörítése 84% -os elég jó szemben a JPG-ben elért 98% -kal. Ez nem teljesen igaz. Ha közelebbről megvizsgálja a képméreteket, láthatja, hogy a PNG kicsit több, mint 1,7 MB, míg a JPG 0,22 MB. Ami azt jelenti, hogy A PNG nyolcszor nehezebb, mint a JPG ugyanazon kép verziója, azonos felbontással. Más szavakkal, ugyanazon kép és felbontás esetén a JPG verziója 700% -kal könnyebb, mint a PNG!

Ugyanazon kép és felbontás esetén a JPG verzió 700% -kal könnyebb, mint a PNG!

A hüvelykujj szabályaként a PNG-t lapos képekhez és a JPG-t használja minden máshoz.

Ellenőrzőlista stock fotók feltöltéséhez a Blogokból

Rengeteg olyan blog van, ahol a szerkesztők közvetlenül feltöltik a kép teljes felbontású változatát blogbejegyzésükbe. Itt található néhány útmutatás az stock fotók blogokba történő feltöltéséhez. Az IrfanView nevű ingyenes szoftvert használom, amely nagyon sok fantasztikus funkcióval rendelkezik. Mindegyiket illusztrálom önnek.

1. Állítsa át a kép méretét

Először is el kell döntenie a WordPress webhelyen lévő összes kép maximális felbontásáról. Az e méret feletti bármely kép átméreteződik, kivéve, ha természetesen kisebb.

IrfanView van egy Kötegelt konverzió funkció (az alkalmazás elindítása után nyomja meg a B gombot), amely a funkciók listáját egy csomó képhez alkalmazhatja egyszerre. Céljaink közé a funkciók kiterjednek az átméretezés, a kivágás, a vízjel hozzáadása stb.

2. Távolítsa el az EXIF ​​adatokat

A normál fényképezőgépre kattintott fotók sok beágyazva vannak metaadatok – ami nem más, mint apró (de hasznos) információs bit a képről. Ilyen információ például a hely GPS koordinátái, amikor a képre kattintottak, az ISO beállítások, a kamera modellje stb.

Az iPhone-on kattintott véletlenszerű fénykép EXIF ​​információja

Hacsak nem fényképezünk blogot, általában nem akarunk ilyen információt a blogbejegyzés képében. Amikor az IrfanView alkalmazásban menti vagy kötegelt konvertálja a képeket, az EXIF-adatok általában törlődnek. Ez elősegíti a magánélet védelmét – különösen a fizikai helyét. A legtöbb fénykép méretbeli különbsége képekenként körülbelül 200-300 KB.

3. Mentés progresszív JPG formátumban

Az IrfanView alapértelmezés szerint progresszívként mentette a JEPG-ket

A progresszív JPG-kép rétegenként tölti be a képet – ezáltal felgyorsítja a betöltési időt. Megkezdődtek a tartalomszolgáltatási hálózatok, például a KeyCDN automatikus konvertálás JPG-k a progresszív JPG-khez a képátadás felgyorsítása és a tárolás optimalizálása érdekében.

4. Állítsa a DPI-t 72-re

A DPI vagy a pontok per hüvelyk a kép minőségét mutatják. A nyomtatáshoz magas DPI-értéket kell használni. Az interneten a 72-es érték tökéletes.

Oké, tehát a fentiek összefoglalásával az alábbiakban bemutatom a beállításomat. Ezt a funkciót akkor futom, amikor összeállítottam az összes képet blogbejegyzésemhez – mielőtt feltöltem a képeket a WordPressbe.

Kötegelt konverziós beállítások az IrfanView-ban egy tipikus WordPress bloghoz

5. Optimalizálja a képeit

Nem számít, hogy JPG-t vagy PNG-t használt -, optimalizálnia kell a képet. Számos komoly fantasztikus online eszköz létezik, amelyek segítik a képek optimalizálását és a mentését sok a tér.

Olyan szolgáltatásokról beszélek, mint például TinyPNG vagy TinyJPG, amely egyszerűen optimalizálja PNG / JPG képeit néhány fejlett algoritmussal.

Optimalizált képek a TinyPNG-ben

Őszintén szólva, nem tudom, hogyan működnek az algoritmusok, de működnek, és mindig is sikerült 50-70% -os csökkentést kapnom, függetlenül attól, hogy mennyire tudom megmenteni őket..

Ön is megvásárolhatja a pro verzió a szolgáltatás egy Photoshop pluginként 50 USD-ért. Mind a Windows, mind a Mac verzió elérhető. Célomra az online verzió (a Mentés a Dropbox-ba szolgáltatás) működik a legjobban.

Képoptimalizáló beépülő modulok a WordPress programban

Eddig megtanultuk az elérés lépéseit indult jobb. Mi lenne, ha most megbotlik ezen a bejegyzéssel, és már 100-as kép van feltöltve? Nos, itt van néhány plugin, amely segít ebben:

EWWW Cloud Image Optimizer

Ez a bővítmény az eredeti és vadul népszerű villája EWWW Image Optimizer csatlakoztat. A több mint 500 000 letöltést meghaladó képoptimalizáló bővítmények lehetővé teszik a képek optimalizálását, amint azokat a WordPress-hez feltöltik..

A versenytársaktól megkülönbözteti az a képessége, hogy az adatbázisban meglévő képeket optimalizálja, ami hatalmas teljesítménycsökkenést eredményez. Ez jelentős sávszélesség-költségeket is megtakarít, mivel a forgalom nagy része régi cikkekből származik. Opcionálisan engedélyezheti a veszteséges képek tömörítését (amely szabad szemmel alig látható), de sok helyet és sávszélességet takaríthat meg. Az optimalizálási technológia szempontjából felhasználhatja a TinyPNG vagy a TinyJPG API-t az új és a meglévő képek optimalizálására..

De itt van a probléma. Sok gazdagép (ideértve a WPEngine-t is) nem engedélyezi az EWWW Image Optimization bővítményt, mivel ez sok további terhelést jelent a szerverre. Ha valamilyen módon sikerül megkerülni a szerver korlátozásait, akkor kockáztathatja, hogy fiókját az irányelv megsértése miatt felfüggesztik.

Itt van a EWWW Cloud Optimizer plugin játszik. Tölti le a képeknek a felhőbe történő optimalizálásához szükséges összes számítást, és egyszerűen helyettesíti a nem optimalizált képeket az optimalizáltokkal. Mivel a tömörítéshez gyakorlatilag nulla CPU-teljesítmény szükséges, nem jelent további terhelést a leválasztó. Ez érvényes a WordPress webhely minden új és meglévő képkonverziójára.

Tervek és árképzés: Mint várható lenne, a bővítmény nem ingyenes, mivel a fejlesztőnek meg kell fizetnie a felhőalapú számlázást. Azonban a árazás rendkívül ésszerűen fizet 9 USD-t 3000 képoptimalizálásért egy előre fizetett előfizetéshez.

Az EWWW Cloud Optimizer bővítményt gyönyörűen tervezték meg. A médiaszkenner megmondja, hány képet kell optimalizálnia a vásárlás előtt. A szerver képei alapján megvásárolhat egy releváns előre fizetett tervet.

TinyPNG WordPress bővítmény

Ez egy újabb nagyszerű képoptimalizáló plugin, amely közvetlenül integrálódik a TinyPNG / JPG szolgáltatáshoz. Automatikusan új és meglévő képeket tölt fel a WordPress médiakönyvtárba. Ez a bővítmény egy ingyenes terv, 100 havi optimalizálást kínál.

Freddy egy ideje összeállította a képoptimalizáló pluginek listáját – olvassa el, ha többet szeretne tudni a témáról.

Következtetés

Ez a sorozat első hozzászólásának végéhez vezet. A következő cikkben tanulmányozza meg néhány kevésbé ismert képoptimalizálási tippet és trükköt, például a forró hivatkozás megakadályozását, a képek távoli szerverekről történő letöltését és hasonlókat. Van néhány tipp a az indulás megfelelő kategória? Tudassa velünk az alábbi megjegyzésekben.

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