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 din 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 (prin folosirea opțiunilor corecte „Export” din Photoshop) sau direct pe site-ul dvs. web (prin folosirea lazy load pentru a afișa 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ă, fără a sacrifica calitatea.

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. Și 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.)

Profitând de cele mai bune practici de optimizare a imaginii, veți menține dimensiunea fișierului mică și timpul de încărcare rapid, creând o experiență mai bună pentru vizitatorii site-ului dvs.

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ă per 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ă, este posibil să vi se plătească o taxă suplimentară sau, mai rău, site-ul dvs. să fie închis.

Prin optimizarea imaginilor, veți putea profita la maximum de spațiul de stocare al site-ului dvs. și veți 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). Câteva instrumente populare de testare a vitezei sunt:

• Google PageSpeed ​​Insights
• Instrumente Pingdom
• GTMetrix
• WebPageTest

Toate aceste instrumente 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.

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.

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.

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ă aibă un fundal 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ă facă bucle și de câte aveți nevoie cu adevărat pe o anumită pagină sau site.

3. Redimensionați imaginile înainte de a î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 sau redimensionâ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 precum Preview (pentru Mac), Paint (pentru Windows) sau Canva (un instrument de browser).

4. Comprimați imagini 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-ul dvs.: 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ă cu sursă deschisă 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 utilizând 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 programul de completare Image Optimizer pentru a comprima automat imaginile offline. Îți scanează site-ul pentru toate fișierele de imagine, economisind timpul de a le comprima individual ș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. Acest lucru înseamnă că puteți sări peste acești pași în loc să îi faceți manual, ceea ce va economisi mult timp.

Această metodă este bună și dacă construiți site-uri pentru clienți. Este o presiune mare pentru utilizatorii finali și creatorii de conținut să încerce să-și amintească fiecare pas al procesului de optimizare a imaginii. Instalând un plugin care va face cea mai mare parte a muncii pentru ei, veți contribui la asigurarea vitezei și a performanței site-ului pe care l-ați creat odată ce îl predați.

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

• EWWW Image Optimizer Cloud
• TinyPNG
• 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 optimiza și 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.

TinyPNG

Acest plugin WordPress de la echipa TinyPNG poate optimiza imaginile JPEG și PNG la încărcare. Dacă sunteți 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 plugin-uri.

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. Utilizaț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 dvs. 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 leneră.

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 leneșă 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 Smush.

Aceasta încheie ghidul nostru 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?

Cu instrumentele potrivite de optimizare a imaginii, veți putea vedea o viteză și o performanță mai bune a site-ului în cel mai scurt timp!