Seleccionar página

Recientemente he encontrado un interesante artículo en inglés, así que me me hago los siguientes apuntes a modo de resumen

 

Formatos de imagen

La elección del formato de imagen, puede ser realmente importante, aunque por desgracia, no todos los navegadores, admiten todos los tipos de formato de archivo.

Para comprobar la compatibilidad de los distintos formatos en cada uno de los navegadores, podemos emplear Can I use… Support tables for HTML5, CSS3, etc

WebP

Comparado con JPG y PNG, ofrece buena calidad con una reducción de tamaño muy importante, por desgracia, hay ciertas versiones de navegador, que no soportan el formato.

Para salvar este problema, podría incluirse una imagen alternativa mediante srcset.

<!--
Se establecen los archivos de imagen en el orden de preferencia en srcset
La imagen alternativa se incluye en src, para los navegadores que no la soportan
-->

<img
 srcset="imagen.webp, imagen.jpg"
 src="imagen.jpg"
 alt="Imagen"
/>

 

 

Compresión de imágenes

En mi caso particular, llevo mucho tiempo utilizando TinyPng para comprimir las imágenes png y jpg. Aunque supongo que aumentando la compresión con Photoshop, se pueden conseguir resultados similares.

Muestras de imágenes:

Imagen JPG salvada con Photoshop en calidad alta, 8. 266 KB

La imagen anterior, comprimida con TinyPng 179KB

Webp: La misma imagen salvada con Photoshop, calidad 75 Alta: 106KB

Avif: Imagen salvada con Photoshop, calidad 75 158KB

(Es posible que por problemas con un plugin de imágenes, no se vea correctamente la imagen avif)

WordPress

WordPress no permite por defecto la subida de ciertos tipos mime, por lo que deberás encontrar una solución a este problema, ya sea modificando functions.php u otra más sencilla, creando un fragmento de código con algún tipo de plugin como Code Snippets:

/* Compatibilidad archivos de imagen */
function compatibilidad_archivos_imagen( $mime_types ) {
$mime_types['webp'] = 'image/webp';
$mime_types['heic'] = 'image/heic';
$mime_types['heif'] = 'image/heif';
$mime_types['heics'] = 'image/heic-sequence';
$mime_types['heifs'] = 'image/heif-sequence';
$mime_types['avif'] = 'image/avif';
return $mime_types;
}
add_filter( 'upload_mimes', 'compatibilidad_archivos_imagen', 1, 1 );

 

 

 

Responsive images o imágenes adaptables

Empleo de diferentes tamaños de imagen en función del dispositivo empleado por el usuario.

Se podría implementar de la siguiente manera:

<img src="small.jpg"
  srcset="medium.jpg 800w,
          large.jpg 1200w,
          xlarge.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Responsive Image">

 

Lazy Loading o carga diferida

Se puede posponer la carga de imágenes hasta que estas vayan a ser visibles para el usuario. Se puede realizar esta implementación mediante el atributo loading="lazy" de la siguiente manera:

<img src="imagen.jpg" alt="Imagen" loading="lazy">

 

Precarga

Se puede realizar la precarga de la imagen, para tratar de reducir el tiempo de carga necesario:

<head>
  <link rel="preload" href="imagen.jpg" as="imagen">
</head

 

Sprites

Uso de sprites de imágenes, para la carga de una sola imagen, conteniendo distintas imágenes, iconos, etc.

/* CSS usando sprites */
.icon {
  background-image: url("icons-sprite.png");
  background-repeat: no-repeat;
}

.like-icon {
  background-position: 0 0;
  width: 24px;
  height: 24px;
}

.comment-icon {
  background-position: -24px 0;
  width: 24px;
  height: 24px;
}

.share-icon {
  background-position: -48px 0;
  width: 24px;
  height: 24px;
}