L; arta d; optimizați imaginile pentru alegerea pe web a formatului, compresiei și celor mai bune practici

Imaginile sunt elementele care cântăresc cel mai mult pe paginile web. Cu toate acestea, imaginile sunt esențiale pentru a vă prezenta articolele sau produsele (dacă sunteți comerciant electronic). Dacă doriți să îmbunătățiți performanța și viteza de încărcare a site-ului dvs. web, trebuie să aveți o prioritate: reduceți greutatea imaginilor dvs. și numărul de solicitări HTTP asociate acestora. Aceasta include atât imagini integrate în conținutul dvs., cât și imagini care fac parte din designul site-ului dvs. web (siglă, pictograme etc.).

imaginile

Acest articol este dedicat optimizării imaginilor pentru web. L-am împărțit în mai multe părți. În primul rând, vom reveni la cele trei formate principale de imagine de pe web: JPEG, GIF și PNG. Care sunt caracteristicile fiecăruia dintre aceste formate? Când să se favorizeze unul peste celălalt? Care sunt constrângerile asociate fiecărui format? Răspundem la toate aceste întrebări.

Apoi oferim trei sfaturi pentru a vă salva imaginile pentru web și a le reduce greutatea și pentru a optimiza performanța site-ului dvs. web (în ceea ce privește viteza de încărcare). În cele din urmă, discutăm pe scurt câteva tehnici pentru a reduce numărul de solicitări HTTP legate de imagini atunci când încărcați paginile dvs. web (sprite, CSS3, URI-uri de date).

Gata să vă optimizați imaginile pentru web ?

Căutați noi bănci de imagini pentru a îmbunătăți vizualele site-ului dvs. web? Vă invităm să descoperiți Top 10 băncile noastre de imagini și site-urile foto.

Alegeți formatul potrivit pentru imaginile dvs.: JPEG sau GIF sau PNG ?

Există trei formate principale de imagine pe internet: format JPEG, format GIF și format PNG. Acestea sunt singurele trei formate care se afișează corect pe toate browserele. Vă vom prezenta principalele puncte tari și puncte slabe ale fiecăruia dintre aceste formate, contextul de utilizare al acestora, sfaturi pentru a le utiliza bine și cum să vă optimizați imaginile pe aceste diferite formate.

Format JPEG (de înaltă calitate, scăzut compresibil)

Formatul JPEG a fost creat în 1986, devenind cel mai vechi format. Acest format este ideal pentru fotografii (acesta este formatul utilizat de majoritatea camerelor digitale) și mai general pentru imaginile care utilizează un spectru foarte larg de culori și contraste (peste 16 milioane de culori gestionate). Pe de altă parte, comprimarea unui JPEG duce la pierderea informațiilor (spre deosebire de formatul PNG). Când o imagine JPEG este de calitate scăzută, deoarece este prea comprimată, se afișează (imagine pixelată și neclară). Formatul JPEG își pierde calitatea destul de rapid la compresie. Mai mult, algoritmul utilizat pentru a defini informațiile care trebuie șterse în caz de comprimare nu este foarte eficient. Informațiile suprimate sunt adesea selectate în zonele cu contrast scăzut ale imaginii. Dacă imaginea dvs. conține diferențe mari de contrast pixel-la-pixel, redarea va fi slabă: unele zone vor fi lăsate intacte în compresie, iar altele vor fi suferit o pierdere foarte vizibilă de informații ca o consecință. Care, dintr-o dată, creează un contrast și efecte nedorite. Cu cât imaginile dvs. conțin culori și culori mai distincte, cu atât greutatea JPEG este mai puțin compresibilă.

În ciuda acestor defecte, JPEG rămâne formatul emblematic al web. În special, deoarece permite redarea foarte satisfăcătoare a imaginilor de înaltă calitate și oferă o densitate a informațiilor mai mare decât alte formate. Concret, veți avea mai multe informații într-un JPEG de 500kb decât într-un PNG de 500kb. Această densitate a informațiilor face posibilă obținerea unor imagini bogate vizual și foarte calitative pentru o greutate optimizată.

Optimizarea imaginilor site-ului dvs. web este una dintre principalele tehnici de reducere a timpului de încărcare a paginilor site-ului dvs. Pentru a merge mai departe și dacă site-ul dvs. este sub WordPress, descoperiți 9 tehnici pentru a îmbunătăți viteza de încărcare a site-ului dvs. WordPress.

Vă recomandăm să utilizați funcția „Salvați pentru web” Photoshop pentru a testa diferența de calitate între imaginile JPEG în funcție de dimensiunea și nivelul de compresie pe care le alegeți. Într-adevăr, atunci când salvați o imagine în Photoshop, aveți de ales între „Salvare ca” și „Salvare pentru web”. Dacă faceți clic pe „Salvați pentru web”, Photoshop vă oferă funcții pentru optimizarea imaginii și ajustarea calității. O funcție de previzualizare vă permite să vedeți imediat rezultatul optimizărilor dvs. Scopul funcției „Salvați pentru web” este de a reuși să combinați o calitate bună și o greutate redusă.

De asemenea, trebuie să știți că majoritatea JPEG-urilor de pe internet sunt JPEG-uri progresive. Aceasta înseamnă că imaginea începe să se afișeze în calitate slabă pe pagină înainte de a apărea în starea sa normală. Aceasta permite paginii să se încarce mai repede. Toate browserele acceptă JPEG-uri progresive, dar unele necesită mult timp pentru a afișa imagini. Redarea sau nu a unui JPEG progresiv depinde și de dispozitivele de redare (și de procesorul lor). De exemplu, JPEG-urile progresive (până acum) nu funcționează pe Mobile Safari, browserul implicit utilizat pentru iPhone și iPad. În ciuda acestor câteva probleme de asistență, JPEG progresiv este încă o modalitate bună de a optimiza experiența utilizatorului și de a comprima JPEG fără a pierde informații.