En este artículo hablaré sobre el tipo de imágenes que existen para Internet, cómo funcionan, cuáles son sus formatos y cuál es el adecuado dependiendo del objetivo de uso.
Antes de conocer los formatos que existen para la web, es importante que reconozcas primero que los formatos de imágenes están dentro de dos categorías: imágenes con pérdida (Lossy) e imágenes sin pérdida (Lossless).
En la medida que estés desarrollando sitios o aplicaciones web, lo más seguro es que debas trabajar incrustando imágenes. Entonces, si no manejas adecuadamente este concepto, puedes tener inconvenientes técnicos a la hora de mostrar la página web en el navegador desde Internet.
La consecuencia más típica cuando alguien no maneja este concepto, tiene que ver con la carga del sitio web. Cuando se incrustan imágenes muy pesadas, el navegador tarda mucho en mostrarla en pantalla y eso es una muy mala experiencia para las personas que está observando nuestra página web.
Imágenes Lossless (Sin pérdida)
Estas imágenes sin pérdida mantienen todos los datos de su archivo original, se pierde absolutamente nada o muy poco del archivo original. la imagen quizá pueda estar comprimida, pero estos formatos se pueden reconstruir a su estado original.
Este formato mantiene la calidad de la imagen, sin embargo, suelen ser pesadas en tamaño de archivo ¿Por qué?, porque no se está perdiendo calidad cuando es comprimida, se pueden comprimir, pero muy poco.
Imágenes Lossy (Con pérdida)
Las imágenes con pérdida aproximan la calidad a su imagen original; esta, podría reducir la cantidad de colores o analizar la imagen en busca de datos innecesarios. Este tipo de tratamiento reduce el peso de archivo pero compromete la calidad de la imagen.
Existen formatos de imagen que nos permiten manipularlos con el fin de bajar su peso en bytes comprometiendo la calidad de la imagen. Todo con fines de que la imagen pueda ser cargada de manera rápida en el navegador a través de Internet.
Todas las personas en el mundo tienen una velocidad de Internet diferente y a pesar de que esta con el pasar de los años va en aumento de capacidad, siempre debemos garantizar que nuestros sitios web carguen lo más rápido posible.
Formatos de archivo de tipo imagen para la web
Los tipos de archivos con pérdida son mucho más pequeños que los archivos de imágenes sin pérdida, y esto, los hace ideales para usar con fines de construir nuestros proyectos web.
Formato GIF. Grafic Interchange Format
El formato de imagen .gif es un formato Lossless (Sin pérdida), tiene una paleta de 256 colores y no puedes lograr hacerlas más ligeras. En definitiva el formato .gif no se puede comprimir.
Las imágenes .gif pueden ser animadas, entonces son ideales para agregar animaciones de pequeños segundos que no necesiten sonido.
Formato PNG 8. Portable Network Graphics
El formato PNG 8 es de tipo Lossless (Sin pérdida), este formato utiliza una paleta de 256 colores, no permite animaciones y tampoco puede hacerse más ligera.
Por lo general este formato es utilizado para colocar en nuestros proyectos web logotipos o íconos que necesiten tener un fondo transparente.
Todas las imágenes que se incrustan en una página web son cuadradas o rectangulares, y el formato .png, nos permite jugar con la percepción visual y agregar transparencia a los fondos cuando necesitamos que las personas vean por ejemplo un círculo.
Existe el formato PNG 24, sin embargo, este tipo de imagen utiliza una paleta de colores más amplia y va más allá de los 256 colores.
El formato PNG 24 es adecuado cuando se desea insertar una imagen en la página web que necesite un fondo transparente y que necesite también que los colores se mantengan como el archivo original. Sin embargo, comprimirla es difícil porque hay mucha más información de los colores.
El formato PNG 24 es mucho más pesado que el formato PNG 8.
Formato JPG / JPEG. Photographic Experts Group
Este formato es Lossy (Con pérdida) y es utilizado para fotografías, maneja una paleta de colores superior a 256, no permite transparencias y no permite animaciones.
El formato de imagen .jpg, es el formato que tiene más capacidades a la hora de comprimirse, obvio, compromete también su calidad.
Formato SVG – Vector. Scalable Vector Graphics
Este es un formato muy ligero que también sirve para generar íconos o logos con transparencia. La característica de este tipo de formato, es que está diseñado para poder ser escalado, es decir, gracias a un algoritmo matemático se puede aumentar su tamaño en dimensiones y no pierde calidad.
Este formato es muy utilizado se necesita visualizar imágenes a gran escala.
Conclusiones
- Seleccionar el formato de imagen adecuado para incrustar en los proyectos web es clave, esto, garantiza que la página web cargue rápidoy le proporciona a las personas que visitan el proyecto una excelente experiencia de usabilidad.
- La única manera de hacerla perder algo de peso en las imágenes Lossless es bajando el tamaño de sus dimensiones de ancho y alto, sin embargo, esto depende de los objetivos a la hora de incrustar este tipo de archivos en un proyecto.
- El formato .jpg es el más indicado cuando se necesita comprimir una imagen que no necesite trasparencias y animaciones.
- Los formatos PNG 8 y SVG son los tipos de imágenes más indicadas para incrustar imágenes que necesiten un fondo trasparente.
- El formato .gif es perfecto cuando se desea incrustar imágenes de tipo animación.