Optimizar y editar imágenes para páginas web

Edición y uso de los distintos tipos de imágenes en la web, así como su optimización para que ocupen lo menos posible.

Las imágenes son una parte importante de la web. De hecho, la mayoría de las páginas web distribuyen su espacio entre texto e imágenes.

Éstas añaden una nota de color a los sitios y si se usan correctamente, ayudan al usuario a entender de lo que se está hablando.

Tipos de imágenes para web

Los formatos de imágenes web más usados son .gif, .jpg y .png:

• GIF: es un formato de archivo sin pérdida, es decir, se conserva cada pixel de la imágen original, lo que implica que el tamaño suele ser mayor que en formatos .JPG. No obstante, para gráficos sencillos con pocos colores es muy eficiente. Sin duda su mayor ventaja frente a los otros formatos es que permite crear animaciones
• JPG: comprime mucho más las imágenes que los formatos .GIF, por lo que los archivos pesan menos. Es excelente para trabajar con fotografías de muchos colores y texturas, mantiene la calidad con pesos de imagen realmente bajos. Como inconveniente pierde algo de información y puede afectar a su calidad, pero en la mayoría de los casos no es apreciable a simple vista. No permite crear imágenes animadas.
• PNG: este formato surgió como alternativa al .GIF debido a algunos problemas legales que empezaron a surgir de su uso. Es, por tanto, muy similar a éste, salvo que no permite crear animaciones.

Optimizar las imágenes para la web

Sin lugar a dudas, una de las dificultades mayores frente a la que se enfrentan los diseñadores web es en la utilización de imágenes. El empleo de imágenes, tanto para el decorado de la página como para que forme parte del contenido, es indispensable.

Teniendo en cuenta esto, la única opción con que cuentan los diseñadores web es la optimización de las imágenes para su empleo en sus páginas.

Para que el diseño tenga la vista que su creador ha planificado, es necesario que el largo y ancho de las imágenes no se modifique, por lo que la única opción con que se cuenta es con la reducción de la calidad.

La reducción de la calidad de una imagen, no necesariamente afectará su vista en la página web. Esto se debe a que generalmente las imágenes obtenidas de una cámara, un escáner u otro medio, tienen una resolución óptima para su impresión o revelado, que es muy superior al mínimo necesario para que se vea bien en el monitor de un ordenador.

¿Qué se modifica en una imagen para su optimización?

Las imágenes a ser utilizadas en el diseño de una página web, puede ser modificada en varios parámetros a los efectos de reducir su peso.

Una cámara digital obtiene resoluciones de unas 300 ppp, y una impresión de buena calidad (aunque pueden obtenerse impresiones de mayor calidad) es de 200 ppp.

Estas resoluciones no son necesarias en una imagen que va a ser mostrada en una página web, ya que una resolución de  72 ppp es lo que se recomienda para su uso en este medio, debido a que la gran mayoría de los monitores no tienen resoluciones superiores.

Reduciendo la escala de profundidad del color a 16 bits (color de alta densidad), se obtiene también una reducción del peso de la imagen. Para imágenes que emplean pocos colores, pueden utilizarse escalas menores, como 256 colores o menos.

El formato GIF va más allá, ya que cada imagen guarda su propia escala de colores, lo que reduce notoriamente la cantidad de información (y por consiguiente el peso) que contiene un archivo de imagen.

Los archivos de imagen pueden contener datos adicionales (metadatos), que también influyen en el peso del mismo, por lo que en muchas ocasiones, los programas de optimización de imágenes los quitan, como método de reducir la cantidad de información contenida en el archivo.

¿Cómo optimizar una imagen?

Hay varias formas de optimizar una imagen para su empleo en páginas web.

Algunos programas de edición de imágenes tienen plug-ins para la optimización y otros tienen esas funcionalidades incorporadas.

Otra opción es la utilización de herramientas específicas, tanto programas como herramientas online, algunas de las cuales describiremos a continuación. También es posible emplear algunos trucos con buenos resultados.

RIOT: Software gratuito para optimizar imágenes

En pruebas realizadas con este programa, los resultados son muy buenos. En una imagen de alta calidad con formato JPG, se logró una reducción del peso de las imágenes de hasta 6:1, lo que quiere decir que una imagen de 600kB quedaría en 100kB aproximadamente, con una reducción de la calidad que no resulta visible empleando los parámetros por defecto.

En imágenes PGN con transparencias, la reducción es menor, aunque los números siguen siendo igualmente buenos, ya que se logra una reducción del peso de la imagen hasta algo menos que 3:1.

Otra de las características del programa es que solo trabaja con formatos JPG, PGN y GIF, permitiendo el cambio de formato, lo que quiere decir que, si estamos optimizando una imagen JPG, podremos guardarla como GIF o PNG. Además, el programa presenta la opción de establecer el peso que se desea que la imagen tenga, reduciendo la calidad hasta obtener el peso deseado.

Es posible aumentar la proporción de disminución del peso de la imagen, así como modificar los parámetros. La interfaz es extremadamente sencilla, aunque se encuentra en inglés y no existe una versión en español.

Herramientas online y gratis para optimizar imagenes

Existen diversos sitios que realizan optimización de imágenes. He estado haciendo algunas mejoras en la optimización de las imágenes de algunas páginas, principalmente para mejorar la velocidad de carga del sitio.

Vamos a ver sus ventajas y desventajas y cuándo es mejor usar una u otra:

Kraken

• Muy rápida al procesar las imágenes y optimizarlas.
• Optimiza mucho y no pierde apenas calidad.
• Como contra, la versión gratis tiene bastantes limitaciones en el tamaño de los archivos, máximo 1MB.
• No obstante, puedes optimizar a la vez un número muy grande de archivos. Yo he optimizado más de 50 a la vez y sin ningún problema.

Optimizilla

• Un poco más lenta que kraken a la hora de procesar los ficheros.
• Optimiza mucho y no pierde apenas calidad.
• Parece no tener un límite de tamaño del archivo, como sí tiene kraken. O si lo tiene es lo suficientemente alto como para no molestar en la tarea de optimización de tus imágenes.
• En cambio, sí tiene límites en el número de imágenes que puede optimizar al mismo tiempo, que es un máximo de 20. Parecen bastantes, pero si manejas grandes directorios resulta incómodo.
• Para mí, un gran contra: renombra las imágenes poniéndoles el sufijo -min (si la imagen a optimizar se llamaba web.jpg, el fichero que te descargas se llama web-min.jpg). Por lo que si quieres sobrescribir imágenes es bastante tedioso, ya que tienes que renombrar los ficheros optimizados para que coincidan con los originales.

En resumen y como recomendación: usar kraken siempre que el tamaño de la imagen sea inferior a 1MB, para optimizar imágenes más pesadas, usar optimizilla.

Guardar imágenes para web de Photoshop

Una de las grandes maravillas que tiene Photoshop es la herramienta para guardar imágenes optimizadas para web (archivo > guardar para web).

Esta herramienta resulta indispensable una vez la conoces. Te permite reducir el peso de las imágenes de forma espectacular manteniendo su calidad.

Herramientas de edición de imágenes

Si haces páginas webs deberías tener en tu ordenador un programa de este tipo para poder editar las imágenes a tu gusto.

Formas de editar una imagen

Para crear tu web, necesitarás algún programa de edición de imágenes que te permita modificarlas, cambiar el tamaño, añadirles notas de texto, cambiar el formato y sobre todo optimizarlas para la web.

Puede parecer algo complementario, pero conforme vayas creando tu web te darás cuenta de que necesitas un programa que te permita editar tus imágenes, ya sea de forma sencilla, como por ejemplo recortando o ampliando su tamaño, o con métodos más sofisticados como los filtros de imagen.

Algunas de las cosas más básicas que se pueden hacer con estos editores de imágenes y que nos sirven de ejemplo, son:

Recortar una imagen

Esto es muy útil para eliminar de la imagen partes que no queremos. Por ejemplo, puede venirte muy bien la foto de un paisaje como este, pero no querer incluir el marco amarillo:

Redimensionar la imagen

A menudo una imagen es más grande o más pequeña de lo que necesitamos, y aunque puede establecerse su tamaño exacto mediante los atributos width y height, no es la forma adecuada de cambiar su tamaño, ya que en realidad no lo estamos modificando, lo que estamos cambiando es su forma de verse en el navegador (el archivo sigue teniendo el mismo tamaño). La mejor opción es utilizar un programa de dibujo como el Photoshop que cambie el tamaño real de la imagen.

Redimensionar imagenes online

La herramienta es muy sencilla (y muy básica también). Eliges la imagen que quieras redimensionar de tu ordenador, seleccionas el tamaño máximo que puede tener (puedes elegir entre tamaños predeterminados, establecer un porcentaje del tamaño original o un valor personalizado) y eliges la calidad de resolución.

Por tanto, hay que encontrar un término medio, para no perder demasiada calidad de imagen y que su visualización sea buena, pero sin que esto suponga ralentizar innecesariamente la carga de la página.

Rotar una imagen

En ocasiones es útil cambiar la orientación de una imagen, pra esto se puede usar cualquier editor gráfico. Puede rotarse de forma vertical u horizontal en varios angulos, en la mayoría de los programas buenos te permite rotar la imagen un número determinado de grados.

Filtros de imagen

Los filtros pueden llegar a transformar una imagen por completo dándole efectos increíbles. Con ellos, podrás dar a tus imágenes un aire diferente.

Lo mejor para entenderlo es ver algunos ejemplos, éstos en concreto han sido hecho con Photoshop:

Imagen original:

Filtros aplicados: