comparte el articulo 

Optimización de imágenes para páginas web

Actualizado el 29/03/2010 < > 1 Comentario

Resumen: Para que la página no tenga un peso excesivo y se cargue en poco tiempo, es necesario reducir el peso de las imágenes, o sea, optimizarlas para su uso en la web.

A pesar del mejoramiento en el ancho de banda y las mejoras en los procesadores, aun sigue siendo recomendable que las páginas web tengan un peso reducido para evitar que tengan problemas o demoren en cargar.

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.

El parámetro más empleado para modificar el peso de una imagen es la resolución, cuya medida es en ppp (pixeles por pulgada cuadrada). 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.

Otro parámetro modificable es el color. Una imagen de alta calidad (denominado color verdadero, ya que se acerca a la capacidad del ojo humano en la detección de colores) tiene una profundidad de color de 32 bits por pixel, de los cuales 24 bits son para el color (casi 17.000.000 de colores) y 8 bits son destinados a las transparencias.

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. Adobe Photoshop presenta herramientas que permiten definir algunos parámetros de calidad para optimizar las imágenes, tanto reduciendo su calidad para su utilización en la web, como para aumentarla para su uso en impresiones. GIMP no posee funciones que permitan definir la calidad de las imágenes tratadas, pero en el guardado permite la modificación de algunos de ellos (según el formato) para reducir su tamaño.

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

RIOT es un software de optimización de imágenes gratuito de muy bajo peso y portable (puede ejecutarse desde un dispositivo de memoria USB), que presenta dos ventanas en las cuales se visualizan la imagen original y el resultado tras los ajustes que se van realizando.

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.

RIOT, optimización de imágenes

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.

Servicios en línea

Existen diversos sitios que realizan optimización de imágenes. Uno de ellos es SiteReportCard, una página que además de otros servicios y herramientas para diseñadores web, ofrece la optimización de imágenes en línea. Esta optimización se realiza bajando la calidad de los colores y la definición de la imagen. La página muestra la opción de optimizar una imagen que se encuentra en una web, para lo cual el usuario de introducir en un campo la URL de la imagen (por ejemplo, http://www.misitio.com/imagenes/imagen_1.gif) o de subir una imagen desde el ordenador del usuario. En cualquiera de los dos casos, la página devuelve cinco copias de la imagen inicial en diferentes tamaños (y lógicamente diferentes calidades), las que pueden ser descargadas al ordenador del usuario.

Otro sitio, con características similares es Dinamicdrive. El servicio es muy similar, aunque Dinamicdrive ofrece algunas copias más que en el caso anterior y un servicio adicional, que es convertir las imágenes a otros formatos. Los formatos admitidos para su conversión u optimización son JPG, PNG y GIF.

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.

Publicado el 29/03/2010, última actualización 29/03/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Verónica Milán y Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. luciana

    Muy útil la info, gracias!!

    Martes, 30 de octubre 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras