Cum să optimizați imaginile pentru web: un ghid pas cu pas pentru o performanță mai bună a site-ului

Nu există nicio îndoială că imaginile sunt un bun neprețuit pentru world wide web. De la vizualizarea datelor la descompunerea paragrafelor de text până la prezentarea lucrărilor dvs. de portofoliu, fotografiile și graficele sunt o parte importantă a celor mai multe design-uri de site-uri web și ajută utilizatorii să aibă experiențe online grozave.

Cu toate acestea, a avea imagini excelente poate afecta site-ul dvs. web. Cu rezoluții mai mari, există dimensiuni mai mari ale fișierelor, ceea ce înseamnă și timpi de încărcare mai lenți. AKA, imaginile sunt adesea cauza performanței slabe a site-ului. Și amintiți-vă, scopul adăugării de imagini pe site-ul dvs. este de a crea o experiență mai bună pentru utilizatorii dvs. (sau poate chiar de a crește vânzările și conversiile!), ceea ce este greu de făcut cu un site lent.

Deci, cum echilibrați performanța site-ului cu designul vizual?

Prin optimizarea imaginilor.

Există o mulțime de lucruri mici pe care le puteți face pe parcursul procesului de creare a imaginii pentru a optimiza dimensiunile fișierelor, în special având în vedere site-ul dvs.

În acest ghid pas cu pas pentru optimizarea imaginii, voi aborda:

• Ce este optimizarea imaginii?
• De ce este importantă optimizarea imaginii?
• 7 moduri de a optimiza imaginile pentru web

Ce este optimizarea imaginii?

În general, optimizarea imaginii este actul de scădere a dimensiunii fișierului fără a pierde calitatea. Vă puteți optimiza imaginile în faza de creare (cum ar fi utilizarea opțiunilor corecte „Exportare” în Photoshop) sau direct pe site-ul dvs. web (cum ar fi utilizarea încărcăturii leneșe pentru a afișa conținut media pe site-ul dvs.). Scopul este de a reduce cantitatea de date pe care un utilizator trebuie să le descarce, astfel încât să poată obține mai rapid conținutul pe care îl caută.

De ce este importantă optimizarea imaginii?

Oamenii au o atenție scurtă atunci când vine vorba de web, motiv pentru care este important să faci site-ul tău să se încarce în două secunde sau mai puțin. Iar unul dintre cei mai comuni factori care vă încetinesc site-ul sunt imaginile dvs. (Chiar dacă site-ul dvs. web rulează pe cele mai bune servere, așa cum veți obține cu o gazdă WordPress gestionată, imaginile pot fi scăderea performanței.)

Există un alt motiv pentru care optimizarea imaginii este importantă, totuși, unul legat direct de rezultatul afacerii tale. Dincolo de încetinirea site-ului dvs., imaginile ocupă spațiu pe disc pe serverul care alimentează site-ul dvs. Majoritatea furnizorilor de găzduire impun o limită de lățime de bandă pe plan, ceea ce înseamnă că nu aveți resurse nelimitate – iar imaginile dvs. vor ocupa rapid spațiul respectiv.

Deși nu este sfârșitul lumii dacă depășiți această limită, s-ar putea să vi se plătească o taxă suplimentară sau, mai rău, să vă închideți site-ul.

Prin optimizarea imaginilor, veți putea profita la maximum de spațiul de stocare al site-ului dvs. și veți putea evita această limită de lățime de bandă.

Acum că știi cât de importantă este optimizarea imaginii, hai să vorbim despre cum să o faci! Acest ghid pas cu pas va acoperi totul, de la sfaturi Photoshop la practici de dezvoltare.

Cum să optimizați imaginile pentru web

Acest ghid pas cu pas va acoperi tot ce puteți face pentru a optimiza imaginile, începând cu Photoshop și terminând pe site-ul dvs.

Urmați acești pași pentru a vă optimiza imaginile pentru o performanță mai bună a site-ului:

1. Comparați viteza actuală a site-ului dvs.
2. Aflați cum să alegeți cel mai bun tip de fișier imagine.
3. Redimensionați imaginile înainte de a le exporta.
4. Comprimați imaginile pentru a reduce dimensiunea fișierului.
5. Automatizați optimizarea imaginii cu un plugin WordPress.
6. Folosiți tehnica „blur up” pentru a încărca mai întâi o imagine de calitate inferioară.
7. Utilizați încărcare leneșă.

1. Comparați viteza actuală a site-ului dvs

Înainte de a face toată această muncă pentru a vă optimiza imaginile, începeți prin a rula un test de viteză pe site-ul dvs.! Până la sfârșit, vei putea vedea impactul pe care l-ai avut (în plus, îl poți împărtăși cu echipa sau șeful tău, pentru felicitări suplimentare).

Ca parte a echipei de asistență Flywheel, sunt familiarizat cu destul de multe teste de viteză, dar acestea cinci sunt preferatele mele:

• Google PageSpeed ​​Insights
• Instrumente Pingdom
• GTMetrix
• WebPageTest
• Suplimentul „Performanță” pentru Flywheel

Primele patru, instrumentele bazate pe browser, funcționează destul de asemănător între ele: deschideți linkul, apoi introduceți adresa URL pentru un raport rapid despre viteza și performanța site-ului dvs.

Performance Insights, un supliment pentru platforma de găzduire a Flywheel, va depăși elementele de bază pentru a vă oferi recomandări aplicabile pentru site-ul dvs., inclusiv informații pe care doar gazda dvs. le poate oferi.

În plus, veți putea urmări valorile de-a lungul timpului în tabloul de bord, făcându-vă ușor să vedeți impactul modificărilor dvs. pe măsură ce faceți lucruri precum optimizarea imaginilor. Aflați mai multe aici.

Aceste instrumente vă vor recomanda câțiva pași pe care îi puteți face pentru a îmbunătăți viteza și performanța site-ului, dar în scopul acestui tutorial, concentrați-vă pe scor pentru moment. Acest lucru vă oferă un punct de referință excelent, astfel încât să știți de unde începeți.

2. Aflați cum să alegeți cel mai bun tip de fișier imagine

Când ați terminat de creat imagini (fie salvați de pe camera dvs., fie exportați dintr-un instrument precum Photoshop), veți avea opțiunea de a specifica tipul de fișier. Cele mai comune tipuri de fișiere utilizate pe web sunt JPEG, PNG și GIF. Și, după cum sunt sigur că puteți ghici, toate au propriile lor avantaje, dezavantaje și bune practici atunci când sunt plasate pe site-ul dvs. web.

JPEG-uri

Imaginile JPEG funcționează cel mai bine pentru a afișa fotografii color complexe pe site-ul dvs., deoarece permit o imagine de calitate superioară cu o dimensiune mai mică a fișierului. Acest tip de fișier va funcționa probabil pentru majoritatea imaginilor pe care doriți să le utilizați pe site-ul dvs., cu o excepție majoră: imaginile cu fundal transparent. (Pentru acestea, consultați următoarea secțiune despre PNG-uri!)

Când utilizați o imagine JPEG pentru site-ul dvs. web, luați în considerare exportul ca „Progresiv”. Acest lucru permite browserului să încarce instantaneu o versiune simplă a imaginii înainte de a încărca complet rezoluția completă pe site.

Iată o idee despre cum s-ar încărca o imagine neprogresivă:

Iată cum s-ar încărca o imagine progresivă:

Dacă lucrați în Photoshop, veți găsi această setare când exportați ca „Salvare pentru web”.

PNG-uri

Dacă nu aveți o mulțime de culori în imaginea dvs. (cum ar fi ilustrații plate sau pictograme) sau doriți să fie transparentă, vă recomand să exportați ca PNG. Asigurați-vă că aveți dimensiunile corecte ale imaginii și căutați opțiunea de salvare ca PNG-24 (sau 8, dacă nu există nicio pierdere de calitate).

GIF-uri

Al treilea cel mai frecvent format de imagine pentru web sunt GIF-urile. Aceștia acceptă doar 256 de culori, așa că va trebui să fii selectiv cu acest tip de fișier!

Pentru a optimiza GIF-urile pentru site-ul dvs., gândiți-vă critic la cât durează acestea, dacă trebuie să se înregistreze în buclă și de câte aveți nevoie cu adevărat pe o anumită pagină sau site.

3. Redimensionați imaginile înainte de a le încărca

Una dintre cele mai simple moduri de a optimiza imaginile pentru web este să le redimensionezi înainte de a le încărca pe site-ul tău. Mai ales dacă lucrați cu imagini brute de la o cameră DSLR, dimensiunile sunt adesea mult mai mari decât aveți nevoie de fapt.

De exemplu, să presupunem că adăugați imagini la un articol de blog de pe site-ul dvs. Dacă tema dvs. WordPress afișează imagini la 500 x 500, dar încărcați imagini cu o rezoluție de 1024 x 1024, toți acești pixeli suplimentari doar măresc dimensiunea fișierului și scad viteza site-ului fără a oferi un beneficiu real.

Decupând imaginile înainte de încărcare, veți micșora dimensiunea fișierului, ceea ce vă va ajuta site-ul să se încarce puțin mai rapid și să economisiți spațiu pe disc pentru și mai multe imagini.

Pentru a redimensiona imaginea, trebuie doar să deschideți software-ul de editare a imaginilor dorit. Photoshop funcționează bine sau puteți utiliza și instrumente mai simple, cum ar fi Preview (pentru Mac), Paint (pentru Windows) sau Canva (un instrument de browser).

4. Comprimați imaginile pentru a reduce dimensiunea fișierului

Odată ce aveți imaginea finală, salvată în formatul potrivit și tăiată la o dimensiune adecvată, mai există un pas pe care îl puteți face pentru a o optimiza înainte de a o încărca pe site: comprimarea acesteia.

Acest proces vă va ajuta să micșorați dimensiunea fișierului fără a pierde calitatea vizibilă a imaginii. Există două tipuri principale de compresie: cu pierderi și fără pierderi.

Compresia fără pierderi va menține același nivel de calitate înainte și după compresie. Compresia cu pierderi va elimina unele elemente ale fotografiei, dar de obicei într-un mod pe care ochiul uman nu îl va observa. Pentru a afla mai multe despre aceste tipuri de compresie, recomand acest ghid de la Imagify.

Dacă vedeți o anumită imagine pe site-ul dvs. încărcată și apare încet, acesta poate fi un semn că are nevoie de compresie, redimensionare sau ambele.

Pentru a vă comprima imaginile, tot ce aveți nevoie este un instrument de comprimare a imaginii. Preferatele mele includ:

• TinyPNG: Un instrument gratuit bazat pe browser pentru comprimarea imaginilor PNG și JPEG.
• ImageOptim: O aplicație gratuită open-source pentru comprimarea imaginilor.
• JPEGmini: O aplicație de recomprimare a fotografiilor pentru Mac și Windows.
• RIOT: O aplicație Windows gratuită pentru optimizarea imaginilor.
• Image Optimizer: un supliment gratuit pentru local.

TinyPNG

Acest instrument bazat pe browser optimizează imaginile folosind compresia inteligentă cu pierderi, reducând dimensiunea fișierului prin scăderea numărului de culori utilizate. (Dar nu vă faceți griji, nici nu veți observa!) Este gratuit și rapid de utilizat pentru PNG și JPEG.

ImageOptim

Aceasta este o aplicație gratuită pentru Mac care comprimă imaginile prin eliminarea balonării inutile, păstrând în același timp cât mai multă calitate a imaginii posibil.

JPEGmini

JPEGmini este o opțiune puternică cu plată care vă ajută să reduceți dimensiunea fișierului, păstrând în același timp calitatea și formatul. Are o încercare gratuită, așa că îi puteți testa înainte de a cumpăra.

REVOLTA

Radical Image Optimization Tool (RIOT) este o aplicație Windows gratuită pentru reducerea dimensiunii fișierului de imagine. Dispune de o vizualizare una lângă alta, astfel încât să puteți compara calitatea imaginii înainte și după compresie.

Image Optimizer, un supliment gratuit pentru local

Dacă utilizați Local ca mediu de dezvoltare local, puteți utiliza Image Optimizer Add-on pentru a comprima automat imaginile offline. Îți scanează site-ul pentru toate fișierele de imagine, economisind timpul de comprimare individuală a acestora și accelerând site-ul în acest proces.

5. Automatizați optimizarea imaginii cu un plugin WordPress

În acest moment, s-ar putea să începi să crezi că optimizarea imaginii este multă muncă – și poate fi! Dar există și o modalitate ușoară de a simplifica câțiva dintre acești pași, și asta este prin instalarea unui plugin de optimizare a imaginii pe site-ul dvs. WordPress.

Am câteva recomandări și fiecare are caracteristici unice. Dar, în general, un plugin de optimizare a imaginii vă va comprima și redimensiona imaginile atunci când încărcați pe site-ul dvs. WordPress. Aceasta înseamnă că puteți sări peste acești pași în loc să îi faceți manual, ceea ce va economisi mult timp.

Pentru a optimiza imaginile pe un site WordPress, recomand aceste plugin-uri:

• EWWW Image Optimizer Cloud
• Comprimați imagini JPEG și PNG
• Kracken.io
• Imaginează

EWWW Image Optimizer Cloud

Acest plugin WordPress vă va optimiza automat imaginile atunci când le încărcați pe site-ul dvs. sau poate, de asemenea, să optimizeze imaginile pe care le-ați încărcat în trecut. Acest lucru îl face incredibil de benefic dacă lucrați cu un site existent cu imagini neoptimizate.

Comprimați imaginile JPEG și PNG

Acest plugin WordPress de la echipa TinyPNG poate optimiza imaginile JPEG și PNG la încărcare. Dacă sunteți un fan al instrumentului bazat pe browser, simplificați procesul cu pluginul lor gratuit!

Kracken.io

Pluginul Kracken.io poate optimiza atât imaginile noi, cât și cele existente pe site-ul dvs. WordPress. De asemenea, acceptă atât modurile de compresie fără pierderi, cât și cu pierderi, oferindu-vă mult control asupra rezultatului final.

Imaginează

Acest plugin WordPress vă va ajuta să vă optimizați imaginile fără a pierde calitatea. Este, de asemenea, compatibil cu WooCommerce și NextGen Gallery, dacă utilizați aceste pluginuri.

Notă: Înainte de a alege un plugin, asigurați-vă că vă uitați la modul în care funcționează. Unii folosesc operațiuni de taxare pe server care pot cauza probleme pe site-ul dvs., în timp ce alții folosesc opțiuni FTP pentru a reduce sarcina pe serverul dvs. web.

6. Folosiți tehnica „blur up” pentru a încărca mai întâi o imagine de calitate inferioară

Chiar și după toți pașii anteriori de optimizare, există cazuri în care este posibil să lucrați cu fișiere de dimensiuni mari sau o mulțime de imagini pe o pagină, încetinind viteza site-ului. În aceste cazuri, uneori este util nu numai să optimizați imaginile, ci și să optimizați experiența de încărcare, astfel încât vizitatorii site-ului să creadă că fișierele dvs. media se încarcă mai repede decât sunt în realitate.

Despre asta sunt următorii doi pași – oferind aspectul unor imagini cu încărcare mai rapidă, astfel încât utilizatorii să nu se uite doar la o pagină goală în timp ce fișierele se încarcă.

O modalitate de a face acest lucru este să încărcați mai întâi o imagine de calitate inferioară (LQI). Încărcând o versiune mai mică a imaginii înainte de a încărca dimensiunea completă, îi oferă utilizatorului ceva la care să se uite în timp ce așteaptă toate detaliile. Acest lucru dă percepția unui timp de încărcare mai rapid, chiar dacă din punct de vedere tehnic, totul se încarcă în același ritm.

O modalitate populară de a face acest lucru este tehnica „blur up”, pe care o puteți învăța cum să o implementați cu acest tutorial despre CSS-Tricks.

7. Încărcați leneș imaginile site-ului dvs

Similar cu tehnica „blur up”, mai există un truc care vă va ajuta să dați aspectul unor imagini cu încărcare mai rapidă: Încărcare leneșă.

Când cineva ajunge pe site-ul tău, începe în partea de sus a paginii. Probabil că le va lua un moment pentru a derula întreaga pagină, mai ales dacă sunt logodiți. În loc să încerce să încarce toate imaginile simultan, încărcarea leneșă acționează sub presupunerea că utilizatorilor le pasă cel mai mult de conținutul pe care îl pot vedea. Deci, imaginile din vizualizarea browserului se încarcă complet primele, în timp ce celelalte imagini încarcă mai întâi un substituent, până când utilizatorul defilează la acea secțiune a paginii.

Încărcarea leneră este o tehnică excelentă în sine și chiar mai puternică atunci când este asociată cu restul acestor sfaturi de optimizare a imaginii! Și, este foarte ușor de făcut pe un site WordPress, datorită pluginului BJ Lazy Load.

Aceasta încheie ghidul meu pas cu pas pentru o performanță mai bună a site-ului prin optimizarea imaginilor! Pentru a vedea impactul pe care l-a avut asupra site-ului dvs., executați un alt test de viteză. Cum ai făcut?

Între un flux de lucru optimizat și instrumentele potrivite de optimizare a imaginii, veți putea vedea o performanță mai bună a site-ului din imaginile optimizate în cel mai scurt timp!

Treceți dincolo de imagini: aflați cum să îmbunătățiți viteza site-ului pentru o performanță extraordinară

Platforma de găzduire WordPress gestionată de Flywheel este optimizată pentru a face site-uri WordPress rapid, dar serverul dvs. este doar o piesă a puzzle-ului. Cu ajutorul suplimentului nostru Performance Insights, veți obține o privire aprofundată asupra performanței site-ului dvs. (astfel încât să știți exact unde să faceți îmbunătățiri!), în timp ce puteți urmări valorile în timp pentru a vedea când, dacă și cum lucrurile se schimbă.

AFLAȚI MAI MULTE

Acest ghid a fost scris de Tyler Stokes, un inginer al fericirii la Flywheel. Ajutăm creativii să-și optimizeze site-urile web în fiecare zi pentru performanțe fulgerătoare.

Faceți clic aici pentru a afla mai multe despre platforma de găzduire WordPress gestionată de Flywheel !