Imágenes

Las imágenes representan un porcentaje muy alto del volumen total de un sitio web. Hay una tendencia a utilizar imágenes cada vez mayores en los sitios web y, desde una perspectiva sostenible, ésta es una mala práctica. De acuerdo con lo anteriormente mencionado respecto a procurar salirse del juego de la economía de la atención, os proponemos poner nuestra creatividad al servicio del bienestar del planeta: alejémonos de lo «llamativo» de poner mil imágenes y vídeos, cuestionemos también lo que el dios márketing nos impone... Sería bueno empezar preguntándonos de qué imágenes podríamos prescindir, pero os adelantamos también cuatro consejos muy básicos:

  • Reducid el volumen de imágenes que usáis en la web.
  • Reducid la calidad: a mayor compresión (y puede resultar imperceptible en términos de calidad), menor tamaño y menor impacto ambiental...
  • Reducid las dimensiones: una anchura y una altura duplicadas respecto a lo que finalmente se muestra significa aproximadamente cuatro veces más bytes.
  • Elegid el formato más adecuado y optimizado para cada tipo de imagen (ver comparativas a continuación).
  • Todas las imágenes deben estar en resolución 72 o máximo 93ppp (no tiene sentido que tengan mejor resolución ya que la pantalla no puede mostrar más que eso). PPP = Píxeles/puntos Por Pulgada, o lo que es lo mismo DPI = Dots Per Inch. No confundir con los Megapíxeles con los que describen el tamaño y calidad de sus sensores las cámaras fotográficas, nada que ver.
  • Usad plugins de optimización de imágenes.
  • Usad plugins de caché.

Y ¿qué imagen hay absolutamente en todas las webs? Empecemos por el logo. El proyecto The Low-tech Magazine llegó al extremo de modificar su logo para hacerlo más ligero, priorizando su contenido y no su estética. Entendemos que a todo el mundo nos enamora nuestro logo y que le hemos dedicado tiempo, esfuerzo y dinero como para cargárselo en un plis, pero sí podemos considerar un par de factores para optimizar su tamaño:

  • En su aplicación en la web usar siempre su versión monocroma (de un solo color).
  • Muchos logos se llevan muy bien con el formato GIF, que trabaja con color indexado (el número de colores que componen la imagen determina su tamaño). Como los logos suelen tener pocos colores y planos, el GIF puede ser una muy buena opción para reducir al máximo su volumen.
  • Valorar utilizar un inline SVG, tal como sugieren también desde The low-tech magazine, que es un formato escalable y ligero (ver apartado SVG en línea).

En The Low-tech magazine utilizan un carácter (una flecha) como logo, bajo el potente argumento de que «La identidad visual reclama tener consistencia conceptual más que uniformidad visual» («The identity calls for conceptual consistency over visual Uniformity»). ¡Ahí lo dejamos!

Para el resto de imágenes:

Imágenes interpoladas (dithered images) 

Si os atrevéis a revisitar estéticas «retro», podéis utilizar imágenes interpoladas (este término remite al método matemático que usa el software para calcular valores de gris a partir de intervalos de color de la imagen original). Es otro formato de color indexado pero únicamente con grises, con una estética a base de líneas de puntos muy característica. Hay que decir que es una solución de diseño no necesariamente óptima para ciertas imágenes y que, en el caso de The low-tech magazine, ha sido elegida para llamar la atención sobre el hecho del exceso de imágenes a todo color. Esta web es un referente que nos encanta mencionar por la forma en que trabaja el diseño poniendo la estética al servicio del concepto y del valor prevalente de la sostenibilidad ambiental.

SVG en línea (inline SVG) 

(traducido de The Low-tech magazine) 

Podemos utilizar el formato SVG (Scalable Vector Graphics, un lenguaje especializado para crear gráficos) como archivos de comandos (externalfile.svg) o bien podemos pegar su código en el archivo html como código en línea (< svg> ... < / svg>). Cualquier aplicación capaz de producir dibujos vectoriales debería poder exportarlos en formato SVG y, para obtener su código, podemos simplemente abrir el archivo en un editor de texto.

Los SVG en línea evitan peticiones de carga de imágenes en el servidor, y también tienen otra ventaja: se pueden personalizar con clases CSS. De este modo, para cualquier icono que requiera estados «hover» es ideal el formato SVG en línea. (Una nota: como los SVG son esencialmente peticiones de dibujo, la sintaxis de SVGS difiere del estilo de los elementos HTML. Leed más sobre SVG en MDN)

JPG vs. PNG

Ambos son formatos comprimidos que ofrecen suficiente calidad y muchas posibilidades para configurar el nivel de compresión, y por ello son los más habituales en la red. Pero no por ello son los óptimos para todos los casos en términos de volumen: PNG es lo que se llama un archivo con compresión sin pérdida o lossless (mantiene toda la información originaria pero es más grande) mientras que en el JPG la compresión con pérdidas (lossy) hace que el archivo sea más ligero pero pierda calidad.

Si necesitáis incluir imágenes fotográficas, utilizad el formato JPG preferiblemente, dado que podemos conseguir un tamaño menor, pero si necesitamos imágenes con fondo transparente, o iconos o gráficos poco complejos o lineales, es preferible utilizar el formato PNG, ya que a pesar de no estar comprimidas, por sí mismas deberían ocupar poco. Para ciertos tipos de imágenes, como hemos dicho antes, es preferible el uso del formato GIF.

Imágenes compiladas (Image sprites)
(traducido de The Low-tech magazine)

Las sprites de imágenes (o lo que hemos bautizado como imágenes compiladas) combinan varias imágenes pequeñas en una sola para minimizar las peticiones HTTP. A modo de corroboración: seis archivos de imágenes (150 x 150 cada uno) suman 9 KB, mientras que si los juntamos en una sola imagen combinada (150 x 900) obtenemos un fichero de 6 KB que sólo se carga una vez.

Una vez subida la imagen, el archivo CSS la configura como fondo y ajusta la parte de la imagen que debe mostrarse según la clase.

Elementos gráficos que es mejor evitar:


EVITEMOS


ALTERNATIVA

Imágenes o vídeos sin una función clara más que la puramente estética (fondos, marcas de agua, cabeceras...). El «québonito» deteriora el planeta.

Configurar la estética a partir de los elementos que sí son funcionales.

Sliders:
- Hacen que tu web vaya lento
- Suelen ser ignorados por completo
- Desplazan el contenido y obligan a hacer scroll
- No retienen la atención
- Aumentan el volumen de tu web
- En móvil arruinan la experiencia de usuari@
(Fuente: Anaislab.com)

Suprimirlos. Jugar con colores de fondo. Conseguir dinamismo con una composición estática (es la base del diseño impreso, sin ir más lejos).

Vídeos e imágenes grandes

Insertar los estrictamente necesarios y optimizarlos (ver apartado «Optimizar»)

Autorreproducción de vídeos: no asumamos que todo el mundo tiene interés en lo que colgamos en nuestra web. La persona que nos visita debe poder escoger y por tanto no es necesario generar tráfico y sobrecargar el servidor innecesariamente.

Desactivar la autorreproducción en todos los casos.

Los reproductores incrustados (embedded) contribuyen a incrementar el tráfico, incluso si el visitante no lo visualiza, porque hay que cargar el código externo.

Enlazar las imágenes o vídeos (tal vez a través de una imagen miniatura para hacerlo más atractivo) es un recurso más ligero.

Inclusión de publicidad de terceros, habitualmente consistente en imágenes, muchas veces animadas y que además nos dejan poca capacidad de incidencia en su tamaño ya que no lo elaboramos nosotros.

Establecer unas condiciones estrictas y claras de admisión de publicidad que contemplen su volumen. Eliminar por completo la publicidad.


RECURSOS

- Softwares como Gimp (retoque de imágenes) o Krita (dibujo) ofrecen posibilidades múltiples para reducir la medida de las imágenes, cambiar su formato o aplicar la interpolación en el proceso de guardar. Software privativo como Adobe Photoshop también ofrece opciones específicas para guardar los archivos con formato y compresión para web.
- Softwares como Inkscape nos permiten trabajar el formato vectorial SVG.
- Conoce las posibilidades del formato SVG (Scalable Vector Graphics) y el software Inkscape
- Editores de webs estáticas: Jekyll (popularizado por GitHub Pages), Hugo, Pelican, Sutty, Sketch o Publii (darrollado por la Free Software Foundation)
- Plugins de caché: WP Super Cache o W3 Total Cache
- Plugins de optimización de imágenes para Wordpress