Formatos de imágenes para optimizar una página web

Formatos de imágenes para optimizar una página web

Formatos de imágenes para optimizar una página web

Todos conocemos la expresión “una imagen vale más de mil palabras” y elegir el formato de imágenes para optimizar una página web o el formato más óptimo para un dispositivo específico, ayuda a maximizar el impacto de sus imágenes y mejorar el rendimiento de la página.

¿Qué es optimizar imágenes para la web?

Si bien en cierto que las imágenes que creamos en programas como Photoshop e Illustrator se ven geniales, a menudo los tamaños de los archivos son muy grandes y pesados lo que puede afectar el SEO.

Estos archivos de más de un par de megabytes por imagen, al subirlos a un sitio web hace que la carga sea muy lenta, lo que obliga a optimizarlas para solucionar el problema.

Cuando hablamos de optimizar las imágenes para una web, significa guardarlas o compilarlas en un formato compatible con la web, según lo que contenga la imagen.

Las imágenes contienen datos distintos a los píxeles que vemos en la pantalla. Estos datos pueden agregar un tamaño innecesario a la imagen, esta realidad conlleva a tiempos de carga más largos y afectan el posicionamiento en buscadores.

¿Como funciona la optimización de imágenes?




En términos simples, la optimización de una imagen funciona eliminando todos los datos innecesarios que se guardan dentro de la imagen para reducir el tamaño del archivo de la imagen en función de dónde se utiliza en la web.

En términos generales, la optimización de imágenes para un sitio web puede reducir el tamaño total de carga de la página hasta en un 80%.

Formas de compresión de imágenes

Existen dos formas de compresión que debemos entender que son, con pérdida y sin pérdida.

– Compresión con pérdida

Las imágenes guardadas en un formato con pérdida se verán ligeramente diferentes a la imagen original cuando se descomprimen. Ten en cuenta que esto, solo es visible de cerca. La compresión con pérdida es buena para la web, porque las imágenes utilizan una pequeña cantidad de memoria, pero pueden ser lo suficientemente similares a la imagen original.

– Compresión sin pérdida

Las imágenes guardadas en formato sin pérdida, conservan toda la información necesaria para producir la imagen original. Por esta razón, éstas imágenes contienen muchos más datos y, a cambio, tienen un tamaño de archivo mucho mayor.

También podemos optimizar las imágenes para la web guardándolas como las dimensiones apropiadas.

Resulta útil cambiar el tamaño de la imagen en la página web utilizando CSS, pero el problema es que los navegadores web, todavía descargan los archivos originales completos, luego lo cambian de tamaño y lo muestran.

¿Por qué es importante optimizar las imágenes?

La principal razón de optimizar las imágenes, es porque el 90% de la mayoría de los sitios web dependen de los gráficos y, por lo tanto, hay muchos archivos de imágenes.

Dejar estas imágenes sin comprimir y en el formato incorrecto, puede ralentizar drásticamente los tiempos de carga de una página web.

Cuantos menos bytes deban descargar los navegadores, menor será la exigencia para el ancho de banda del usuario y mayor la velocidad a la que el navegador podrá descargar y mostrar el contenido útil en la pantalla.

La optimización de la imagen es un arte y una ciencia.




Se considera un arte porque no hay una respuesta definitiva, respecto de cuál es la mejor manera de comprimir una imagen individual, y por otra parte, una ciencia porque existe una gran cantidad de técnicas y algoritmos bien desarrollados que pueden reducir notablemente el tamaño de una imagen.

Hallar la configuración óptima para una imagen requiere un análisis cuidadoso en muchas dimensiones; capacidades del formato, contenido de los datos codificados, calidad, dimensiones en píxeles y algunos detalles más.

¿Cuáles son los formatos de imágenes más utilizados para optimizar una web?

– WebP

Es un formato gráfico en forma de contenedor, que soporta tanto compresión con pérdida como sin ella. El formato WebP pretende ser un nuevo estándar abierto para gráficos en color.

El origen de este formato está en el códec de vídeo VP8, una tecnología desarrollada originalmente por la empresa On2 Technologies y posteriormente adquirida por Google, para liberarlo años después.

Google era consciente de que gran parte del ancho de banda consumido en Internet era responsabilidad directa de las imágenes, y por ello, aprovechó la tecnología de VP8 para desarrollar un formato pensado directamente para la Web.
En las pruebas más frecuentes se observa una reducción del tamaño bastante importante, en el orden de entre el 30 y el 60%.

WebP soporta 24 bits y 16,8 millones de colores. También es compatible con la animación, los perfiles ICC, los metadatos XMP y la transparencia a través del canal alfa.

Además del formato de archivo simple/básico, WebP también es compatible con formatos extendidos y animados. El contenedor extendido permite la incrustación de metadatos avanzados, incluidos el perfil de color, el control de animación, EXIF y XMP. El formato de imágenes animadas incluye varios fotogramas, así como fragmentos ANIM (parámetros de animación global) y ANIMF (información de fotogramas únicos).

– JPEG 2000

JPEG 2000 (JP2) es un sistema de codificación y un estándar de compresión de imágenes con pérdida y sin pérdida.

Fue creado por el comité Joint Photographic Experts Group en el año 2000 con la intención de sustituir al formato estándar JPEG. Mientras JP2 puede admitir cualquier profundidad en bits del color, la mayoría de las implementaciones utilizan colores de 24 bits.

JPEG 2000 no es compatible con versiones anteriores de JPEG, soporta la transparencia, pero no la animación.

JPEG 2000 puede trabajar con niveles de compresión mayores que los de JPEG sin incurrir en los principales defectos del formato anterior con altas tasas de compresión: generación de bloques uniformes y aspecto borroso. También se adapta mejor a la carga progresiva de las imágenes.

– JPEG XR

JPEG XR (eXtended Range) es un estándar de compresión sin pérdidas y con pérdidas y un formato de archivo para imágenes fotográficas de tono continuo, basado en una tecnología desarrollada originalmente y patentada por Microsoft bajo el nombre HD Photo.

JPEG XR admite una profundidad de color de hasta 32 bits, además de transparencia a través de un canal alfa. Por otro lado, no soporta la animación.

La optimización de las imágenes depende de la gran variedad con las que podrías estar tratando, encuentra la mejor opción para tu web.