Cómo Optimizar Imágenes para tu Web: Formatos y Herramientas

Inicio>Cómo Optimizar Imágenes para tu Web: Formatos y Herramientas
Cómo Optimizar Imágenes para tu Web: Formatos y Herramientas 2017-06-06T17:34:34+00:00

¿Te hayas parado a pensar la enorme cantidad de tráfico que te pueden traer las imágenes desde los buscadores? En serio. Alguien busca un producto, un lugar, una receta, o una infografía en Google y ahí deberían aparecer tus imágenes. No importa que el nuevo diseño del buscador reduzca la cantidad de visitas que puedes recibir, la oportunidad de ser visible y atraer tráfico siempre es interesante y jugosa.

guia optimizacion imagenes consejos herramientas

Además, la búsqueda universal muestra imágenes en la página de resultados de forma combinada. Esto significa que no es necesario buscar una imagen para encontrarla, puedes aparecer en cualquier momento (sobretodo para ciertas búsquedas). Por todo ello, es importante que aprendas a optimizar tus imágenes para los buscadores (lo que también se conoce como SEO para imágenes).

Estoy seguro de que ahora te estarás preguntando ¿Optimizo correctamente mis imágenes de mi sitio web? , o de que incluso ya das por hecho que no las optimizas (no te preocupes, es común). Por eso mismo te voy a mostrar en esta guía paso a paso, para poder empezar a usar tus imágenes como una herramienta más de posicionamiento web.

Índice

Formatos de imagen

como optimizar imagenes consejos herramientas png jpg gif svg bmp

Un formato de imagen normalmente encadena juntos varios algoritmos con pérdidas (lossy ) y sin pérdidas (lossless) para conceder ahorros de compresión. Hay multitud de formatos de imagen adoptados por los navegadores, cada uno con sus propias características y sus ventajas y desventajas en cuanto al rendimiento se refiere. Resumiendo, no hay una “talla única” para el formato web (en la actualidad).

Los diferentes tipos de imágenes deben ser codificados en diferentes formatos dependiendo del tipo de imagen, la compatibilidad con el navegador y las necesidades de la página web. Existen 3 decisiones que un desarrollador web tiene que tomar en cuanto a la elección de un formato de imagen:

  • ¿Necesita compresión la imagen?
  • ¿Necesita transparencia la imagen?
  • ¿Necesita animación la imagen?
  • ¿Necesita datos de alta calidad la imagen?

PNG es un formato simple que soporta transparencia y compresión sin pérdidas. Permite definir un canal alfa para la imagen, para enmascarar las áreas transparentes, así como una opción para habilitar un compresor Deflate sin pérdidas de datos. (Deflate es una combinación de dos compresores sin pérdidas: LZ77 y Huffman). Dado que la compresión es sin pérdidas, la calidad de imagen sigue siendo idéntica a la imagen de origen. Sin embargo, esto causa algunos problemas, ya que el tamaño del archivo tiende a subir y no tan pequeño como debería ser.

GIF es otro formato que soporta transparencias, además de animaciones. El formato GIF contiene dos etapas de compresión, un paso de paletización con pérdidas (restringiendo toda la imagen a sólo 256 colores), seguido por un compresor LZW sin pérdidas. El proceso de cuantificación de los colores de la imagen a sólo 256 proporciona una reducción de calidad muy alta en beneficio de un mejor tamaño de compresión, que tiende a producir una mejor compresión LZW. Colt McAnlis dice lo siguiente:

Los compresores más moderno consiguen un rendimiento mayor encadenando varios pasos de codificación a la vez. Una simple etapa puede modificar el flujo de datos de tal manera que las etapas posteriores pueden comprimir mejor que el flujo de datos en bruto. Los codificadores populares, como la cadena 7zip junto con el diccionario de codificación LZ, producen un conjunto reducido de símbolos que se pueden consumir de manera más eficiente mediante un algoritmo de cadena de Markov.
Chris Evans, Relaciones con Desarrolladores, Google

Si no necesitas ni transparencia ni animación, entonces JPG es el formato de imagen ideal. Fue diseñado para manejar la compresión de datos de fotos de alta calidad, pero proporciona un conjunto configurable de opciones de compresión con pérdidas, lo que te permite intercambiar calidad de compresión o tamaño de la imagen, dependiendo de las necesidades.

Pero si lo que buscas es una solución única para el formato de tus imágenes, entonces deberías echar un vistazo a WebP. El formato no sólo cuenta con una calidad de compresión/tamaño superior, sino que también soporta transparencia y animaciones. Utiliza una combinación de compresiones sin pérdidas y con pérdidas y, al igual que el formato JPG, te permitirá definir el nivel de calidad o el tamaño del archivo. Por supuesto, este nuevo formato de imagen no ha sido adoptado por todos los navegadores de momento, por lo que los desarrolladores web que lo han adoptado se encuentran actualmente en las primeras fases de trabajo solucionando problemas de usabilidad. Aunque con un 30% de ahorro más que el JPG, junto con una mayor adopción del servidor demuestra que WebP es un formato a tener en cuenta para el futuro de las páginas web.

Compresión Sin pérdidas Con perdidas Transparecia Animación
PNG Bueno Si No Completo No
GIF Normal Si Si Binario Si
JPG Bueno Si Si No No
WebP Perfecto Si Si Completo Si

Consejos para optimizar imágenes

guia optimizacion imagenes consejos herramientas

#1 Atributo Alt – Describe la imagen

Pese a que la tecnología para el reconocimiento de imágenes ha avanzado mucho, los buscadores siguen teniendo problemas para interpretar el contenido de las imágenes. A día de hoy pueden reconocer letras, colores, e incluso caras, pero poco más. Debido a ello necesitas usar el atributo Alt para describir tus imágenes.

El nombre de Alt viene de alternate text o texto alternativo, y es lo que utilizan los buscadores para saber qué es lo que muestra una imagen. También es el texto que se utiliza en lugar de la imagen cuando ésta no se puede cargar junto con el resto del contenido de la página.

Supongamos que pones en tu web una selección de los mejores bancos de imágenes gratis. El código HTML de la etiqueta Alt sería:

<img src=”https://ignaciosantiago.com/wp-content/uploads/2013/12/bancos-imagenes-gratis.jpg” alt=”Los mejores bancos de imágenes gratis”  />

(En principio no necesitas preocuparte por el código, ya que la mayoría de los gestores de contenido permiten añadir texto a la etiqueta fácilmente.)

La clave para crear buenas etiquetas Alt es:

  • Nombrar correctamente la imagen
  • Describir fielmente el contenido de la imagen
[/fusion_checklist][/fusion_builder_column]
  • Incluir la palabra clave principal en la imagen
  • Utilizar la descripción larga o longdesc

#2 Nombre del archivo – Corto y descriptivo

El nombre del archivo es un indicador del contenido de la imagen. Piensa que una imagen llamada “tarta-de-chocolate.jpg” probablemente muestre una tarta de chocolate. Para optimizar el nombre debes intentar ser corto y descriptivo, y no es necesario que incluyas tanta información como en la etiqueta Alt.

Lo que no puedes hacer es llamar al archivo de una imagen “foto.jpg” sin más. Este nombre genérico no trae ningún beneficio en los buscadores. Para hacerlo más descriptivo, debes meter palabras clave que describan esa imagen. Así, mediante un nombre más específico, tendrás más posibilidades en los rankings de resultados.

Un buen nombre de archivo se caracteriza por:

  • Representar el contenido de la imagen
  • Incluir la palabra clave principal
  • Ser muy conciso (puedes excluir palabras vacías)
  • Utilizar guiones para separar palabras

#3 Contexto – Rodea tus imágenes de texto

Es muy importante que tus imágenes estén rodeadas de texto, y que ese texto esté relacionado con el contenido de la imagen. Con esto me refiero al pie de foto o leyenda, pero también el texto que hay encima y bajo la imagen, encabezados y título de la página (en la medida de lo posible).

Ten en cuenta que si el texto que envuelve la imagen no tiene nada que ver, la relevancia para el buscador será baja. Así que cuanto más estrecha sea la relación existente entre la imagen y el contexto en el que se encuentra, mejor.

#4 Tamaño del archivo – Lo más pequeño posible

Lo ideal es que el tamaño del archivo sea lo más pequeño posible. De esta forma las imágenes cargan rápido, y eso es algo que premian los buscadores.

Pero el tamaño del archivo depende de 2 cosas:

  • Las dimensiones de la imagen
  • La calidad de la imagen

Si quieres una imagen de grandes dimensiones en un archivo pequeño, la calidad se verá afectada. Y si lo que quieres es una imagen de gran calidad, tendrás que reducir las dimensiones. Este compromiso hace del JPG el formato de imagen ideal para los buscadores, aunque puedes utilizar PNG y GIF si sirven mejor a tus propósitos. De modo que a la hora de preparar tus imágenes:

  • Utiliza JPG siempre que sea posible
  • Emplea las dimensiones exactas que necesites (no confíes la reducción de las dimensiones al CMS puesto que carga la imagen completa para luego redimensionarla)
  • La calidad JPG media es más que suficiente para la Web

Por otro lado, puedes utilizar Skitch para capturar, recortar y reescalar imágenes. Esta herramienta hace un buen trabajo manteniendo la calidad en las imágenes, y además permite añadir anotaciones, formas y dibujos. Otra herramienta interesante y gratuita para trabajar con imágenes es GIMP. Más abajo te ofrezco muchas más, sigue leyendo.

#5 Datos Exif – Incluye todos los datos posibles

Exif, o Exchangeable image file format, es una especificación que permite incluir varios tipos de metadatos dentro del archivo de imagen. Entre estos datos se incluyen detalles específicos de la toma, como la exposición, apertura, distancia focal, e incluso las coordenadas geográficas. Adicionalmente, también incluye datos como:

  • Título de la imagen
  • Descripción
  • Nombre y web del autor
  • Copyright
  • Otras etiquetas interesantes

Si bien los buscadores no utilizan los datos Exif como factor de peso actualmente, los datos sí que aparecen a páginas de imágenes, lo que puede influir en la relevancia. Este el el caso de Flickr, como se comprueba aquí.

Es posible  editar algunos datos y añadir información relevante sobre la imagen mediante las propiedades del archivo en Windows (botón derecho). Aunque si de verdad quieres experimentar, es mejor que uses una herramienta avanzada. PhotoME es una opción gratuita.

#6 Descripción larga – Cuanta más información mejor

Un atributo poco conocido para imágenes es la descripción largalongdesc. Como su nombre indica, sirve para incluir una descripción más larga que la que se puede incluir en la etiqueta Alt. La sintaxis para la descripción larga es:

<img src=”https://ignaciosantiago.com/wp-content/uploads/2013/12/bancos-imagenes-gratis.jpg” alt=”Los mejores bancos de imágenes gratis” longdesc=”http://example.com/acerca-de-los-bancos-de-imagenes” />

Si te fijas, longdesc no incluye una descripción textual, sino la URL donde encontrarla. Ésta puede ser una página especialmente creada para incluir la descripción, o la propia página donde se incluye la imagen, pero eso no tiene mucho sentido. La verdad es que la descripción larga se utiliza muy poco o nada, pero he querido incluirla para que cuentes con toda la información posible.

#7 Sitemap de imágenes – Chiva a los buscadores tu estructura de imágenes

Un aspecto esencial de la optimización de imágenes es la indexación. Las imágenes deben estar en el índice del buscador para aparecer en la búsqueda, pero si el buscador no encuentra tus archivos de imagen difícilmente podrá registrarlos.

Hay una manera de aumentar las posibilidades de que tus imágenes sean indexadas, y es generando un sitemap específico para imágenes. Este archivo incluye la URL de cada imagen, pero también puede incorporar el título, la licencia y el pie de foto.

#8 Generar enlaces – Enlazar la imagen desde otras páginas web

Te adelanto que esta táctica es precisamente la más efectiva. Si quieres mejorar la visibilidad de tus imágenes no hay nada más simple y directo que conseguir enlaces. Sí, enlaces. Y no sólo hacia la página que contiene la imagen, sino hacia el propio archivo de imagen.

Además, si utilizas palabras clave en el texto de enlace (anchor text) puedes mejorar el posicionamiento para esas búsquedas. Aunque no debes abusar de ello para no despertar las sospechas de los buscadores.

Herramientas para optimizar imágenes

como optimizar imagenes herramientas

Siempre que sea posible, lo mejor es tratar de automatizar la optimización de imágenes. Para que tengas una pequeña ayuda, voy a compartir contigo algunas de las herramientas de optimización de imágenes que suelo usar. Como normal general, ejecuta los optimizadores con más perdidas primero y después los que tienen menos pérdidas, así mejorarás el rendimiento.

La mayoría de los desarrolladores se olvidan de que los optimizadores de imágenes optimizan un archivo en particular en vez de una imagen. Esto significa que no tiene sentido optimizar el archivo de una imagen y luego cambiarla de tamaño, recortarla o cambiarla a otro formato, ya que todos los cambios realizados en ese archivo no habrán valido de nada y las optimizaciones se habrán perdido por el camino.

Tareas Grunt

Grunt es un gestor de tareas fantástico que uso todos los días. Entre todas las tareas, dispone de una serie de tareas que pueden ayudar a la reducción del peso de las imágenes:

Por supuesto, no todo el mundo utiliza o sabe utilizar Grunt, así que te voy a mostrar una serie de herramientas individuales que se pueden utilizar independientemente de tus “gustos y conocimiento de herramientas”.

Herramientas individuales

Algunas de las herramientas para la compresión de imágenes que recomiendo son:

JPG

PNG

PNG Quantizer

GIF

El equipo Yeoman tiene un contenedor Node.js llamado node-gifsicle que hace que esté disponible como una dependencia local en OS X, Linux y Windows. También tienen contenedores para optipng, jpegtran, pngquant.

SVG

También puedes pasarte que eliminando los datos EXIF o la información del perfil de color de las imágenes también conduce a algunas ganancias en rendimiento.

Herramientas de escritorio

El experto de compresión de imágenes Kornel Lesiński ha tenido la gentileza de recomendar una serie de herramientas para optimizar imágenes basadas en investigación.

JPEG

  • JPEGMini con pérdidas (reducción del 30-50%): JPEGmini establece la calidad de tu JPEG al ajuste más bajo que los ojos humanos pueden tolerar. Es muy bueno haciendo este trabajo. Si no puede utilizarlo, considera ajustar manualmente la calidad lo más baja posible. Ten cuidado, no guardes todos los archivos JPEG al “80%”. El ajuste de calidad de la imagen es sólo una aproximación débil y debe variar de imagen a imagen. JPEGmini realmente no tiene un código abierto/CLI equivalente (script de ImageOptim-CLI), pero el equivalente más cercano es adept-jpg-compressor.
  • jpegcrush (igual que jpegrescan) es un compresor sin pérdidas (reducción del 5-10%), superando a jpegoptim en el 99% de los casos. jpegcrush es un script de Perl que utiliza jpegtran, por lo que hay poca necesidad de usar jpegtran por separado.

PNG

Hay 3 pasos involucrados en la compresión de una imagen NG: el primero conversión con pérdida (Reducción del 50-70%), después buscar filtros óptimos (5-10%) y, por último, compresión gzip óptima (5-30%).

  • advpng probably has the best speed/compression ratio and I believe that’s whatpunypng and Kraken.io use too. If you have time, then Zopflipng is also worth considering. It’s quite slow, but beats everything else 95% of the time. PNGOUT is a close second (and pretty slow too).
  • pngquant2 ofrece una opción muy competitiva para comprimir el tamaño y calidad de los archivos para PNG. Los usuarios de Windows pueden utilizar Tinypng.org que es pngquant2+optipng (Kraken.io es lo mismo). Ten en cuenta que la mayoría de las distribuciones de Linux “estables” son de pngquant 1.0. Esto es bastante antiguo y ofrece peor calidad en la codificación. pngquant es digno de usar desde la versión 1.6. pngnq-s9, pngnq y la exportación de Photoshop  también son opciones decentes que vale la pena probar. Yo recomiendo alojarte de RIOT, PHP-libgd, ImageMagick y IrfanView lo máximo posible, ya que no son buenos compresores con PNG8 y no son 100% compatibles con Alpha.
  • cryopng también vale la pena probarlo (si tienes tiempo) y pngwolf, que mencioné anteriormente. Alternativamente OptiPNG o pngcrush.
  • advpng probablemente tiene la mejor relación velocidad/compresión. Si tienes tiempo, entonces Zopflipng también vale la pena considerarlo. Es bastante lento, pero gana a todos los demás el 95% de las veces. PNGOUT estaría en un cercano segundo lugar ( bastante lento también).

Herramientas online

También hay una serie de herramientas de optimización de imágenes gratuitas online que podrás utilizar para optimizar tus imágenes, incluyendo las ya mencionadas:

Empieza a optimizar las imágenes que subes a tu web

Las imágenes son un tipo de contenido delicado que, no solo puede aumentar la calidad y la percepción del usuario de tu página web, sino que también puede complementar tus esfuerzos para la velocidad de carga y el diseño responsive. Antes de hacer pública tu página web, asegúrate de seguir esta checklist para mejorar la compresión de tus imágenes.

Checklist de la compresión de imágenes

  1. Comprime las imágenes en el formato correcto con el nivel de calidad más bajo posible
    1. Configura manualmente (cuando sea posible) la calidad de compresión de todas las imágenes que puedas
    2. Automatiza el resto de imágenes para conseguir el mejor rendimiento
  2. Investigar la implementación de WebP para tus necesidades de optimización de imágenes
  3. Guarda las imágenes con opciones progresivas para mejorar la percepción de los usuarios de los tiempos de carga de tu página web
  4. Investiga otras formas de obtener una mejor compresión

¿Te ha gustado el contenido? Valóralo

 

8 Comentarios

  1. Rafael Hernampérez 25/09/2015 en 10:48- Responder

    Muchas gracias por este artículo. Supercompleto y superútil

  2. JohnnyDc 13/06/2015 en 17:15- Responder

    Solo agregar o corregir que Imagemagick es genial, no recomendaría alejarse de él, como usuario aferro de la herramienta mi recomendación es la de usarlo en los casos apropiados. Con imagemagick y los script apropiados puedes (en Mac OS, Windows o Linux) automatizar el procesamiento de cientos de imágenes en solo segundos.

    Personalmente lo utilizo a diario, para optimizar imágenes no tiene igual y si se trata de optimizar al vuelo una galería de unas mil o 2000 imágenes que un cliente te ha entregado en una carpeta con decenas de carpetas internas, puedes pasar de 5 o 6gb a solo 200 o 300mg en menos de 5minutos. Creo que es tema de conocer as opciones de la herramienta y tener claro tu objetivo.

    • Ignacio Santiago
      Ignacio Santiago 23/06/2015 en 10:33- Responder

      Hola JohnnyDc,

      Gracias por tu comentario. La verdad es que el que comentas funciona muy bien, sobre todo cuando tienes muchas imágenes que optimizar.

  3. Diego 14/02/2015 en 20:00- Responder

    Estoy trabajando con magento y necesito optimizar todas las imagenes de productos. Tenés idea como podría hacerlo con alguna de estas herramientas?

  4. Ignacio Santiago Pérez

    Hola,

    Gracias por tu comentario. No tengo un tutorial, peor te recomiendo esta herramienta http://imagen.online-convert.com/es/convertir-a-webp. Pruébala y me dices.

  5. Andross CC 04/02/2015 en 19:35- Responder

    Me pareció muy bueno este post, pero quisiera preguntar si no tienes un tutorial o algo para transformar una imagen a formato webp para blogger.

¡Es tu turno! Comparte tu experiencia o pregunta