Images

Mostrar correctamente las resoluciones de nuestras imágenes

¿Qué es Responsive Images?

Es una técnica que se basa en utilizar los atributos srcset, media, size del tag <img/> para poder tener diferentes versiones de las imágenes para diferentes dispositivos, permitiendo así tener una mejor performance ya que estaríamos mostrando realmente la imagen para esa resolución.

File Name	Size
responsive-images.jpg	30.7 KB
responsive-images-lg.jpg	24.1 KB
responsive-images-md.jpg	19.7 KB
responsive-images-sm.jpg	10.6 KB

En el caso que el atributo no este disponible, se toma por default el valor del src

SourceSet

Width (Ancho)

<img src="car.jpg" 
     srcset="car-240.jpg 240w, car-480.jpg 480w, car-960.jpg 960w" />

Density (Densidad)

<img src="car.jpg"
     srcset="car-1x.jpg 1x, car-2x.jpg 2x, car-3x.jpg 3x">

WebP Format

El WebP es un formato de imagen que está siendo desarrollado por Google. Su misión es la de ofrecer compresiones con y sin pérdidas para unificar las ventajas de los formatos JPEG, PNG y GIF tratando de reducir al máximo el tamaño que ocupan las imágenes que lo utilizan para intentar hacer la web más rápida.

SVG Format

Utilizar SVG para íconos, logos, son livianas, no dependen de los pixeles.Como SVG utiliza texto para formatear los motores de búsquedas pueden leerlo mejor que una imagen jpg, también podríamos agregar metadata.

Images CDN

Manejar las imágenes directamente con un CDN, teniendo todas las ventajas del mismo.

Permite definir directamente a tráves de la URL el ancho, alto y calidad de las imágenes.

Ejemplo URL: https://res.cloudinary.com/demo/w_300,h_200,c_crop/sample.jpg

Image and Video Upload, Storage, Optimization and CDNCloudinary

Image & Video Manager | Akamai

Casos de éxito

Lazy-Load

Lazy-loading es una técnica que consiste en no cargar un recurso mientras no sea necesario. Por ejemplo, en una página que muestra 20 imágenes y en nuestro celular pueden verse 5 a la vez, el resto no son visibles hasta que hacemos scroll. Sin lazy-loading, todas las imágenes son descargadas pese a no ser visibles aún, ralentizando la carga de la página en general. Usando la técnica de lazy-loading, las imágenes no visibles se irán descargando según vayamos bajando con el scroll y estas se muestren en pantalla.

Si no tenemos activado lazy-load y corremos algún auditor nos saldrá lo siguiente.

¿Cómo funciona?

Básicamente en el tag image en vez de utilizar src, utilizan data-src y a medida que van haciendo scroll se modifica mediante javascript la property data-src a src para realizar la petición.

<img data-src="images/celular.jpg" class="lazyload">

Implementación

Existen varias implementaciones tanto para react, angular, jquery etc.

La recomendada es directamente utilizar la API IntersectionObserver

Ejemplo google

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(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
  }
});

Casos de éxito

Chrome (Lazy Load)

La última versión de chrome soporta lazy load en los tags image y iframe directamente

chrome://flags/#enable-lazy-image-loading