Ghidul final de gestionare a imaginilor WordPress

  1. 1. Acum citesc: Ghidul final de gestionare a imaginilor WordPress
  2. 2. 3 sfaturi mai puțin cunoscute de gestionare a imaginilor în WordPress
  3. 3. WordPress Image Greșeli SEO și cum să le remedieze

Impactul vizual este una dintre cele mai importante caracteristici atunci când vine vorba de un plan de marketing de conținut cu impact. Bine ați venit la o nouă serie de posturi – Ghidul final pentru gestionarea imaginilor în WordPress.


Este conceput pentru a vă oferi instrumentele necesare pentru a vă gestiona elementele de imagine în WordPress – chiar din optimizări tehnice, SEO, integrare CDN și gestionarea bibliotecii. În acest ghid multipart, vom recomanda doar acele metode, tutoriale, pluginuri și teme pe care le-am încercat sau sunt recomandate de experți din industrie.

Vom evita, de asemenea, sugerarea orb de plugin-uri care au o utilizare ridicată în depozitul WordPress. Mai degrabă, îi recomandăm pe cei care ating acordul perfect între propunerea de valoare și optimizarea performanței.

S-ar putea să vă întrebați cum vom face acest lucru. Mai mult de 24.000 de descărcări ale temei noastre totale multifuncționale de tip WordPress – ThemeForest nu pot fi un indicator excelent.

Ei bine, am căutat cele mai bune bloguri de la companiile de găzduire WordPress de top din industrie (cum ar fi WPEngine și Pagely) și a învățat ce ei învățat când s-au difuzat miliarde de afișări de pagini în mii de clienți cu profil înalt. Toate aceste informații le-am comprimat în paragrafe minuscule și punctele de buletin pentru succesul dvs. online. Acum să începem, trebuie??

Sfaturi tehnice și de optimizare a performanței pentru imaginile WordPress

Există destul de multe opțiuni de optimizare a imaginilor disponibile în WordPress nu puneți sarcină inutilă pe serverul web. Vom analiza unele dintre cele mai comune sfaturi de optimizare a imaginilor pe care le oferă toată lumea ar trebui să urmează, alături de câțiva alții care vin la îndemână în ocazii speciale.

JPG sau PNG? Utilizarea formatului corect al imaginii

Primul pas în optimizarea imaginii este un început bun. Ei spun că o muncă bine începută este pe jumătate făcută. Acesta este exact cazul când vine vorba de optimizarea imaginilor în WordPress. Totul începe cu alegerea formatului corect al imaginii. JPG și PNG sunt cele mai comune două formate de imagine utilizate online în marketingul de conținut.

Trucul este să înțelegeți ce format să alegeți pentru fiecare tip de imagine. A alege cea greșită determină o creștere monumentală a dimensiunii imaginii. Iată regulile.

Când să folosiți formatul PNG?

Pentru imagini plane – cum ar fi vectori, ilustrații, fonturi, logo-uri, bannere, forme, bannere etc. – orice este creat într-un format vectorial, precum EPS sau Adobe Illustrator (.AI), folosiți un PNG. Veți ajunge să obțineți o imagine optimizată cu pierderi de calitate aproape zero. Dacă utilizați un JPG în acest caz, nu veți face compromisuri cu privire la dimensiune, dar s-ar putea să rămâneți fără calitate. De fapt, la rezoluții mai mari, PNG ar fi mai ușor fără pierderi de calitate. JPG-ul ar avea de suferit.

Ia exemplul lui. Vom crea o imagine plană la 5000px și o vom salva ca JPG și PNG.

Exemplu de imagine utilizat pentru testare

Imagine plat
JPG233KB
PNG42KB

Pe scurt, imaginea JPG a fost cu 455% mai mare decât PNG pentru aceeași rezoluție.

Când se utilizează formatul JPG?

Pentru orice altceva, utilizați un JPG. Altceva decât o imagine plană sau vectorială, utilizați JPG. Fotografii cu oameni, locuri, lucruri etc. – utilizați JPG. Aproape toate fotografiile stoc din această categorie folosesc JPG. Dacă utilizați PNG în locul unui JPG, ați trece la unele probleme serioase de performanță.

Trebuie să fii foarte atent în acest caz. Dacă utilizați un JPG în locul unui PNG, nu ar exista niciun fel de daune. Cu toate acestea, dacă utilizați un PNG sângeros în cazul unui JPG, creați o mulțime de spații pentru daune. Aruncați o privire la acest exemplu.

Înființat: Am descărcat această imagine din Shutterstock, care cântărește 10.3MB la o rezoluție de 6149 × 4562 – în esență, o fotografie de stoc de 28MP. Dacă nu pregătim ceva precum o broșură pregătită pentru imprimare, nu vom folosi rezoluția completă a fotografiei în blogurile noastre. Să spunem că avem o dimensiune de imagine maximă fixă ​​a blogului nostru 1600 px.

Experiment: Vom redimensiona imaginea sursă la 1600px și vom crea patru versiuni – două pentru format PNG și două pentru JPG. Pentru fiecare format (JPG / PNG), vom folosi (a) recomandarea setărilor de compresie și (b) setările de compresie maximă.

Imagine de probă pentru experimentul JEPG

Rezultate: Iată rezultatele dintr-un grafic frumos pe care trebuie să-l urmați:

Imagine originală (KB)

10870
Rezolvare țintă1600 px
FormatSetăriDimensiune (KB)% Reducere
JPGProgresiv, calitate = 8523198%
Non-progresiv, calitate = 8523998%
PNGCompresie = 0557549%
Compresie = 6185283%
Compresie = 9175084%

Dintr-o primă privire, s-ar putea crede că 84% este compresia PNG suficient de bun față de 98% obținut în JPG. Nu este complet adevărat. Dacă aruncați o privire mai atentă asupra dimensiunilor imaginii, ați vedea că PNG cântărește puțin peste 1,7 MB, în timp ce JPG-ul este de 0,22MB. Ceea ce înseamnă că PNG este de 8 ori mai greu decât JPG versiune a aceleiași imagini la aceeași rezoluție. Cu alte cuvinte, pentru aceeași imagine și rezoluție, versiunea JPG este cu 700% mai ușoară decât PNG!

Pentru aceeași imagine și rezoluție, versiunea JPG este cu 700% mai ușoară decât PNG!

De regulă, folosiți PNG pentru imagini plane și JPG pentru orice altceva.

Lista de verificare pentru încărcarea fotografiilor de stoc pe bloguri

Există tone de bloguri în care editorii încarcă direct versiunea de rezoluție completă a imaginii în postările lor de blog. Iată câteva indicatoare pentru încărcarea fotografiilor stoc pe bloguri. Folosesc un software gratuit numit IrfanView, care are o mulțime de caracteristici minunate. Îți voi ilustra pe fiecare pentru tine.

1. Redimensionați-vă imaginea

În primul rând, trebuie să decideți o rezoluție maximă pentru toate imaginile de pe site-ul dvs. WordPress. Orice imagine deasupra acestei dimensiuni ar fi redimensionată, cu excepția cazului în care aceasta este mai mică.

IrfanView are o Conversia în lot caracteristică (apăsați B după lansarea aplicației) care poate aplica o listă de funcții la o grămadă de imagini dintr-o singură dată. În scopurile noastre, funcțiile includ redimensionarea, decuparea, adăugarea unui filigran, etc.

2. Eliminați datele EXIF

Fotografiile făcute clic pe o cameră obișnuită au multe încorporate metadate – care nu este altceva decât fragmente minuscule (dar utile) de informații despre imagine. Exemple de astfel de informații includ coordonatele GPS ale locului în care s-a făcut clic pe poză, setări ISO, model de cameră etc.

Informațiile EXIF ​​ale unei fotografii aleatorii au dat clic pe iPhone

Dacă nu suntem foto-blogging, în general nu dorim astfel de informații în imaginea postării unui blog. Când salvați sau convertiți imagini convertite în lot în IrfanView, datele EXIF ​​sunt de obicei eliminate. Aceasta vă ajută să vă păstrați confidențialitatea – în special locația fizică. Diferența de dimensiune pentru majoritatea fotografiilor este de aproximativ 200-300 KB pe imagine.

3. Salvați ca JPG progresiv

IrfanView a salvat JEPG-urile ca progresiv în mod implicit

O imagine JPG progresivă încarcă stratul de imagine după strat – accelerând astfel timpul de încărcare. Rețelele de livrare a conținutului, cum ar fi KeyCDN, au început convertirea automată JPG-uri către JPG-uri progresive pentru a accelera livrarea imaginii și a optimiza stocarea.

4. Setați DPI la 72

DPI sau puncte pe inch este o măsură a calității imaginii. O valoare DPI ridicată este utilizată pentru materialele de tipărire. Pentru web, o valoare de 72 este perfectă.

Bine, deci rezumând cele de mai sus, urmează setările mele. Rulez această caracteristică odată ce am compilat toate imaginile pentru postarea mea pe blog – înainte de a încărca imaginile pe WordPress.

Setări de conversie în lot în IrfanView pentru un blog tipic WordPress

5. Optimizează-ți imaginile

Indiferent dacă ați folosit JPG sau PNG, trebuie să vă optimizați imaginea. Există o mulțime de instrumente online extrem de grozave care vă ajută să vă optimizați imaginile și să economisiți un mult de spațiu.

Vorbesc despre servicii precum TinyPNG sau TinyJPG care optimizează pur și simplu imaginile PNG / JPG cu niște algoritmi avansați.

Imagini optimizate în TinyPNG

Ca să fiu sincer, nu știu cum funcționează algoritmii, dar așa se întâmplă și întotdeauna am reușit să obțin o reducere de 50-70%, indiferent cât de bine îi economisesc.

Puteți cumpăra și versiune pro a serviciului ca plugin Photoshop pentru 50 USD USD. Ambele versiuni Windows și Mac sunt disponibile. În scopurile mele, versiunea online (însoțită de Salvați în Dropbox caracteristică) funcționează cel mai bine.

Pluginuri de optimizare a imaginilor în WordPress

Până acum, am aflat pașii pentru a ajunge a început dreapta. Ce se întâmplă dacă te-ai dat peste această postare și ai încărcat deja 100 de imagini? Ei bine, iată câteva plugin-uri care vă pot ajuta în acest sens:

EWWW Cloud Image Optimizer

Acest plugin este o furculiță a originalului și popular EWWW Image Optimizer conecteaza. Cu peste 500.000 de descărcări, aceste plugin-uri de optimizare a imaginilor vă permit să optimizați imaginile pe măsură ce sunt încărcate pe WordPress.

Ceea ce o diferențiază de concurență este capacitatea sa de a optimiza imaginile existente în baza de date, ceea ce duce la o umflătură uriașă a performanței. De asemenea, economisește costuri importante pentru lățimea de bandă, deoarece majoritatea traficului dvs. provin din articole vechi. De asemenea, puteți alege opțional să activați compresia cu imagini pierdute (care este abia vizibilă pentru ochiul liber), dar puteți economisi mult spațiu și lățime de bandă. În ceea ce privește tehnologia de optimizare, poate utiliza API-ul TinyPNG sau TinyJPG pentru a optimiza imagini noi și existente.

Dar iată problema. O mulțime de gazde (inclusiv WPEngine) nu permit pluginul de optimizare a imaginii EWWW, deoarece pune o mulțime de sarcini suplimentare pe server. Dacă cumva reușiți să ocoliți restricțiile serverului, este posibil să riscați suspendarea contului dvs. din cauza încălcărilor politicii.

Acesta este locul în care EWWW Cloud Optimizer pluginul se joacă. Descarcă tot calculul necesar pentru optimizarea imaginilor în cloud și înlocuiește pur și simplu imaginile neautorizate cu cele optimizate. Deoarece puterea CPU aproape zero este utilizată pentru compresie, nu există nicio sarcină suplimentară. Aceasta este valabilă pentru toate conversiile de imagini noi și existente pe site-ul dvs. WordPress.

Planuri și prețuri: După cum ne-am aștepta, pluginul nu este gratuit, deoarece dezvoltatorul trebuie să plătească facturile de cloud computing. Însă de stabilire a prețurilor costă extrem de rezonabil 9 USD pentru 3000 de optimizări de imagine pentru un abonament preplătit.

Pluginul EWWW Cloud Optimizer este proiectat frumos. Scanerul media vă spune câte imagini trebuie să optimizați înainte de a face o achiziție. Pe baza imaginilor serverului dvs., puteți achiziționa un plan preplătit relevant.

Plugin WordPress TinyPNG

Acest alt plugin excelent de optimizare a imaginii care se integrează direct cu serviciul TinyPNG / JPG. În mod automat, imaginile noi și existente sunt încărcate în media media WordPress. Acest plugin oferă un plan gratuit de 100 de optimizări de imagine pe lună.

Freddy compilase o listă de plugin-uri de optimizare a imaginii cu ceva timp înapoi – dă-i o citire dacă vrei să afli mai multe despre subiect.

Concluzie

Acest lucru ne aduce la sfârșitul primului post din această serie. În articolul următor, aflați cum sunt câteva sfaturi și trucuri de optimizare a imaginii mai puțin cunoscute, cum ar fi prevenirea legăturii rapide, preluarea de imagini de pe serverele de la distanță și altele asemenea. Aveți câteva sfaturi în conformitate cu începerea corectă categorie? Spuneți-ne în comentariile de mai jos.

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