de Riccardo Canella

O introducere în optimizarea imaginii receptive cu HTML5 și Intersection Observer

O introducere in optimizarea imaginii receptive cu HTML5 si Intersection

Imaginile reprezintă adesea majoritatea octeților descărcați pe o pagină web și ocupă adesea o cantitate semnificativă de spațiu vizual. Prin urmare, optimizarea imaginilor poate produce frecvent unele dintre cele mai mari economii de octeți și îmbunătățiri ale performanței pentru site-ul dvs. web. Cu cât browserul trebuie să descarce mai puțini octeți, cu atât mai puțin timp va trebui să aștepte utilizatorul pentru redarea conținutului util pe ecran.

Optimizarea imaginii este atât o știință, cât și o artă. Este o știință, deoarece există multe tehnici și algoritmi bine dezvoltate care pot reduce semnificativ dimensiunea unei imagini. Este o artă pentru că nu există un răspuns definitiv.

Dar cum ne putem optimiza imaginile de pe mobil, pe lângă utilizarea magiei de imagine sau a oricărui alt instrument de optimizare web?

Elementul img

Elementul HTML5 a fost conceput pentru a oferi dezvoltatorului posibilitatea de a optimiza imaginile în funcție de rezoluția ecranului. Acest lucru se face prin două atribute, srcset și sizes. Cu o sintaxă foarte simplă, puteți instrui browserul să decidă care dintre dimensiunile imaginii sunt necesare:

ad-banner
<img srcset="https://www.freecodecamp.org/the-death-star-320w.jpg,
             https://www.freecodecamp.org/the-death-star-480w.jpg 1.5x,
             https://www.freecodecamp.org/the-death-star-640w.jpg 2x"
             src="https://www.freecodecamp.org/news/an-intro-to-responsive-image-optimization-with-html5-and-intersection-observer-2a4fbe1473c1/the-death-star-640w.jpg" 
alt="The Death Star">

În acest caz, browserul va alege imaginea cea mai potrivită pentru rezoluția sa. Dar, presupunerea este că imaginea ar trebui să fie afișată pe ecran complet (100vw). Aceasta nu este de obicei o presupunere îngrozitoare de făcut.

sizes atributul este folosit pentru a evita această problemă și, prin urmare, pentru a ajuta browserul să aleagă imaginea cea mai optimizată pentru acest caz. Puteți utiliza dimensiuni pentru a se potrivi cu aspectul CSS exact și pentru a spune browserului exact cât de mare va fi imaginea respectivă pe fiecare dimensiune a ecranului, potrivind modul în care funcționează punctele dvs. de întrerupere în proiectarea dvs.

Acest lucru se poate complica puțin și, sincer, ar putea fi puțin periculos. Puneți lucruri CSS în markup și știți cum merge. Poate fi automat sau injectat pe partea de server. Chiar și în acest caz sintaxa este într-adevăr foarte simplă:

<img srcset="https://www.freecodecamp.org/the-death-star-320w.jpg,
             https://www.freecodecamp.org/the-death-star-480w.jpg 1.5x,
             https://www.freecodecamp.org/the-death-star-640w.jpg 2x"
             src="https://www.freecodecamp.org/news/an-intro-to-responsive-image-optimization-with-html5-and-intersection-observer-2a4fbe1473c1/the-death-star-640w.jpg" 

alt="The Death Star">

Elementul de imagine

Există diferite formate pentru optimizarea imaginilor pentru web, cum ar fi webpși jpg2000. Dar nu toate browserele sunt capabile să le accepte – Internet Explorer, de exemplu. Acest lucru nu trebuie să ne împiedice să folosim formatul cel mai optimizat pentru majoritatea browserelor moderne.

Elementul imagine este o modalitate excelentă de a furniza surse alternative pentru fișiere imagine, astfel încât browserul poate alege în funcție de capacitățile dispozitivului. Sintaxa este foarte asemănătoare cu elementul

<picture>
  <source type="image/webp" >
  <source media=”(min-width: 320px)” srcset=”the-death-star-mn.jpg”>
  <source media=”(min-width: 465px)” srcset=”the-death-star-sm.jpg”>
  <source media=”(min-width: 650px)” 
          srcset=”the-death-star-md.jpg, 
                 the-death-star-lg.jpg 1.5x”
          
  >
  <img src=”the-death-star.jpg” alt=”Flowers” style=”width:auto;”>
</picture>

Dar pot folosi elementul peste tot?

Din pacate, nu. Browsere precum Internet Explorer 11 nu acceptă acest element.

O introducere in optimizarea imaginii receptive cu HTML5 si Intersection
Imagine sursă.

Dar există o soluție. O bibliotecă JS foarte mică vă permite să utilizați acest element, chiar și pe browsere neacceptate.

Leneș încărcând imaginile

Unul dintre cele mai răspândite și mai utile sfaturi pe care l-am întâlnit este să evit ca browserul să descarce toate imaginile la încărcarea paginii. Descărcați doar imaginile esențiale și încărcați leneș celelalte resurse. Există o mulțime de tehnici pentru încărcarea leneșă. Acestea depind de modul în care pagina este derulată sau de următoarea secțiune pe care utilizatorul ar putea să o viziteze.

Dacă ați mai scris un cod de încărcare leneș, este posibil să vă fi îndeplinit sarcina utilizând gestionare de evenimente, cum ar fi scroll sau resize. Această abordare este cea mai compatibilă între browsere. Cu toate acestea, browserele moderne oferă o modalitate mai performantă și mai eficientă de a face munca de verificare a vizibilității elementului. Aceasta se realizează prin intermediul API-ului Intersection Observer.

Intersection Observer este mai ușor de utilizat și de citit decât codul bazat pe diferiți gestionari de evenimente. Dezvoltatorii trebuie doar să înregistreze un observator pentru a viziona elemente, mai degrabă decât să scrie codul de detectare a vizibilității elementelor obositoare. Tot ce mai rămâne de făcut pentru dezvoltator este să decidă ce să facă atunci când un element este vizibil.

<img class="lazy" 
     src="https://www.freecodecamp.org/news/an-intro-to-responsive-image-optimization-with-html5-and-intersection-observer-2a4fbe1473c1/placeholder-image.jpg" 
     data-src="image-to-lazy-load-1x.jpg" 
     data-srcset="https://www.freecodecamp.org/image-to-lazy-load-2x.jpg 2x, 
     https://www.freecodecamp.org/image-to-lazy-load-1x.jpg 1x" alt="I'm an image!"
>

Cele trei piese relevante ale acestui markup sunt: class atribut și data-src și data-srcset atribute. Ultimele două sunt atribute de substituent care conțin adresa URL pentru imaginea pe care o vom încărca, odată ce elementul se află în fereastra de vizualizare.

document.addEventListener("DOMContentLoaded", () => {
 var lazyImages =[].slice.call(
  document.querySelectorAll("img.lazy")
 )
 if ("IntersectionObserver" in window) {
    let lazyImageObserver = 
      new IntersectionObserver((entries, observer) => {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");
            lazyImageObserver.unobserve(lazyImage);
          }
        });
      });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});

Codul este foarte simplu și ușor de depanat (acesta este un codepen pentru a vedea acest cod în acțiune), dar există o mare problemă. API-ul Intersection Observer nu este bine acceptat.

1611284826 948 O introducere in optimizarea imaginii receptive cu HTML5 si Intersection
Imagine sursă.

Va trebui fie să utilizați un polifund, sau implementați o încărcare leneșă bazată pe resize și scroll evenimente.

Încărcare progresivă a imaginii

Acesta este un mic sfat: când exportați imaginile (JPEG, GIF, PNG) puteți verifica opțiunea progresivă (de exemplu pe Photoshop sau Sketch). Imaginile sunt redate deja progresiv într-un browser web. Dar o imagine progresivă începe cu rezoluție mică și se îmbunătățește progresiv în timp.

Această tehnică este acum utilizată de aproape toată lumea, deoarece vă permite să afișați imediat o previzualizare a imaginii către utilizator și apoi să încărcați încet diferitele detalii (de exemplu Instagram). Această metodă vă permite să împiedicați utilizatorii cu o conexiune lentă să părăsească site-ul dvs., deoarece afișează un ecran alb.

Pilula finală

Întorcându-mă la web, am dat peste un minunat articol de José M. Pérez despre modul în care Medium optimizează și implementează încărcarea progresivă a imaginii.

Dacă ți-a plăcut articolul te rog bate din palme și urmărește-mă 🙂
Thx și rămâi la curent?
Urmăriți ultimele mele știri și sfaturi despre Facebook