Cum să optimizați imaginile pentru WordPress, un ghid complet

Cum să optimizați imaginile pentru WordPress, un ghid complet

Oamenii de pe web nu au prea mult timp să consume date – pentru că există atât de mulți din urmă. Sunt atât de multe date încât pur și simplu nu avem timp să le citim pe toate! Ca un curator de conținut pentru web-ul modern, sarcina dvs. este de a maximiza randamentul. Cu cât vă exprimați mai mult cu cuvinte mai puține, cu atât sunteți mai bine la locul de muncă.


De ce sunt importante imaginile (deci foarte)?

Există multe, multe motive pentru care dumneavoastră (și ar trebui) să utilizați imagini în postările și articolele dvs.:

  • Imaginile servesc ca stimuli vizuali pentru un apel la acțiune (CTA). Un CTA poate fi orice sarcină pe care doriți să o îndeplinească vizitatorul. CTA-urile obișnuite includ abonarea la newsletter-ul dvs., distribuirea articolului pe rețelele de socializare sau achiziționarea produsului.
  • Imaginile sporesc conexiunea pe care scriitorul încearcă să o stabilească cu cititorul.
  • Imaginile transmit mai mult prin mai puțin.

Prin urmare, este extrem de important să folosim imaginile potrivite în prezentările noastre (postare pe blog, raport informal, prezentare reală a PowerPoint etc.) pentru a lăsa o amprentă în mintea cititorului.!

Dar asteapta! Există o problemă!

Imaginile ocupă aproximativ 63% din lățimea de bandă folosită de site-urile moderne, de aceea este din ce în ce mai important ca acestea să fie optimizate corespunzător pentru viteză.

O secundă de întârziere a timpilor de încărcare a paginii ar putea reduce ratele de conversie cu 7%

Am stabilit că oamenii au un interval de atenție scurt (unul dintre dezavantajele ratei moderne de producție de conținut). Chiar dacă utilizați imaginile potrivite, dacă nu se încarcă într-un interval de timp acceptabil, interesul se pierde.

10 Cele mai frecvente erori de optimizare a imaginii

Majoritatea site-urilor au o problemă – folosesc imagini excelente, dar modul în care imaginea este servită vizitatorului este slabă. Dimensiunile mari, optimizarea slabă, formatul incorect, dimensiunile (dimensiunile) inutile, imaginile fără răspuns și erorile SEO neglijent sunt unele dintre cele mai frecvente probleme cu care se confruntă web-ul modern. În articolul de astăzi, vom aborda aceste probleme!

1. Dimensiuni mari

„Cartofii prăjiți” nu sunt întotdeauna buni

Acesta este un clasic. Să presupunem că aveți nevoie de o fotografie de 150 × 150 pixeli în pagina „Echipa” a site-ului dvs. De obicei, veți folosi o lovitură de cap de 5MP, o editați puțin și în final o veți încărca.

Ai găsit problema? Unii oameni încarcă direct imaginea reală de 5MP! Tema WordPress va încărca întreaga imagine de 5MP (adică 5 x 10 ^ 6 pixeli) și va cere browserului să o micșoreze la dimensiunea dorită de 150x150px. În esență, browserul afișează doar 0,0045% din imaginea originală!

Încercați să pierdeți lățimea de bandă a dvs. și a vizitatorului dvs. (chiar dacă serviți imaginea printr-o rețea de livrare a conținutului, cum ar fi Stackpath CDN), consumând mai mult spațiu pe hard disk și sporind timpul de încărcare. Niciuna dintre caracteristici nu este ceva dorit pe site-ul dvs..

Redimensionați întotdeauna (și prin redimensionare mă refer la redimensionare) a imaginii la dimensiunile dorite și apoi încărcați-o!

ImageResize.org

Nu aveți nevoie de un software de lux pentru a face acest lucru – există instrumente online gratuite, cum ar fi ImageResize.org puteți utiliza pentru a redimensiona și optimiza rapid imaginile. Trebuie doar să încărcați și să reglați setările pentru fotografii. După ce ați terminat, descărcați imaginea optimizată pentru a fi utilizată pe site-ul dvs. De asemenea, oferă un rapid Compresor de imagine dacă doriți doar să reduceți dimensiunea fișierului.

Instrumente utile:

  • IrfanView este un freeware excelent pentru a-ți redimensiona imaginile cu opțiuni avansate, cum ar fi optimizarea, filigranul și bordurile.
  • ImageMagick este un instrument avansat open-source care poate fi utilizat într-o varietate de limbaje de programare și sisteme de operare. Puteți să vă scrieți propria aplicație sau să o utilizați pur și simplu prin intermediul liniei de comandă.
  • ImageOptim (Mac) vă permite să trageți foldere întregi și să optimizați rapid mai multe imagini.
  • TinyPNG este un instrument online de compresie a imaginilor cu o API.

2. Format de imagine incorect

shutterstock_108312266

Formatul folosit pentru imagine joacă un rol vital. Ca regulă generală, folosiți PNG pentru grafică vectorială și imagini generate de computer, cum ar fi clip art etc. JPEG pentru fotografii sau imagini cu o varietate de culori. Pentru o explicație detaliată, verificați acest lucru raspuns minunat StackOverflow.

3. Nu utilizați JPEG-uri progresive

JPG de bază (normal) comparativ cu JPG-ul progresiv

JPG de bază (normal) comparativ cu JPG-ul progresiv

Pentru omul comun, JPEG-urile sunt de două tipuri – Baseline și Progressive. Vizual, ambele sunt la fel. Diferența constă în modul în care sunt încărcate:

  • JPEG de bază are un singur strat – care conține întreaga imagine. Când vi se solicită, întreaga imagine este încărcată simultan.
  • JPEG-urile progresive compun imaginea cu mai multe straturi. O imagine JPEG progresivă este încărcată strat cu strat, care crește treptat în calitate, oferindu-vă în cele din urmă o vedere fără pierderi.
IrfanView acceptă conversia lotului cu JPEG progresiv

IrfanView acceptă conversia lotului cu JPEG progresiv

Toate redimensionatoarele majore vă permit să salvați imagini ca JPEG progresiv.

4. Nu utilizați Loy Load

Lazy Încărcare- este un excelent economisirea resurselor tehnică în care o imagine este încărcată numai atunci când vizitatorul derulează în jos spre cadrul de vizualizare al imaginii. Luați în considerare un articol – „15 dintre cele mai eficiente combustibil din 2014”. Firește, acest articol va conține cel puțin 15 imagini. Și indiferent de înălțimea dispozitivului de afișare – monitor, tabletă sau smartphone, nu puteți încadra toate cele 15 imagini din cadrul vizualizării. Trebuie să derulați în jos pentru a vizualiza toate imaginile.

Cu funcția Lazy Loading, imaginile vor fi încărcate numai atunci când un vizitator se află în vecinătatea imaginii. În alți termeni, imaginile încep să se încarce doar atunci când derulați în jos pentru a o vizualiza. Cu toate acestea, primele câteva imagini sunt încărcate instantaneu, deoarece vă aflați deja în cadrul vizualizării. Lazy Loading economisește lățimea de bandă la ambele capete și îmbunătățește timpul de încărcare! Puteți utiliza Lazy Loading în WordPress cu Plugin de încărcare BJ Lazy.

5. Nu utilizați un CDN

CDN-rețea

Utilizarea unei rețele de livrare de conținut (CDN) va servi imaginea de pe un server care este cel mai apropiat fizic de locația vizitatorului. Dacă un vizitator din India solicită o imagine și CDN are un POP (punct de prezență sau pur și simplu un server) la Tokyo și New York, imaginea va fi difuzată de pe serverul situat în Tokyo.

Când aveți trafic considerabil, ar trebui să configurați un CDN cu WordPress pentru a reduce timpul de încărcare și pentru a obține performanțe generale. Aici, la WPExplorer, vă recomandăm Cloudflare. Pentru site-urile nou-născute, vă recomandăm o listă de servicii CDN gratuite pe care le puteți încerca.

6. Nu declară atributul „alt”

Atributul „alt” descrie imaginea pentru motorul de căutare. Textul introdus în acest câmp va fi afișat utilizatorului în cazul în care imaginea nu poate fi încărcată. Mulți oameni tind să lase aceste câmpuri goale. Acest lucru este foarte nociv pentru SEO și pierzi din trafic. Ar trebui să încercați întotdeauna să includeți cuvintele cheie ale site-ului dvs. în eticheta altă a imaginilor dvs..

7. Nu optimizarea imaginilor

creion creioane colorate puncte

Imaginile optimizate sunt cu 40% mai ușoare decât imaginile normale. Acest lucru îmbunătățește timpul de încărcare și economisește lățimea de bandă. Din lista lui Freddy cu cele mai bune pluginuri de optimizare a imaginilor WordPress, vă recomandăm WPSmush.it pentru a vă optimiza imaginile. Kraken.io este, de asemenea, o opțiune excelentă online pentru comprimarea imaginilor într-o clipă. Îl folosim tot timpul aici la WPExplorer pentru a optimiza imaginile prezentate înainte de a le încărca în postări și demo-uri tematice.

8. Imagini responsive

Responsive Web Design este aici

Responsive Web Design este aici

Chiar dacă site-ul dvs. răspunde, nu înseamnă că imaginile dvs. sunt. Asta înseamnă că imaginea de antet pe care o utilizați pentru un ecran de 22 ”este de asemenea difuzată la un iPhone de 5”. Când încărcați o imagine, WordPress o redimensionează în mai multe versiuni – Thumbnail, Medium, Full Size, etc. Aceasta poate fi modificată de dezvoltator. O temă bine codată va servi versiunea „medie” a imaginii, economisind astfel lățimea de bandă.

Picturefill.WP pluginul va înlocui etichetele de imagine cu o nouă element care ar servi diferite imagini bazate pe interogări media. Este destul de experimental (asta înseamnă că există erori) și nu ar trebui utilizat pe un site live.

9. Legende de imagine

Subtitrările nu sunt întotdeauna necesare, deși în unele cazuri, este necesar – cum ar fi capturile de ecran dintr-un tutorial. Subtitrarea imaginilor ajută cititorii să înțeleagă mai bine subiectul, în timp ce îți îmbunătățește SEO.

10. Nume fișier imagine

Gândiți-vă la numele de fișier din punctul de vedere al motorului de căutare. Utilizați același text ca și dvs. în eticheta „titlu” a imaginii. De asemenea, încercați să includeți cuvintele dvs. cheie care sunt cele mai relevante pentru site-ul dvs..

Concluzie

erou-11

Image SEO este extrem de important pentru orice site web – vechi sau noi. Oameni care implementează imaginea SEO cum se cuvine (poate fi destul de banal uneori), stai să câștigi o cantitate semnificativă de trafic organic (cel mai bun tip de trafic) în Pe termen lung.

Aveți o tehnică minunată de optimizare? Foc departe!

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