Para la preparación de la ponencia sobre «optimización de imágenes para la web» en el grupo de meetup de WordPress Pontevedra he juntado bastante más información de la que posiblemente haya sido capaz de transmitir. He creído buena idea pulirla un poco e ir publicandola para completar lo que se haya podido quedar a medias.

En esta primera parte, pongo sobre la mesa, los principales formatos de imagen que se emplean en la web. Son los reyes indiscutibles por su rendimiento y su extensión de uso.

GIF

Graphics Interchange Format surge en 1987. Es un formato “sin pérdida de calidad” para imágenes de hasta 256 colores, limitados por una paleta restringida a este número de colores. Aunque a día de hoy parezcan pocos colores, para la mayoría pantallas disponibles en entonces eran más que suficientes.

Hoy, debido a la limitación en la profundidad de color, no se suele emplear para imágenes estáticas en web, quedando limitado su uso, para mostrar pequeñas a animaciones.

JPEG

Aunque existen varios tipos de JPEG, el más extendido y usado es un algoritmo de compresión con pérdida para imágenes. Además es un formato de archivo del mismo nombre. Fue desarrollado por Joint Photographic Expert Group, buscando ofrecer una imagen visualmente aceptable que ocupase poco espacio en archivo.

Atendiendo principalmente a razones de sensibilidad del ojo humano, emplea varias técnicas en las que va eliminando información no fundamental de la imagen. Gracias a esto, produce archivos de tamaño pequeño y buena calidad visual. Sin embargo, cada vez que un archivo se recomprime, estas técnicas se vuelven a aplicar haciendo que la pérdida de calidad se vaya acumulando y degradando la imagen.

En general, partiendo de una imagen de buena calidad, JPEG es un formato que consigue buenos resultados para reducir el peso de fotografías.

PNG

Portable Network Graphics es otro de los formatos de imagen más extendidos en la web. Nace como la alternativa libre al formato GIF. Además ofrece varias mejoras con respecto al anterior pudiendo trabajar con paletas de colores indexados así como con color verdadero. Soporta, además, diferentes grados de transparencia.

Se trata de un formato especialmente pensado para su visualización en pantallas y su transmisión en redes. Debido a esto, solamente soporta el espacio de color basado en RGB, en contraposición a otros formatos que soportan, por ejemplo CMYK, especialmente diseñado para impresión.

El formato PNG divide internamente el archivo en secciones críticas y auxiliares sobre las que se puede actuar para añadir, quitar o modificar muchas de sus propiedades. Esto hace, por ejemplo, que se le puedan añadir mejoras en el tiempo.

Hablamos de que JPEG realiza cambios sobre la imagen para lograr una buena compresión. PNG, en general, no. Sobre la imagen final, aplica varios filtros que le permiten mejorar la compresión del archivo final, no de la imagen por lo que ésta, en este proceso no pierde información. Este sistema consigue buenos resultados para ficheros de imágenes con pocas variaciones en los colores y grandes áreas de colores planos, como suele ocurrir en iconos o logotipos. Por contra es ineficaz, en cuanto a reducción del tamaño del fichero, en el caso de imágenes muy heterogéneas como fotografías.