Logo RSS

No descubro nada nuevo si comento en voz alta que nuestros sitios web tienen que pesar lo mínimo posible. Mejorará la velocidad para el usuario, nos ayudará con el SEO, y lograremos una fluida navegación en smartphone. ¿Dónde está casi siempre el cuello de botella?: En las imágenes y las fuentes. Por mucho HTML, CSS y Javascript, por muchas bibliotecas que añadas, nada será tan grande como una sola imagen. Contra las fuentes no podemos hacer nada, salvo minimizar su uso o enlazarlas desde un servicio externo (como un CDN). Pero respecto a las imágenes si podemos hacer algo. Y es aquí donde me voy a centrar. Como buenos diseñadores web vamos a dedicar un mínimo de esfuerzo a conseguir que esas imágenes se pongan a dieta. O, si no queda otra, vestirlas con un corsé para disimilar su figura.

Los trucos a mostrar son técnicas que he utilizado con muy buenos resultados. Pero no son los únicos. ¿Empezamos?

1 Básica: Optimizar imágenes

Nuestra casa debe empezar con unos buenos cimientos. No puedo saltarme este punto. Una imagen debe estar optimizada para pantallas, no para la impresión. Además, su tamaño tiene que estar acorde al espacio que ocupará. ¿Para qué necesitamos una imagen de 3000x3000 si irá en un div de 100x100?

Nunca uses una imagen descargada sin antes tratarla. Puedes revisar otros artículos donde hablo del tema.

Como optimizar tus imagenes por terminal

Optimizar imagenes en OS X

2 Color promedio

Una forma sencilla de disimular las cargas de imágenes es la de mostrar un color. Pero el color principal de la imagen.

Veamos un ejemplo para entenderlo, yo al cargar mi web muestro lo siguiente:

Imagen carga antes con color

Después, digamos pasado medio segundo, se carga la imagen.

Imagen carga después con color

Y listo. Mi usuario ha cargado la página de forma instantánea. Seguramente no habrá percibido que muchas de las imágenes no estaban cargadas, y yo he conseguido que el diseño no quede extraño en un primer vistazo.

Para que funcione esta técnica debes:

  1. Indicarle a la imagen las medidas.
  2. Envolver la imagen con un div.
  3. Buscar el color promedio y darselo como color de fondo al div.

En nuestra web se plasmaría de la siguiente forma.

<div style="background-color: #333">
    <img src="imagen.jpg" width="300" height="80">
</div>

¿Qué es el color promedio? Es el color medio entre todos los pixeles de la imagen. O el color que mejor representa a la imagen. Para encontrarlo puedes usar alguna herramienta online como Average color.

O puedes abrir el terminal y ejecutar:

convert tu_imagen.jpg -format %c -depth 8  histogram:info:histogram_image.txt
sort -n histogram_image.txt | tail -1

Te devolverá los colores en varios formatos: hexadecimal y estándar rgb.

39356: ( 11, 10, 18) #0B0A12 srgb(11,10,18)

3 Imagen de baja resolución

Otra forma de gestionar las imágenes, al menos mi favorita, es la de mostrar una imagen con muy baja calidad. Y cuando la web esté completamente cargada, ejecutar javascript para que sustituya esta por la imagen deseada.

Imagen optimizada

Es una forma suave entre la transición de la primera carga y el diseño que queremos mostrar. Lo negativo es que supone un trabajo extra por nuestra parte.

En nuestro HTML definimos la imagen procesada y la ruta de la imagen final en un atributo. Por ejemplo data-src.

<img data-src="imagen-final.jpg" src="miniatura.jpg">

En nuestro Javascript debemos tener presente el siguiente código.

// Script de https://varvy.com/pagespeed/defer-images.html
function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i = 0; i < imgDefer.length; i++) {
        if(imgDefer[i].getAttribute('data-src')) {
            imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
        }
    }
}
window.onload = init;

La dificultad no reside en nuestro HTML y Javascript, sino a la hora de procesar las imágenes. Necesitarás de la ayuda de un editor de imágenes. O un diseñador web que haga el trabajo sucio 😈.

En mi caso utilizo un script de terminal. Si quieres utilizarlo pega lo siguiente en tu .bashrc o .zshrc.

optimizarParaWeb() {
   mogrify -path $3 -filter Triangle -define filter:support=2 -thumbnail $2 -unsharp 0.25x0.08+8.3+0.045 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -blur 0x6 $1
}

Y ejecuta.

optimizarParaWeb imagen.jpg 500 directorio-salida/

Eso es todo. Si conoces otras formas de mejorar el peso de nuestras imágenes, no dudes en dejar un comentario.