Actualizat: 26 februarie 2019 //

În ultimii 5 ani, dimensiunea unei pagini web medii a crescut treptat, la fel și dimensiunile imaginilor utilizate.

lentă

Dimensiunea medie a paginii a depășit recent 3 Mb!

Optimizarea imaginilor este cea mai mare victorie în ceea ce privește viteza site-ului web.

Tipuri de formate de imagine

Iată cele mai populare formate de imagine pentru web:

JPG (cunoscut și sub numele de JPEG)

JPG-urile sunt cel mai popular tip de fișier pentru imaginile de pe web. JPG-urile sunt perfecte pentru fotografii sau imagini complexe care conțin o mulțime de culori, umbre, gradiente sau modele complexe. JPG-urile se descurcă bine cu aceste tipuri de imagini, deoarece JPG-urile au un palet de culori uriaș cu care să lucreze. Au pierderi, sunt slabe la zone cu contrast ridicat, la margini.

PNG (Grafică de rețea portabilă)

PNG-urile au fost create ca înlocuitor pentru GIF-uri în 1996. Sunt cele mai potrivite pentru imagini cu puține culori. Dacă utilizați Adobe Photoshop, probabil că ați avut opțiunea de a salva o imagine ca PNG-8 sau PNG-24.
PNG-8 are o dimensiune mai mică, dar are o paletă de culori limitată de 256 de culori.
PNG-24 nu are restricții privind paleta de culori, dar dimensiunea fișierului va fi mai mare.

PNG-urile sunt adesea folosite pentru logo-uri, deoarece logo-urile necesită de obicei transparență și trebuie să aibă o calitate ridicată.

GIF-urile erau populare în urmă cu mulți ani, utilizate în principal pentru animații. GIF-urile au o paletă de culori limitată de 256 și tind să aibă dimensiuni mai mari.

SVG (grafică vectorială scalabilă)

Deoarece SVG-urile sunt grafică vectorială, acestea sunt de dimensiuni reduse și se afișează frumos pe ecranul retinei. SVG-urile pot fi folosite și în linie în HTML, ceea ce va salva o cerere HTTP. De asemenea, pot fi inserate ca imagini obișnuite.

Optimizarea imaginilor

Reduceți dimensiunea fizică a imaginii (dimensiunea fotografiei)

Puteți vizualiza dimensiunile imaginii deschizând fișierul în Photoshop și vizualizându-l la 100%. Sau puteți, de asemenea, să faceți clic dreapta pe imagine pe Finder (pe Mac) și să vizualizați informații:

Va afișa dimensiunile și dimensiunile imaginii. Fotografia de mai sus arată că această imagine a fost făcută cu un iPhone și are dimensiunea de 3264 x 2448. Este mult prea mare pentru un site web. Majoritatea telefoanelor și a camerelor digitale fac fotografii mari, care au dimensiuni și greutate mari și trebuie reduse.
Dimensiunea imaginii potrivită pentru un site web depinde de tema pe care o utilizați. De exemplu, tema WordPress Default Twenty Seventeen listează Specificații rapide cu dimensiunile exacte ale imaginii recomandate. Dimensiunea recomandată a imaginii recomandate este de 2000 px lățime și 1200 px înaltă. Lățimea coloanei principale (pentru o secțiune Blog, de exemplu) ar trebui să aibă o lățime de până la 740 px cu aspectul unei coloane.

Pentru a modifica dimensiunea fizică a imaginii, folosiți Photoshop sau un alt program la alegere.

Dacă preferați Photoshop, selectați Imagine -> Dimensiune imagine, apoi reduceți dimensiunile (lățimea/înălțimea) imaginii.

De asemenea, puteți utiliza WordPress Plugin - Imsanity pentru a dimensiona automat imaginile la încărcare. Acest lucru ar fi util dacă aveți utilizatori de site care încarcă direct dimensiuni mari de imagini pe site.
Pluginul permite setarea lățimii/înălțimii maxime pentru imaginile încărcate.

Salvați imaginea în mod corespunzător pentru a reduce dimensiunea fișierului

(Acest lucru afectează greutatea fișierului și cât spațiu ocupă pe hard disk-ul computerului și/sau pe serverul dvs. web.
Dacă utilizați Photoshop, există o comandă numită „Salvați pentru web”. Această comandă optimizează imaginile pentru a fi afișate online. Comanda regulată „Salvare” salvează imaginile de 2-3 ori mai mari în dimensiune.
Pentru fotografiile cu multe culori utilizați formatul JPEG și, dacă doriți transparență în imagine, alegeți formatul PNG.

Exemplu de bază JPEG:

Exemplu JPEG progresiv:

Comprimați fișierul imagine (eliminați detaliile inutile ale imaginii)

Există 2 tipuri de compresie a imaginii: Lossy și Lossless.
Compresie cu pierderi elimină unele date de pixeli și metadatele de imagine, cum ar fi cât de mare este imaginea, când a fost creată, rezoluția culorii etc. Toate aceste detalii se adaugă greutății imaginii și pot fi eliminate pentru a reduce dimensiunea imaginii. Compresia cu pierderi oferă cea mai mare economie de dimensiune, fără a afecta calitatea vizibilă pentru ochiul uman. Aș recomanda utilizarea acestuia peste Lossless, cu excepția cazului în care aveți un site de fotografie și trebuie să păstrați aceste detalii mai fine.
Fara pierderi (așa cum sugerează și numele) elimină, de asemenea, metadatele de imagine, dar nu elimină pixeli și doar le comprimă. Compresia fără pierderi are ca rezultat dimensiuni mai mari ale imaginii.

Puteți utiliza o interfață web, cum ar fi TinyPNG sau Kraken.io. Vă permite să trageți și să plasați imagini de pe computer și apoi să descărcați versiuni optimizate, pe care apoi le puteți încărca pe site-ul dvs.

Pentru a automatiza procesul, TinyPNG și Kraken.io, ambele au plugin-uri WordPress, care vor comprima automat imaginile în timpul încărcării pe site-ul dvs. Ambele servicii au un plan gratuit care permite optimizarea până la un anumit număr de imagini în fiecare lună.

Un alt plugin WordPress popular pentru optimizarea imaginilor este EWWW Image Optimizer. Versiunea gratuită utilizează compresia Lossless.

Toate aceste pluginuri permit opțiunea de optimizare în bloc. Optimizarea în bloc va optimiza toate imaginile existente pe site. Aș recomanda să faceți mai întâi o copie de rezervă. De asemenea, puteți merge la biblioteca dvs. media în wp-admin și puteți optimiza imaginile una câte una.

Testați viteza site-ului dvs. web înainte și după optimizarea imaginii și vedeți dacă obțineți o dimensiune a paginii mai mică și un timp de încărcare mai rapid.

Dacă doriți să vă îmbunătățiți viteza site-ului, chiar mai mult, citiți 10 moduri de a vă accelera site-ul.