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;
}