Cum să vă optimizați imaginile pentru a fi SEO friendly (Ghid complet)

Performanța site-ului dvs. web depinde de mai mulți factori, de la specifica gazdă web pe care o alegeți, după respectarea regulilor de accesibilitate a site-ului web, până la dimensiunile de fișier imagine pe care le utilizați.

Formatarea lor pentru o dimensiune adecvată, însă, poate reduce calitatea datorită modificărilor pe care le faceți. Vestea bună este că puteți menține o calitate optimă a imaginii și puteți obține dimensiunea potrivită cu câteva tehnici și trucuri.

Ce este optimizarea imaginii?

dimensiuni de optimizare a imaginiiPagini web pot experimenta o încetinire semnificativă atunci când sunt prezente imagini mari. Acest lucru poate reduce timpii de încărcare și face experiența generală să fie subparabilă pentru vizitatorii site-ului dvs..

Scăderea dimensiunii fișierului este optimizarea imaginii. Puteți utiliza un script sau un plugin pentru acest lucru.

Apoi, rezultă timpi de încărcare mai rapide pentru paginile dvs. Compresia fără pierderi și fără pierderi sunt cele mai frecvente două metode de optimizare.

Beneficiile formatării imaginilor

dimensiuni medii de imagine pe webSe estimează că aproximativ 54% din greutatea totală a unei pagini web se datorează imaginilor.

Când lucrați la optimizarea site-ului web, imaginile dvs. ar trebui să fie prima ta sarcină din această cauză. Avantajele formatării imaginilor includ:

  • Viteza de încărcare a paginii îmbunătățită
  • Este mai rapid pentru a crea copii de rezervă
  • Mai puțin spațiu de stocare a serverului este necesar
  • SEO îmbunătățit cu pluginul SEO adecvat
  • Se utilizează mai puțin lățime de bandă

Cum să îmbunătățiți performanța cu optimizarea imaginii

Scopul este de a echilibra uniform calitatea acceptabilă și cea mai mică dimensiune posibilă a fișierului. Există mai multe modalități de a face acest lucru. Înainte de a încărca, comprimarea imaginilor este o opțiune obișnuită. Puteți utiliza un instrument sau un plugin în acest scop (aici sunt câteva).

Este important să luați în considerare tipul de compresie și formatul de fișier pe care îl utilizați. Combinația potrivită face posibilă reducerea dimensiunii imaginii dvs. de până la cinci ori.

Experimentați cu diferite formate de fișiere și tipuri de compresie pentru a determina cea mai bună combinație pentru nevoile dvs..

Alege cel mai bun format de fișier

Pentru a alege cel mai bun tip de fișier, este important să știți care sunt disponibile. Acestea sunt cele mai frecvente:

  • JPEG: Acest tip utilizează o optimizare fără pierderi și fără pierderi. Puteți obține un echilibru solid între dimensiunea și calitatea fișierului prin ajustarea nivelului de calitate.
  • PNG: Acest tip tinde să aibă o dimensiune de fișier mai mare, dar imaginile au o calitate mai mare. Puteți utiliza compresii fără pierderi sau fără pierderi.
  • GIF: Acest lucru este ideal pentru imaginile animate. Puteți utiliza compresie fără pierderi. Foloseste doar 256 de culori.

formate de fișiere imagine

Există și alte opțiuni, dar acestea sunt printre cele mai comune și ușor de lucrat. Alte opțiuni includ JPEG XR și WebP. Nu toate browserele acceptă aceste două, așa că fiți conștienți de acest lucru.

Ele pot fi însă o alegere viabilă. De exemplu, comparativ cu o imagine JPEG comparabilă, în medie, există o reducere a dimensiunii fișierelor cu 30% cu WebP.

Din cauza lipsei de asistență universală pentru aceste două opțiuni, aplicația dvs. va avea nevoie de logică suplimentară pe serverele sau aplicația dvs. pentru a furniza resursa adecvată:

  • Optimizarea imaginii este un serviciu furnizat de unele CDN-uri, inclusiv livrarea WebP și JPEG XR.
  • Pentru a detecta clientul, furnizați cel mai bun format de imagine disponibil și verificați formatele acceptate, este posibil să adăugați o logică de aplicație suplimentară.
  • Anumite instrumente open-source automatizează conversația, optimizarea și difuzarea activelor adecvate.

Dimensiune vs. calitate a compresiunii

Compresia scăzută tinde să ofere o calitate superioară, dar dimensiunile fișierelor sunt de obicei mai mari. Opusul este valabil cu o compresie ridicată. Fișierele sunt mai mici, dar calitatea tinde să scadă.

calitatea imaginii vs compresia

În mod ideal, doriți un total de unu până la doi MB pentru greutatea totală a paginii dvs. web. Deci, ia în considerare câte imagini trebuie să folosești și împărțiți acest număr la aproximativ 1,5. Acest lucru vă oferă dimensiunea pe imagine care permite cea mai bună viteză de încărcare.

Optimizare Lossless vs. Lossy

Acestea sunt cele două tipuri de compresie pe care le veți folosi. Este important să înțelegem ce fac:

  • Compresie fără pierderi și fără pierderiFara pierderi: Acest lucru comprimă datele și este un filtru. Înainte de a reda imaginea, aceasta trebuie să fie necomprimată. Cu toate acestea, calitatea nu este redusă. Există mai multe instrumente care efectuează o compresie fără pierderi.
  • lossy: Aceasta elimină unele date și este un filtru. Fiți atenți la câtă reducere faceți, deoarece va degrada imaginea. Puteți utiliza editori și instrumente diferite pentru a ajusta setările de calitate ale imaginii.

Configurația optimă a fiecărei configurații fără pierderi sau cu pierderi depinde de propriile criterii, cum ar fi distribuirea între artefacte introduse și dimensiunea fișierului și conținutul imaginii.

Nu există o singură setare universală care să se aplice tuturor imaginilor. În cele din urmă, doriți să vă jucați cu imagini diferite pentru a vedea care funcționează cel mai bine.

Redimensionarea imaginilor la scară

Datorită paginilor responsive de pe site-uri, precum WordPress, veți obține mai multe dimensiuni de fișiere în media media. Browserul dvs. poate alege dimensiunea care este cea mai bună și să o descarce. Mărimea pe care o alege browserul se bazează pe rezoluția dispozitivului.

redimensionarea imaginii în wordpress

Fișierul original rămâne neatins și păstrat. Puteți utiliza pluginuri pentru a evita salvarea originalului pentru a economisi spațiul discului, dacă doriți.

Înlocuirea și eliminarea imaginilor

Aveți nevoie de toate imaginile de pe o pagină web? Dacă nu, eliminați cele care nu sunt necesare. Cu toate acestea, dacă toate sunt pertinente pentru conținut, luați în considerare înlocuirea imaginilor de calitate mai mare sau de calitate inferioară cu opțiuni mai bune.

În unele cazuri, fonturile web și efectele CSS pot lua locul imaginilor, oferind în același timp o estetică vizuală frumoasă pe pagină. Cu ajutorul fonturilor web, tipografiile frumoase vă pot ajuta să îmbunătățiți capacitatea de utilizare și să oferiți un aspect mai adaptat paginilor dvs..

De asemenea, vă poate îmbunătăți lizibilitatea și marca. Trebuie doar să vă asigurați că puteți căuta, selecta și redimensiona textul cu ușurință, fără ca acesta să aibă probleme de lizibilitate.

Efectele CSS includ elemente, cum ar fi umbrele și gradientele. Acestea pot marca și mai mult. Animațiile pot oferi un apel vizual pe pagina dvs. web la orice nivel de zoom și rezoluție. În comparație cu fișierele de imagine, acestea sunt o fracțiune din octeți.

Raster vs. Images Vector

rastor vs vector

Raster și vector sunt două dintre principalele tipuri de fișiere imagine. Programele bazate pe pixeli, un scaner sau o cameră foto sunt utilizate pentru a crea imagini raster.

Acestea sunt utilizate pe scară largă pe internet și mai frecvent utilizate. Software-ul vectorial este folosit pentru a crea imagini vectoriale. Acestea sunt comune pentru imaginile care merg pe produse fizice și în inginerie, grafică CAD și 3D.

Imaginile vectoriale sunt independente de rezoluție și zoom. Când sunt implicate forme geometrice, vectorul este ideal. Atunci când imaginile sunt complexe și au o mulțime de detalii și forme neregulate, imaginile raster sunt preferate.

Grafica mai rapidă codifică valorile individuale ale fiecărui pixel într-o grilă dreptunghiulară pentru a reprezenta o imagine. Grafica vectorială reprezintă o imagine folosind puncte, linii și poligoane.

Implicații de ecran de înaltă rezoluție

Este important să distingem între cele două tipuri diferite de pixeli, care includ pixeli de dispozitiv și pixeli CSS. Mai mulți pixeli de dispozitiv pot fi prezenți într-un singur pixel CSS. Detaliile de pe ecran devin mai fine cu mai mulți pixeli ai dispozitivului.

css pixel vs pixel dispozitivPentru a profita din plin de numărul mai mare de pixeli ai dispozitivului, activele imaginii trebuie să aibă mai multe detalii.

Această sarcină este ideal pentru imagini vectoriale, deoarece acestea pot produce rezultate clare atunci când este redată la orice rezoluție.

Întrucât imaginile raster utilizează o bază per pixel pentru a codifica datele imaginii, acestea sunt mai dificile. Acest lucru este în timp ce dimensiunile de fișiere raster cresc odată cu creșterea pixelilor.

Așadar, ecranele de înaltă rezoluție au nevoie de imagini de înaltă rezoluție pentru a profita de beneficii. Imaginile vectoriale sunt cel mai bun pentru ecrane de înaltă rezoluție deoarece întotdeauna oferă rezultate clare datorită faptului că sunt independente de rezoluție.

Amintiți-vă doar că, indiferent de rezoluție, tehnicile de optimizare a imaginilor sunt aceleași.

Optimizarea imaginilor vectoriale

Grafica vectorială scalabilă (SVG) este acceptată de toate browserele moderne.

Acest lucru este ideal pentru graficele bidimensionale, iar formatul este bazat pe imagini XML. Fișierele SVG pot fi create manual cu ajutorul editorului de text pe care îl preferați sau cu cele mai multe tipuri de software bazate pe vector.

Pentru a reduce dimensiunea fișierelor SVG, acestea trebuie minunate. GZIP trebuie utilizat la comprimarea fișierelor SVG.

Optimizarea imaginilor mai rapide

O grilă de pixeli alcătuiește o imagine raster. Pixelii individuali sunt pe o grilă bidimensională. De exemplu, o secvență de 10.000 pixeli alcătuiește o imagine de 100 până la 100 de pixeli. Fiecare pixel codifică transparența și informațiile despre culoare.

raster greoiValorile RGBA sunt stocate de fiecare pixel. Acestea includ:

  • Canal roșu
  • Canal albastru
  • Canal verde
  • Canal alfa (transparență)

256 nuanțe (valori) sunt alocate intern de către browser. Pe canal, acest lucru se traduce în opt biți. Per pixel, acesta este de patru octeți. Acest lucru face posibilă calcularea dimensiunii fișierului folosind dimensiunile grilei. Nu este nevoie de mult pentru ca dimensiunea fișierului să devină foarte mare.

Deci, pentru a reduce dimensiunea fișierului imagine, există câteva strategii:

  • Reduceți profunzimea de biți a imaginii. Puteți face acest lucru folosind un palet de culoare mai mică.
  • Optimizați datele stocate de fiecare pixel individual.

Instrumente și reglarea parametrilor

Nu există un instrument de imagine perfect, un set de parametri sau format de optimizare care să funcționeze pentru fiecare imagine. Conținutul imaginii și cerințele sale tehnice și vizuale vor determina care ar trebui să utilizați.

După ce găsiți un set de setări bun, îl puteți utiliza pentru imagini similare în viitor pentru a economisi timp. Cu toate acestea, asigurați-vă că nu presupuneți niciodată că ar trebui utilizate aceleași setări pentru a comprima toate imaginile.

Învățarea despre câteva instrumente comune vă poate ajuta în alegerea corectă. Aceste patru sunt printre cele mai des utilizate:

  • Gifsicle: Acest lucru vă permite să optimizați și să creați diferite imagini GIF.
  • Optipng: Acest lucru este utilizat pentru a permite optimizarea PNG fără pierderi.
  • Jpegtran: Acesta vă permite să optimizați imaginile JPEG.
  • Pngquant: Acesta este utilizat pentru a permite optimizarea PNG cu pierderi.

Livrarea de active de dimensiuni scalate

Există două criterii principale care trebuie luate în considerare atunci când efectuați optimizarea imaginii:

  • Optimizarea numărului total de pixeli ai unei imagini.
  • Optimizarea câți octeți este necesară pentru a codifica fiecare pixel într-o imagine.

arbore format de imagineMărimea fișierului dvs. de imagine se descompune la total de pixeli înmulțiți cu totalul octeților necesari pentru codificarea individuală a pixelilor. Asta este. Rețineți acest lucru atunci când lucrați pentru a determina dimensiunea optimă pentru fișierele imagine de pe site-ul dvs. web.

Din această cauză, cel mai eficient și ușor mod de a optimiza imaginile este să vă asigurați că nu expediați mai mulți pixeli de care aveți nevoie pentru a afișa activul în browser la dimensiunea prevăzută..

Asa de, nu vă bazați doar pe browserul dvs. pentru a revinde imagini. Acest lucru poate face ca acestea să fie afișate la o rezoluție mai mică. De asemenea, folosește o mulțime de resurse suplimentare de procesor.

În general nu este posibil să garantați dimensiunea exactă a afișajului pentru fiecare activ livrat. Cu toate acestea, este important să vă asigurați că păstrați toți pixelii inutili la minimum.

De asemenea, este imperativ să livrați activele dvs. cât mai aproape de dimensiunea afișată.

Lista de verificare a optimizării imaginilor

Toate informațiile de aici vă permit să vă optimizați imaginile, astfel încât paginile dvs. web să fie mai rapide. Veți putea să utilizați în continuare imagini frumoase, dar acestea nu vor provoca o încetinire semnificativă a timpului de încărcare a paginii dvs..

Acest lucru vă va face vizitatorii fericiți și va îmbunătăți funcția generală a site-ului dvs. web. Luați în considerare următoarele puncte de checklist când optimizați imaginile:

  • Luați în considerare formate vectoriale, deoarece funcționează pentru dispozitive cu rezoluție înaltă și multiple, deoarece sunt independente de scară și rezoluție.
  • Toate activele SVG trebuie comprimate și reduse. Aceasta elimină metadatele inutile.
  • Pentru formatele raster, jucați-vă cu setările optime de calitate. Acest lucru vă poate salva un număr semnificativ de octeți.
  • Pentru fiecare activ, descoperiți-vă cerințele funcționale și alegeți cel mai bun format pentru imagini raster.
  • Automatizați ori de câte ori puteți pentru a vă asigura o optimizare consistentă a imaginii.
  • Serviți imagini la scară, astfel încât dimensiunea naturală a imaginii și dimensiunea afișajului să fie cât mai asemănătoare posibil.

Pentru a rezuma, există atât o știință, cât și o artă pentru optimizarea imaginii. Algoritmii și tehnicile foarte dezvoltate servesc drept știință.

Lipsa de răspunsuri definitive privind compresia individuală a imaginii este art. În cele din urmă, ar trebui să te joci și să experimentezi. Acest lucru vă permite să faceți cea mai bună alegere pentru fișierele dvs. de imagine și modul în care acestea contribuie la viteza paginii dvs. de web.

Având în vedere popularitatea și sofisticarea în creștere a constructorilor de site-uri terțe precum Wix, este ușor pentru designeri să obțină un sloppy, dar să rămână concentrat pe dezvoltarea și menținerea unor procese bune de optimizare a imaginii, fie că aruncați un șablon sau să construiți un site de la zero..

Referințe și credite de imagine:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author