Segundo 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 conceptos básicos relacionados con los diferentes formatos de imagen… ¡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.

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 los métodos de reducción para los 3 formatos de imagen más comunes:

  • GIF
  • JPEG
  • PNG

A continuación analizaremos estos 3 formatos por separado, tratando de aportar una descripción clara y casos de uso para cada tipo de imagen.

Imágenes GIF

GIF es un tipo de imagen formada por una paleta de 256 colores indexados. Para cada pixel de la imagen tenemos su correspondiente color indexado. GIF es un formato de imagen sin pérdida, es decir, la imagen original no pierde calidad en cada modificación o guardado.

GIF es el formato ideal para mostrar animaciones de carga y otros tipo de imágenes animadas.

Además soporta transparencia y animaciones. El tipo de transparencia es “booleano“, un pixel puede ser o completamente transparente o completamente opaco, sin términos medios. En la actualidad, mucha gente sigue utilizando los GIF como animación para reflejar la carga de contenido via AJAX.

Actualmente podemos utilizar el formato GIF sin riesgos, ya que ha sido liberado de los problemas con patentes que le acechaban en el pasado.

Imágenes JPEG

JPEG no tiene la limitación de sólo 256 colores, pero no soporta transparencias. Este tipo de imagen puede contener millones de colores manteniendo una gran compresión por lo que es especialmente interesante y recomendado para el muestreo de fotos e imágenes de grandes dimensiones.

JPEG es el formato ideal para la muestra de fotos e imágenes de grandes dimensiones manteniendo un tamaño aceptable.

A diferencia de los GIF, JPEG sí que es un formato con pérdida, por lo que en cada modificación y posterior guardado estamos perdiendo calidad respecto a la imagen original, por lo que es muy recomendable mantener la imagen original siempre que trabajemos con este formato.

Imágenes PNG: PNG8 y Truecolor PNG

PNG es un formato sin pérdida y podemos dividirlo en dos tipos de imagen:

  • PNG8
  • Truecolor PNG

PNG8

PNG8 es un formato de paleta de 256 colores, como lo eran las imágenes GIF… por tanto: ¿qué diferencia PNG8 de GIF?

  • Pros: Normalmente tiene un tamaño menor en disco y además soporta transparencias de tipo variable.
  • Contras: Este formato no soporta animaciones.

Truecolor PNG

Por otra parte, tenemos Truecolor PNG (PNG24 y PNG32), el cual soporta millones de colores como ocurre con los JPEG… ¿qué lo diferencia del JPEG?

  • Pros: Es un formato sin pérdida y soporta transparencia variable.
  • Contras: Tiene un tamaño en disco más grande en la mayoría de ocasiones.

Por tanto podríamos afirmar que el formato Truecolor PNG debería ser empleado en la mayoría de las ocasiones para material imprimible, manuales de ayuda… además de ser un excelente formato intermedio entre las numerosas ediciones de una imagen JPEG.

Conclusión final

Repasando lo aprendido en este segundo capítulo, podemos sacar en claro el siguiente uso para cada tipo de imagen:

  • GIF es el formato ideal para animaciones.
  • JPEG es el formato ideal para las fotos.
  • PNG8 es el formato ideal para todo lo demás iconos, imágenes de fondo, etc.

¡Esto es todo para esta segunda entrega! En la siguiente entrega trataremos de analizar los distintos métodos de optimización de imágenes para saber cómo reducir el tamaño de las mismas una vez hemos seleccionado el formato apropiado.

¡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 (9 comentarios)

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

¡Cojonudo el artículo!

Añado unos detallicos:

Creo que que te confundes en las conclusiones, pones “PNG8 para todo lo demás”, creo que te refieres a PNG24 o 32 (sin pérdida). PNG8 tiene pérdida, y no es demasiado aconsejable más allá de ocasiones en las que te veas forzado a optimizar algo al máximo (en un videojuego por ejemplo, como hizo Josepho en su Kukoo Kitchen).

También estaría bien que hablaras sobre programas de compresión para png, como el pngOUT, etc. Que supongo que hablarás en la siguiente entrega, artículo que si quieres te escribo yo con mucho gusto :D

También explicaría un poquito más, a nivel técnico para los frikis interesados, cómo funcionan los componentes RGB y la transparencia variable de los PNG: usando un byte adicional a los RGB, el “A”, que permite un valor variable entrr 0 y 255 para cada píxel de la imagen, por lo que puedes tener partes más transparentes que otras. Eso es algo que GIF no puede hacer, en gif, una zona es totalmente transparente, o talmente opaca.

¡Me encantan estos temas!

PNG es perfecto, como dices, para una imagen de fondo que se repita por ejemplo.

En concreto añadiría que PNG es muy bueno para cualquier imagen que presente colores SIN degradados, en la que haya muchos colores planos, dado que su método de compresión es el típico de los sin perdida, parecido al de los TGA, en la que si un pixel de color se repite X veces segudias, simplemente guarda el número de píxeles que vienen después (esto es así explicado a lo fácil, en realidad tiene más miga).

También PNG es ideal para guardar los renders que hagas con programas 3d o que exportes desde programás como Illustrator, dado que te guardará la imagen a máxima calidad, sin perdida, perfecto para imprimir. Luego para colgarlo en internet, lo pasas a JPEG, claro.

Repito, me encanta estos temas! Jaja

@Javier Cuando hablamos de pérdida, hablamos siempre respecto al original (en mismo formato) que se va editando y guardando, por lo tanto no tiene pérdida como le ocurre al GIF. Está claro que si pasas de una imagen de millones de colores a una de 256, hay pérdida, pero no es el caso del que hablamos.

Y cuando me refiero a PNG8 “para todo lo demás” hablamos nuevamente del entorno web, es evidente que el PNG8 no es “para todo lo que existe” sea o no web.

Quizá falte por comentar SVG, que poco a poco, se va convirtiendo en una opción para tener en cuenta.

http://es.wikipedia.org/wiki/Scalable_Vector_Graphics

Microsoft que era el último en subirse al carro, a principios de año pasó a formar parte del grupo de la W3C encargado del desarrollo de SVG, asi que esperemos verlo “en breve” implementado en todos los navegadores mayoritarios

@Harold quizás esté todavía “demasiado verde” por el mero hecho de que Microsoft Internet Explorer (para variar) no tenga soporte nativo, no? Pero muchas gracias por el enlace, no sabía que Safari ya lo estaba soportando desde la 3.1 :)

Por ahora tienes razón, aunque en muchos aspectos tengo esperanzas con IE9… (creo que demasiadas :P )

De acuedo con el inciso que hicieron sobre PNG24, si queremos una transparencia decente hay que utilizarlo si o si.

Interesante ;)
Añado 2 artículos de SmashingMagazine sopre optimizaciónde archivos JPG y PNG que seguro que encontraréis útiles:

Clever PNG Optimization Techinques:
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

Clever JPG Optimization Techinques:
http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/

Saludos!

creo q no hay como jugar con lo previos al exportar las imágenes tanto fireworks como photoshop traen la herramienta para visualizar como quedaría nuestra imagen en determinado formato y nos dice cuanto pesa, algunas veces he visto que fotos pesan menos en un png que en un jpg(de calidad considerable), o algunas veces la imagen ha sido pasada por ejemplo de un gif a un jpg y no llega y editamos al tratar de hacer un nuevo gif a partir de esa imagen el gif resultante sera mucho mas pesado y un png un poco mas ligero el jpg depende si necesitamos un canal trasparente se excluye por default.. . si requerimos partes semi trasparentes la única opción es el PNG32 o 24 (hay que ver que nos conviene mas)..

no hay como jugar un ratito con la herramienta de exportacion de los diferentes programas, la verdad les recomiendo mínimo para comprimir y exportar sus imagenes finales el fireworks siempre ha traido una compresión mayor que el photoshop y la herramienta de exportación con vista previa esta bastante bien, no no hay como jugar con las configuraciones y lograr el equilibrio calidad/peso escogiendo el formato que nos de mejor esta combinación de factores