Quinto capítulo de la serie “Reducir el tiempo de carga Web” con el que pretendemos mostrar el camino de cara a mejorar la velocidad de carga de nuestras web, reduciendo así el tiempo de espera del usuario que tanto valor tiene a día de hoy. En esta ocasión revisaremos la forma en la que podremos optimizar nuestras imágenes en formato .PNG… ¡No os lo perdáis!

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.

Este tutorial forma parte de una serie

¿Por qué optimizar las imágenes?

Como habíamos visto en el primer capítulo sobre minimizar las peticiones HTTP, estábamos intentando reducir el número de peticiones HTTP combinando todas nuestras imágenes en una única imagen. Reduciendo el número de imágenes estamos reduciendo también el número de peticiones HTTP.

Una vez tenemos claro el formato de imagen que nos conviene es importante optimizar cada una de nuestras imágenes para reducir su tiempo de carga lo máximo posible.

Ahora que tenemos un menor número de imágenes a cargar, necesitamos reducir el tamaño de estos archivos en disco, reduciendo así el tiempo de carga de nuestra web.

En este artículo trataremos de conocer la forma en la que podemos reducir el peso de las imágenes .PNG.

¿Cómo reducir el tamaño de la imagen sin perder calidad?

Las imágenes PNG contienen una serie de datos que pueden llegar a ser útiles en numerosas ocasiones, pero esta información carecerá en su mayoría de utilidad a la hora de crear y diseñar un sitio web. A esta información se le conoce como metadata y puede ser:

  • Información sobre la cámara.
  • Fecha y hora de la foto.
  • Miniaturas de vista previa e incluso audio.
  • Información específica de la aplicación (por ejemplo Photoshop).
  • Comentarios acerca de la imagen.
  • Y mucho más…

Como habrás podido suponer los fotógrafos pueden encontrar útil esta información acerca de la cámara, comentarios de las fotos, fechas, configuraciones… pero para nuestros diseños web no necesitaremos este tipo de información, sólo queremos mostrar la imagen.

Eliminando la información oculta reduciremos el tamaño de nuestras imágenes, favoreciendo a una mayor rapidez en la carga de las mismas.

Con toda esta información “inútil” por detrás de la foto nuestras imágenes están ocupando más espacio del que deberían, vamos a ver pues cómo eliminarla y favorecer así a una mayor rapidez en la carga de las mismas. ¡Allá vamos!

Optimizando con la herramienta pngcrush

Como hemos estado comentando a lo largo de esta serie de artículos, PNG es un formato sin pérdida, por lo que podremos realizar una gran cantidad de operaciones y guardado sin pérdida de calidad respecto a la imagen original (no hablamos de reducir la paleta de colores por supuesto, aunque hay excepciones).

Partiendo de la introducción a esta entrada, eliminaremos la información innecesaria mediante la herramienta pngcrush.

Uso de comandos pngcrush para optimizar las imágenes PNG

Si todavía no habéis descargado pngcrush hacedlo, y a continuación probamos el siguiente comando:

pngcrush -rem all -brute -reduce imagen_original.png imagen_final.png  

Analicemos algunas de las opciones que hemos usado:

  • -rem elimina todos los bytes innecesarios, pero mantiene el de transparencia.
  • -reduce tratará de eliminar aquellos colores que no están siendo utilizados en la paleta de colores.
  • -brute probará una gran cantidad de métodos para optimizar al máximo la imagen. En muchos casos no consigue optimizar, pero si estamos en una situación “offline” no perdemos nada por intentarlo. En escenarios de máximo rendimiento / online no es aconsejable ya que es un proceso realmente lento.

Eliminar la información (metadata) de la imagen hará que también se elimine el copyright de la misma, así que tened cuidado, quizás sí os interese / debáis mantener dicha información.

Existen muchas otras alternativas… ¡echemos un vistazo!

Alternativas a pngcrush

Como siempre, nosotros hemos escogido pngcrush, pero existen multitud de alternativas en la web, tan sólo hay que buscarlas y probarlas:

Para terminar, simplemente comentar que es importante probar las distintas opciones disponibles para lograr la mejor configuración para nuestro proyecto y caso de uso. No es lo mismo trabajar en entornos online con recursos limitados que en entornos offline donde podemos tener mayor capacidad y recursos.

Reflexión final

Al igual que en el artículo anterior, con un poco de investigación, uso de las herramientas apropiadas y sentido común podemos conseguir optimizar nuestros sitios web de manera relativamente sencilla.

Ahora que controlamos de forma básica la optimización de los tres tipos de imágenes más utilizados en la web (GIF, JPEG y PNG), sólo nos queda seguir mejorando e investigando estos métodos… no dudéis en compartirlos con todos en los comentarios.

¡Nos vemos en la próxima publicación!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (5 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Pngout es el que mejor ratio de compresión logra en la mayoría de los casos. Os recomiendo este artículo: http://www.codinghorror.com/blog/2007/03/getting-the-most-out-of-png.html

Gracias a los dos por los comentarios! El link que ha puesto Javi es realmente bueno.

He leido las partes anteriores del tutorial y los tendre muy en cuenta pues mi blog tiene muchas imagenes. Saludos

Patricio

interesante el artículo y la herramienta esta, pero podrías explicar como se utiliza?
La descargue y vienen una cantidad de archivos que no se donde se deben colocar
Dices: A continuación probamos el siguiente comando… Donde se coloca ese comando??

Gracias