Optimizare imagine Marketing ZeroMoment

viteza de încărcare a unui site web este unul dintre cei mai importanți factori în optimizarea site-ului nostru web. De la Google, ei au arătat în mod deschis în numeroase ocazii că acordă din ce în ce mai multă atenție acestui factor și, prin urmare, este unul dintre numeroșii factori SEO On Page care afectează poziționarea site-urilor noastre web. În acest sens, optimizarea imaginii are multe de spus, deoarece aceste elemente sunt, împreună cu videoclipurile, cele mai grele resurse și, prin urmare, cele care pot afecta cel mai mult performanța proiectului nostru online.

• 1 Optimizarea imaginii: dimensiuni
• 2 Optimizarea imaginii: greutate
• 3 Optimizare imagine: formate
  • 3.1 PNG vs JPG: compresie
    • 3.1.1 .JPG
    • 3.1.2 .PNG
  • 3.2 PNG vs JPG: transparență
    • 3.2.1 .JPG
    • 3.2.2 .PNG
• 4 Compresoare de imagine: Optimizarea imaginilor pentru web
  • 4.1 TinyJPG + TinyPNG
  • 4.2 Kraken
  • 4.3 Compressor.io
• 5 Lista compresoarelor de imagine
• 6 Probleme la optimizarea imaginilor sau a vitezei de încărcare?

Optimizarea imaginii: dimensiuni

Când vorbim despre rezoluția optimă a unei imagini, este important de reținut că una dintre principalele probleme pe care le găsim în multe site-uri web este că imaginile sunt afișate la o dimensiune mai mică decâtdimensiunile efective»A imaginii în sine. Aceasta înseamnă că, de exemplu, dacă afișăm o imagine pe ecran la 100 * 100px, dar imaginea este într-adevăr 200 * 200px (și cântărește ceea ce ocupă acea dimensiune), vom pierde o posibilitate semnificativă de reducere a greutății.

Să aruncăm o privire mai bună la un exemplu grafic:

Acesta este un web care prezintă două imagini. Una în stânga și una în dreapta. Dacă ne concentrăm pe imaginea din stânga, vedem că se potrivește perfect și claritatea ei este incontestabilă.

Dacă cercetăm codul sursă prin inspectorul de elemente al browserului, vedem următoarele:

Imaginea are un 600 * 499 pixeli „dimensiune sau dimensiune reală”. Dar trebuie să aibă acele dimensiuni pentru a ocupa întregul container în care este introdus? Să investigăm puțin mai mult:

În roșu vedem că imaginea are dimensiunea reală menționată mai sus. În verde, am marcat stilul CSS asociat cu imaginea, unde se vede clar că dimensiunile pot varia în funcție de dispozitivul de pe care accesăm acest site web.

Imaginea trebuie să aibă acea flexibilitate și să se adapteze la toate rezoluțiile posibile ale ecranului. Cu toate acestea, ferește-te de dimensiunea excesivă pe care am pus-o pentru a satisface nevoia de adaptare.

Avem un ultim punct de verificat.
Cât spațiu are «container imagine«?

Folosind încă o dată inspectorul de articole al browserului, am descoperit următoarele:

„Dimensiunea containerului” este mai mică decât „dimensiunea reală a imaginii”:

Container = 467 * 388 pixeliVS.
Dimensiunea reală = 600 * 499 pixeli

Imaginea este supradimensionată în comparație cu containerul său. Calificăm excesiv imaginile cu o calitate excesivă și acest lucru are un impact direct asupra greutății imaginilor și, prin urmare, asupra vitezei de încărcare a web-ului.

Dacă luăm în considerare faptul că această lipsă de optimizare poate fi extrapolată la toate imaginile dintr-un URL, acesta este momentul în care începem să fim conștienți de cantitatea de greutate pe care am putea-o economisi și de viteza pe care am putea-o câștiga dacă am face acest lucru. În mod logic, dacă adăugăm această circumstanță la greutatea tuturor adreselor URL ale unui site web, dezastrul poate fi semnificativ.

Din acest motiv, înainte de a utiliza unul dintre compresoarele de imagine pe care le vom vedea mai jos, Este important să adaptăm dimensiunile imaginii la dimensiunea maximă pe care o vom afișa pe site-ul nostru web.

Optimizarea imaginii: greutate

În ceea ce privește greutatea: alegerea formatului potrivit pentru imagini este esențială. În acest sens, Google recomandă formate pe care le numește „următoarea generație” în instrumentul propriu-zis. PageSpeed ​​Insights

Formatele JPEG 2000, JPEG XR și WebP comprimă imaginile mai bine decât formatele PNG sau JPEG, făcându-le să se descarce mai repede și să consume mai puține date.

Google PageSpeed ​​Insights

După cum afirmă Google, aceste formate oferă o compresie excelentă a imaginii, dar trebuie să ținem cont de faptul că este posibil să nu fie cea mai bună opțiune în funcție de ce browsere. Mai jos vă lăsăm acces direct la tabelele de compatibilitate ale fiecăruia dintre ele:

• JPEG 2000
• JPEG XR
• WebP

După cum se poate vedea în aceste tabele de compatibilitate, deși aceste formate au un grad mai ridicat de compresie fără pierderi, ele nu sunt, deocamdată, acceptate de marea majoritate a browserelor.

Din fericire, avem la dispoziție o multitudine de instrumente de compresie a imaginilor care ne pot ușura viața atunci când vine vorba de reducerea greutății imaginilor noastre, fără a reduce calitatea acestora.

Deci, deocamdată, va fi timpul să continuăm să folosim formatele tradiționale pentru a evita problemele de compatibilitate, optimizând imaginile cu compresoare de imagine precum cele pe care le vom vedea mai jos.

---