Optimizarea încărcării imaginilor pe un site web SoftFluent
Paginile web sunt din ce în ce mai grele în fiecare an. Pentru a vă convinge de acest lucru vă puteți uita la această grafică realizată de Tammy Everts pe blogul Soasta.
După cum se poate vedea, imaginile reprezintă puțin peste 60% din greutatea totală a paginii. Acest lucru se datorează faptului că conexiunile sunt din ce în ce mai rapide și astfel constructorii de site-uri web își permit să adauge din ce în ce mai multe imagini pentru a-și ilustra paginile. Din păcate, această greutate este însoțită de câteva puncte negative, inclusiv:
- Transferul de imagini ocupă lățimea de bandă a serverului
- Încărcarea paginilor durează mai mult
- Costuri suplimentare pentru găzduire dacă plătiți pentru volum (stocare și lățime de bandă)
- Costuri suplimentare pentru client dacă plătim în funcție de volum
Cum se remediază acest lucru ?
Comprimă imagini
Prima soluție este de a reduce dimensiunea imaginilor, menținând în același timp o calitate acceptabilă. Pentru a face acest lucru, trebuie să utilizați formate care oferă rate de compresie bune și care sunt acceptate de diferitele browsere. Formatele PNG sau JPG sunt candidați buni. Datorită diferitelor tehnici, cum ar fi reducerea paletei de culori a imaginii, este posibil să se obțină rate de compresie mai bune fără a pierde din punct de vedere vizual calitatea (nu uitați întotdeauna să verificați redarea). Există diferite servicii web sau software pentru comprimarea imaginilor: tinyjpg, tinypng, jpegmini, compressor.io. Dacă utilizați Grunt, Gulp sau orice altă soluție bazată pe Node, există și soluții: imagemin (Node), grunt-contrib-imagemin (Grunt), gulp-imagemin (Gulp).
În exemplul de mai jos, a doua imagine este aproape De 3 ori mai ușor:
O altă soluție este utilizarea imaginilor vectoriale atunci când este posibil și există un câștig. O imagine vectorială descrie imaginea cu primitive geometrice (puncte, linii, curbe Bézier etc.). Prin urmare, înțelegem că o imagine complexă poate fi mai grea în vector decât în pixelat (Bitmap/Raster). Marea majoritate a browserelor acceptă formatul SVG (sursă: Pot folosi). De exemplu, logo-ul SoftFluent (în partea stângă sus a acestei pagini) este un SVG, cu o rezervă în caz de eroare a imaginii PNG.
Furnizați o imagine la dimensiunea corectă
Al doilea pas este de a oferi o imagine la dimensiunea corectă. Nu are rost să oferiți o imagine care are o lățime de 1000 px, apoi va fi redimensionată la 200 px prin CSS. Acest lucru este foarte ușor pentru o imagine de dimensiune fixă, dar atunci când doriți să creați un site receptiv, este mai dificil să trimiteți cea mai bună imagine. HTML5 oferă în continuare soluții, în special cu atributul srcset, permițând browserului să încarce imaginea cea mai potrivită pentru client utilizând dimensiunea ecranului și, de asemenea, densitatea pixelilor: