Guía de optimización de imágenes

En un artículo anterior hablábamos sobre el SEO on page y dos de los puntos que trataba eran, la optimización de imágenes y el tiempo de carga, ambos van estrechamente unidos ya que uno de los factores influyentes en el tiempo de carga es la optimización de imágenes.

En el tutorial voy a diferenciar entre optimización de imágenes básica y optimizaciones avanzadas. Las básicas todo el mundo las puede hacer de forma muy sencilla, en WordPress incluso hay plugins que realizan esta tarea por nosotros. Las optimizaciones avanzadas requieren de conocimientos básicos de CSS y esto puede ser un problema para algunos, de todas formas trataré de explicarlo lo más detalladamente que pueda.

Optimización de imágenes básica.

Evitar reescalado con HTML con propiedades with y height.

Uno de los errores más comunes es emplear imágenes reescaladas con HTML, es decir, emplear imágenes de un tamaño mayor a las dimensiones que se especifican después en el código HTML.

Veamos un ejemplo para entenderlo mejor. Imaginemos que tenemos una imagen que se llama coche-250x250.jpg de dimensiones 250×250 pixels y en nuestro código HTML queremos colocar esta imagen en un hueco de 150×150 pixels.

<img class="thumbnail" width="150" height="150" alt="imagen no optimizada" src="http://web.com/images/coche-250x250.jpg>

Cómo vemos en el código, hemos especificado el ancho (width) y el alto (height) a 150 pixels con código HTML, mientras que las dimensiones de la imagen recordemos que eran de 250×250 pixels. Esto no es óptimo porque una imágen de 250×250 pixels es más pesada y lleva más tiempo descargarla que una de 150×150 pixels. Para optimizar esto, como ya estaréis pensando, hay que emplear una imagen de 150×150 pixels, es decir, del mismo tamaño que el hueco donde queremos poner la imagen.

Debo aclarar que yo no estoy diciendo que no se usen las propiedades with y height, yo digo que hay que usarlas correctamente, es decir, emplearlas de manera que se ajusten al tamaño real de la imagen.

Eliminar datos innecesarios de imágenes y comprimirlas al máximo.

Otro factor importante es el tamaño de las imágenes, ya que cuanto más pesadas, más tiempo necesita su carga. La mejor opción para reducir el tamaño de las imágenes que vayamos a usar en nuestra web es emplear el servicio de Yahoo conocido como Smush It.

Podemos acceder a a esta web a través del enlace http://www.smushit.com/ysmush.it/ y empleando el uploader subimos nuestras imágenes a optimizar para en pocos segundos tener un archivo zip que contiene las imágenes optimizadas listo para descargar.

Debo aclarar que usando Smush It no se pierde calidad de la imagen, sólo se eliminan metadatos innecesarios y después se usa el algoritmo de mayor compresión para generar las nuevas imágenes optimizadas.

Para WordPress existe el plugin WP Smush.it que se encarga de optimizar las imágenes de forma transparente, sin que tengamos que intervenir.

Emplear efecto Lightbox para cargar imágenes de gran tamaño o resolución.

Agregar directamente a nuestra página web imágenes de alta resolución demorará en exceso el tiempo de carga, por ello es preferible cargar imágenes en miniatura de estas, que enlacen a las imágenes de alta resolución.

Dentro de esta medida de optimización es recomendable emplear el efecto Lightbox, que consiste en cargar la imagen de gran resolución en un pop-up o ventana emergente al hacer click en la miniatura. Esto nos permite ver la imagen sin abandonar el artículo que estemos leyendo.

Para WordPress existen multitud de plugins que se encargan de añadir este efecto a las imágenes e incluso otros elementos como videos.

Optimización de imágenes avanzada.

Reemplazar imágenes con gradientes por sus respectivo código CSS3.

Hoy en día aun se siguen viendo barras de menú, barras de cabeceras, barras de pie de página, etc… que emplean una imagen y la propiedad repeat para establecer un gradiente de fondo. El código CSS de estas barras es algo parecido a:

background: url("images/gradient_bg.png") repeat-x;

Podemos prescindir de estas imágenes y emplear el código CSS3 correspondiente, para esto podemos echar mano de una excelente herramienta online que nos permite o bien elegir los parámetros de nuestro gradiente al más estilo Adobe Photoshop o la opción de subir la imagen del gradiente y la herramienta genera automáticamente el código CSS3 (con diferentes versiones para los diferentes navegadores). Por ejemplo, el código CSS que pusimos antes se podrá remplazar por uno que no emplease imágenes, siendo el propio navegador quien generase el gradiente a partir un código CSS3 como:

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 59%,#7db9e8 100%);

La página de la herramienta en cuestion es: http://www.colorzilla.com/gradient-editor/

Uso de sprites CSS para las imágenes.

En las webs es muy común tener iconos (de calendario, de autor, de búsqueda, de RSS, etc…), estos iconos suelen venir en imágenes separadas, es decir un archivo de imagen para cada icono. Esto se traduce en que si necesitamos mostrar 10 iconos, tendremos que hacer 10 peticiones a 10 URLs diferentes, lo cual, a parte de incrementar el tiempo de carga también incrementa el uso de recursos de nuestro servidor o VPS.

El problema anterior se soluciona con el uso de sprites CSS, que no son más que que una colección de imágenes combinadas en una sola imagen. Por ejemplo en el caso de antes que cargábamos 10 imágenes, ahora al estar combinadas emplearemos sólo una imagen, por lo que con una única petición a una URL tendremos todos los iconos y al mismo tiempo se disminuye la carga del servidor.

Debemos tener en cuenta que los sprites CSS tiene una limitación, y es que no sirven para establecer fondos con la propiedad repeat de CSS.

Entender cómo funcionan los sprites CSS puede ser lioso al principio, sobre todo para especificar la posición del área que queremos recortar, pero una vez que se entiende el concepto es muy sencillo. En esta guía no voy a explicar paso a paso cómo hacer un sprite CSS ya que será el objetivo de otro futuro tutorial, pero los que tengáis curiosidad y no os importe leer en inglés está bien explicado aquí.

Cargar imágenes desde un CDN.

Hace tiempo que se puso de moda servir las imágenes (y otros contenidos estáticos como pueden ser archivos css, javascript, etc..) desde un servidor externo conocido como CDN (Content Delivery Network).

Estos CDN lo que ofrecen es un servidor que se ocupa únicamente de servir los recursos estáticos, liberando así de esta tarea al servidor principal y disminuyendo el tiempo de carga de la página web.

Las empresas que ofrecen servicios de CDN distribuyen estas imágenes en diferentes servidores localizados en diferentes países, de forma que cuando un usuario descarga una imagen lo haga desde el servidor en el país más cercano.

Hay servicios CDN gratuitos como puede ser Cloudflare, del cual ya hablamos en un articulo anterior, pero para obtener todo el potencial de un CDN hay que pagar por un servicio sin limitaciones.

En mi opinión esta optimización tiene sentido cuando el volumen e visitas es muy elevado y tenemos que ofrecer gran cantidad de contenido estático, pero para un blog personal no le veo mucho sentido.

Espero que os haya gustado la guía de optimización de imágenes y que os haya sido de utilidad. Si teneis dudas, comentarios o críticas serán bien recibidos y os animo a comentar vuestras opiniones.