Äärimmäinen opas WordPress-kuvanhallintaan

  1. 1. Luettu tällä hetkellä: Äärimmäinen opas WordPress-kuvanhallintaan
  2. 2. 3 vähemmän tunnettuja kuvanhallintavinkkejä WordPressissä
  3. 3. WordPress Image SEO -virheet ja niiden korjaaminen

Visuaalinen vaikutus on yksi tärkeimmistä ominaisuuksista, kun kyse on vaikuttavasta sisällön markkinointisuunnitelmasta. Tervetuloa upouuteen postisarjaan – Äärimmäinen opas kuvanhallintaan WordPressissä.


Sen tarkoituksena on antaa sinulle tarvittavat työkalut kuvaresurssien hallintaan WordPressissä – heti teknisistä optimoinneista, SEO: sta, CDN-integroinnista ja kirjaston hallinnasta. Tässä moniosaisessa oppaassa suosittelemme vain niitä menetelmiä, oppaita, laajennuksia ja teemoja, joita olemme kokeilleet tai alan asiantuntijoiden suosittelemia..

Vältämme myös sokeasti ehdotamasta laajennuksia, joiden käyttö WordPress-arkistossa on korkea. Pikemminkin suosittelemme niitä, jotka saavat täydellisen sointuarvon ehdotuksen ja suorituskyvyn optimoinnin välillä.

Saatat ihmetellä, kuinka menisimme tekemään niin. 24 000+ latausta ThemeForest-ohjelman Total – Responsive Multipurpose WordPress -teemasta ei ehkä ole hyvä indikaattori.

Olemme hankkineet parhaita blogeja alan johtavien WordPress-hosting-yritysten (kuten WPEngine ja Pagely) ja oppinut mitä ne oppinut palvelemalla miljardeja sivun katseluja tuhansille korkean profiilin asiakkaille. Olemme puristaneet kaikki nämä tiedot sinulle pieniksi kappaleiksi ja luettelomerkeiksi online-menestyksesi kannalta. Aloitetaan nyt?

Tekniset ja suorituskyvyn optimointivinkit WordPress-kuviin

WordPressissä on käytettävissä melko vähän kuvan optimointivaihtoehtoja ei lataa tarpeetonta kuormaa web-palvelimelle. Tarkastelemme joitain yleisimpiä kuvan optimoinnin vinkkejä, jotka kaikki ovat pitäisi seurata yhdessä muutamien muiden kanssa, jotka tulevat käteväksi erityistilaisuuksissa.

JPG tai PNG? Oikean kuvan muodon käyttäminen

Aivan ensimmäinen askel kuvan optimoinnissa on hyvä alku. He sanovat, että hyvin aloitettu työ on puoliksi tehty. Juuri näin on WordPressin kuvan optimoinnissa. Kaikki alkaa oikean kuvamuodon valitsemisesta. JPG ja PNG ovat kaksi yleisintä sisältömarkkinoinnissa verkossa käytettyä kuvamuotoa.

Temppu on ymmärtää, mikä muoto valitaan jokaiselle kuvatyypille. Väärin valitseminen aiheuttaa kuvan koon huomattavan suurenemisen. Tässä ovat säännöt.

Milloin PNG-muotoa käytetään?

Litteiden kuvien – kuten vektorien, piirrosten, kirjasinten, logojen, bannerien, muotojen, bannerien jne. – käyttämiseksi PNG: tä käytetään kaikkeen, joka on luotu vektorimuodossa, kuten EPS tai Adobe Illustrator (.AI) -muodossa. Saat lopulta optimoidun kuvan, melkein nollalaatu heikkenee. Jos käytät JPG: tä tässä tapauksessa, et tee kompromisseja koosta, mutta laatu saattaa loppua. Itse asiassa korkeammalla resoluutiolla PNG olisi kevyempi ilman laadun heikkenemistä. JPG kärsisi.

Ota hänen esimerkki. Luomme tasaisen kuvan, jonka kuvapiste on 5000 kuvapistettä, ja tallenna se JPG- ja PNG-tiedostoina.

Testissä käytetty näytekuva

Litteä kuva
JPG233KB
PNG42KB

Lyhyesti sanottuna JPG-kuva oli 455% korkeampi kuin saman resoluution PNG.

Milloin JPG-muotoa käytetään?

Kaikessa muussa tapauksessa käytä JPG-tiedostoa. Käytä JPG: tä muuta kuin tasaista tai vektorikuvaa. Valokuvia ihmisistä, paikoista, asioista jne. – käytä JPG: tä. Lähes kaikki tämän kategorian varastossakuvat käyttävät JPG: tä. Jos käytät PNG: tä JPG: n sijasta, joudut joihinkin vakavia suorituskykyongelmia.

Tässä tapauksessa sinun on oltava erityisen varovainen. Jos käytät JPG: tä PNG: n sijasta, vaurioita olisi vähän tai ei ollenkaan. Jos kuitenkin käytät veristä PNG-tiedostoa JPG-muodossa, voit luoda paljon tilaa vahinkoille. Katsokaa tätä esimerkkiä.

Perustaa: Olen ladannut tämän kuvan Shutterstockista, joka painaa noin 10.3MB päätöslauselmassa 6149 x 4562 – pohjimmiltaan 28MP-kuvan kuva. Ellemme ole valmistelemassa jotain tulostusvalmistettua esitettä, emme käytä blogeissamme olevan kuvan täysresoluutiota. Oletetaan, että blogissamme on kiinteä enimmäiskuvakoko 1600 kuvapistettä.

Koe: Muutamme lähdekuvan kokoon 1 600 pikseliä ja luomme neljä versiota – kaksi PNG-muodossa ja kaksi JPG-muodossa. Käytämme jokaiselle muodolle (JPG / PNG) (a) suosituksia pakkausasetuksia ja (b) pakkausten enimmäisasetuksia.

Näytekuva JEPG-kokeesta

tulokset: Tässä on tulokset mukavassa kaaviossa, jota voit seurata:

Alkuperäinen kuva (KB)

10870
Kohteen resoluutio1600 kuvapistettä
MuotoasetuksetKoko (KB)% Alennus
JPGProgressiivinen, laatu = 8523198%
Ei-progressiivinen, laatu = 8523998%
PNGPakkaus = 0557549%
Pakkaus = 6185283%
Pakkaus = 9175084%

Ensi silmäyksellä voi ajatella, että PNG on 84% pakkaama tarpeeksi hyvä vastaan ​​JPG: ssä saavutettu 98%. Se ei ole täysin totta. Jos tarkastelet lähemmin kuvan kokoa, huomaat, että PNG painaa hiukan yli 1,7 Mt, kun taas JPG on 0,22 Mt. Mikä tarkoittaa PNG on 8 kertaa raskaampi kuin JPG version samasta kuvasta samalla resoluutiolla. Toisin sanoen, samassa kuvassa ja resoluutiossa JPG-versio on 700% kevyempi kuin PNG!

Samaa kuvaa ja resoluutiota varten JPG-versio on 700% kevyempi kuin PNG!

Käytä nyrkkisääntönä PNG-levyä tasaisiin kuviin ja JPG-tiedostoa kaikkeen muuhun.

Muistilista varastossa olevien valokuvien lataamiseksi blogeista

On olemassa useita blogeja, joissa toimittajat lataavat kuvan täysresoluutioisen version suoraan blogikirjoituksiinsa. Tässä on muutamia osoittimia stock-valokuvien lähettämiseen blogeihin. Käytän ilmaista ohjelmistoa, nimeltään IrfanView, jolla on paljon mahtavia ominaisuuksia. Kuvitan kutakin sinulle.

1. Muuta kuvan kokoa

Ensinnäkin, sinun on päätettävä kaikkien WordPress-sivustosi kuvien enimmäisresoluutiosta. Kaikkien tämän ulottuvuuden yläpuolella olevien kuvien kokoa muutetaan, ellei tietenkään ole pienempiä.

IrfanView on a Erämuuntaminen ominaisuus (paina B sovelluksen käynnistämisen jälkeen), joka voi käyttää toimintoluetteloa joukkoon kuvia yhdellä kertaa. Tarkoituksiamme varten toimintoihin kuuluu koon muuttaminen, rajaaminen, vesileiman lisääminen jne.

2. Poista EXIF-tiedot

Tavallisessa kamerassa napsautetussa valokuvassa on paljon upotettuja kuvia metadata – joka on vain vähän (mutta hyödyllistä) bittiä tietoa kuvasta. Esimerkkejä tällaisista tiedoista ovat paikan GPS-koordinaatit, joissa kuvaa napsautettiin, ISO-asetukset, kameramalli jne.

EXIF-tiedot satunnaisesta valokuvasta, jota napsautettiin iPhonellani

Ellemme ole valokuvablogista, emme yleensä halua tällaista tietoa blogiviestin kuvassa. Kun tallennat tai eräsi muunnat kuvia IrfanView-sovelluksessa, EXIF-tiedot poistetaan yleensä. Tämä auttaa suojaamaan yksityisyyttäsi – etenkin fyysistä sijaintiasi. Suurimman osan valokuvien kokoero on noin 200-300 kt kuvaa kohti.

3. Tallenna progressiivisena JPG-tiedostona

IrfanView tallensi JEPG: t oletuksena progressiivisina

Progressiivinen JPG-kuva lataa kuvakerroksen kerros kerrallaan – nopeuttaa siten latausaikaa. Sisällönjakeluverkot, kuten KeyCDN, ovat käynnistyneet automaattisesti muuntaa JPG-tiedostot progressiivisiksi JPG-tiedostoiksi kuvien toimituksen nopeuttamiseksi ja tallennuksen optimoimiseksi.

4. Aseta DPI-arvoksi 72

DPI tai pisteitä tuumalla on kuvan laadun mitta. Tulostusmateriaalille käytetään korkeaa DPI-arvoa. Verkon arvo 72 on täydellinen.

Okei, joten tiivistäen yllä olevat, seuraavat ovat asetukseni. Suoritan tämän ominaisuuden, kun olen koonnut kaikki kuvat blogikirjoitukselleni – ennen kuvien lähettämistä WordPressiin.

Erämuuntamisasetukset IrfanView-sovelluksessa tyypilliselle WordPress-blogille

5. Optimoi kuvat

Riippumatta siitä, oletko käyttänyt JPG- tai PNG-kuvaa, sinun on optimoitava kuvasi. On olemassa paljon vakavasti mahtavia online-työkaluja, jotka auttavat optimoimaan kuviasi ja tallentamaan erä avaruuden.

Puhun esimerkiksi palveluista TinyPNG tai TinyJPG, joka vain optimoi PNG / JPG-kuvansi joillakin edistyneillä algoritmeilla.

Optimoidut kuvat TinyPNG: ssä

Totta puhuen, en tiedä miten algoritmit toimivat, mutta ne toimivat, ja olen aina pystynyt saamaan alennuksen 50–70% riippumatta siitä, kuinka parhaiten säästän niitä.

Voit myös ostaa pro-versio palvelun Photoshop-laajennuksena 50 dollarilla USD. Sekä Windows- että Mac-versiot ovat saatavana. Tarkoituksilleni online-versio (yhdistettynä Tallenna Dropboxiin ominaisuus) toimii parhaiten.

Kuvan optimointilaajennukset WordPressissä

Toistaiseksi olemme oppineet saamisen vaiheet aloitti oikeassa. Entä jos olet kompastellut tätä viestiä nyt ja sinulla on jo 100 kuvaa kuvaa lähetetty? Tässä on joitain laajennuksia, jotka auttavat sinua tässä:

EWWW Cloud Image Optimizer

Tämä laajennus on alkuperäisen ja villin suositun haarukka EWWW Image Optimizer kytkeä. Yli 500 000 latauksen ansiosta tämä kuvan optimointilaajennus antaa sinun optimoida kuvia WordPressiin ladattaessa.

Mikä erottaa sen kilpailusta, on sen kyky optimoida nykyisiä kuvia tietokannassasi, mikä johtaa valtavaan suorituskykyyn. Se säästää myös huomattavia kaistanleveyskustannuksia, koska suurin osa liikenteestä tulee vanhoista artikkeleista. Voit myös halutessasi ottaa käyttöön häviöllisen kuvan pakkaamisen (joka on tuskin paljain silmin nähtävissä), mutta se voi säästää paljon tilaa ja kaistanleveyttä. Optimointitekniikan kannalta se voi käyttää TinyPNG: tä tai TinyJPG: n sovellusliittymää uusien ja olemassa olevien kuvien optimointiin.

Mutta tässä on ongelma. Monet isännät (mukaan lukien WPEngine) eivät salli EWWW Image Optimization -laajennusta, koska se asettaa palvelimelle paljon lisäkuormaa. Jos onnistut jollain tavalla ohittamaan palvelinrajoitukset, saatat riskittää tilisi jäädyttämisen käytäntöjen rikkomusten takia.

Tässä on EWWW Cloud Optimizer plugin tulee pelaamaan. Se purkaa kaikki kuvien optimointiin tarvittavat laskennat pilveen ja korvaa yksinkertaisesti optimoimattomat kuvat optimoiduilla. Koska pakkaamiseen käytetään käytännöllisesti katsoen nolla prosessoritehoa, katkaisijalle ei ole lisäkuormaa. Tämä pätee kaikkiin uusiin ja olemassa oleviin kuvamuutoksiin WordPress-sivustossasi.

Suunnitelmat ja hinnoittelu: Kuten voidaan olettaa, laajennus ei ole ilmainen, koska kehittäjän on maksettava pilvilaskentalaskut. Kuitenkin hinnoittelu on erittäin kohtuullinen ja maksaa 9 dollaria USD 3000 kuvan optimoinnista prepaid-tilaukselle.

EWWW Cloud Optimizer -laajennus on suunniteltu kauniisti. Mediaskanneri kertoo kuinka monta kuvaa sinun täytyy optimoida ennen oston tekemistä. Palvelimesi kuvien perusteella voit ostaa asiaankuuluvan prepaid-suunnitelman.

TinyPNG WordPress -laajennus

Tämä on toinen hieno kuvan optimoinnin laajennus, joka integroituu suoraan TinyPNG / JPG-palveluun. Se lataa automaattisesti uudet ja olemassa olevat kuvat WordPress-mediakirjastoon. Tämä laajennus tarjoaa ilmaisen suunnitelman, joka sisältää 100 kuvan optimointia kuukaudessa.

Freddy oli koonnut luettelon kuvan optimoinnin lisäosista jonkin aikaa taaksepäin – lue se, jos haluat tietää lisää aiheesta.

johtopäätös

Tämä vie meidät sarjan ensimmäisen viestin loppuun. Seuraavassa artikkelissa opit hyvin, kuinka jotkut vähemmän tunnetut kuvanoptimointivinkit ja -vinkit kuten kuuman linkityksen estäminen, kuvien hakeminen etäpalvelimilta ja vastaavat. Onko sinulla joitain vinkkejä aloittaminen oikein kategoria? Kerro meille alla olevissa kommenteissa.

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