En un mundo como el de Internet, en que todo va tan rápido, a nadie le gusta llegar a una web y tener que esperar más de 3 segundos a que se cargue. Esto nos puede llevar a perder visitas y clientes, por tanto, dinero.
Una de las razones por las que se producen problemas a la hora de que una web se visualice correctamente es el peso de las imágenes.
Esto no implica que tengas que renunciar a ellas, al contrario, pero sí será necesario que utilices los formatos de compresión adecuados para optimizar las imágenes al máximo y conseguir que tu web se cargue de manera fluida.
Tipos de imágenes
Se puede hablar de dos tipos principales de imágenes: imágenes de mapas de bits e imágenes vectoriales.
Debes utilizar unas u otras en función de tus necesidades concretas, por eso es importante que conozcas las características de cada una de ellas.
Imagen de Mapa de bits
Los mapas de bits son agrupaciones de pequeños puntos llamados píxeles. Un píxel es la más pequeña unidad de información que forma parte de una imagen digital. Cuanta más cantidad de píxeles mayor calidad tendrá la imagen y mejor se visualizará.
Cada píxel está representado por un número de bits. Dependiendo de la cantidad de bits que se utilicen para mostrar un píxel, obtendremos un color diferente.
El color de un píxel está representado por la combinación de tres espectros de colores: rojo, verde y azul.
Las imágenes en mapa de bits se suelen definir por su alto y ancho en número de píxeles (1920 x 1080) y por su profundidad de color en bits por píxel. Esto determina el número de colores que se pueden almacenar en cada píxel así como la calidad de color de la imagen.
Ten en cuenta que este tipo imágenes pierden calidad en cuanto se escalan, al contrario de lo que sucede con las imágenes vectoriales que veremos en el siguiente punto.
En la segunda imagen puedes apreciar una considerable pérdida de calidad al aumentar el tamaño de la imagen.
Imagen Vectorial
Se trata de una imagen digital representada por entidades geométricas (polígonos, segmentos…) y fórmulas matemáticas.
La imagen vectorial se construye a partir de vectores, que son objetos compuestos por puntos y que se modifican o varían para dar una forma a la imagen final.
En los gráficos vectoriales se puede ampliar el tamaño de una imagen sin sufrir la pérdida de calidad como pasa en los mapas de bits.
Además, las imágenes vectoriales pesan mucho menos que las imágenes de mapas de bits, por eso son tan utilizadas por la gente que se dedica al diseño.
A pesar de las diferencias, las imágenes de mapas de bits y las imágenes vectoriales pueden combinarse.
Una imagen formada por píxeles puede convertirse en una imagen vectorial y una imagen vectorial puede exportarse como una imagen de mapas de bits.
Al tratarse de imágenes vectoriales puedes observar como, incluso, aumentando casi al máximo el tamaño de la imagen, no pierde nitidez.
Compresión de imágenes
Las técnicas de compresión se utilizan para reducir, mediante algoritmos matemáticos, los datos irrelevantes de las imágenes y así disminuir los recursos que consume.
De esta forma, se pueden almacenar una cantidad mucho mayor de imágenes sin ocupar tanto espacio.
Compresión sin pérdida
Es utilizada cuando resulta importante conservar la calidad de la imagen. El grado de reducción de la información está limitado, por lo que los archivos siguen ocupando mucho espacio, a pesar de la reducción.
Compresión con pérdida de información
Este tipo de compresión descarta información irrelevante consiguiendo una reducción de datos mucho mayor que en el caso de la compresión sin pérdida.
Con esta reducción, en ocasiones, puede verse mermada la calidad a grandes niveles, aunque lo habitual es que este método de compresión sea imperceptible para el ojo humano. El formato más habitual es el JPG.
Formatos de compresión
Los principales formatos de compresión que se utilizan actualmente en Internet son:
Imágenes de Mapas de bits
Formato JPG / JPEG (Joint Photographic (Experts) Group)
Formato JPG / JPEG (Joint Photographic (Experts) Group)
- La única diferencia que existe entre estos dos formatos es que JPG se corresponde con los archivos que se utilizan en un PC y JPEG se corresponde con archivos que se utilizan en un MAC.
- Es el formato de compresión más utilizado para imágenes digitales y fotografías, tanto a color como en escala de grises. Es capaz de guardar información con más de 16 millones de colores diferentes. Soporta paletas de color RGB (para la web) y CMYK (para imprimir), por tanto es apto tanto para Internet como para la impresión.
- Los niveles de compresión son muy altos sin verse mermada la calidad de la imagen a niveles elevados. Este formato analiza con detalle las imágenes y elimina la información que no es apreciable para que el archivo ocupe menos espacio.
- Algo destacable en este formato es que admite diferentes niveles de compresión, por lo tanto podremos escoger entre hacer una compresión moderada o más elevada en función de la calidad y el tamaño de archivo que necesitemos.
- JPG no admite transparencia, es decir, aunque tu imagen no tenga fondo, en cuanto la guardes se generará uno de color blanco.
- Si hablamos de fotografía web, este es el formato elegido, ya que la calidad de la imagen es muy buena incluso si se ha realizado una compresión bastante elevada.
- Hay que tener en cuenta que el JPG es un método de compresión con pérdidas, por tanto, es importante hacer siempre la compresión desde el archivo original, pues si vamos haciendo compresiones desde los diferentes archivos que vamos generando, la calidad se verá muy perjudicada.
Aunque la imagen está comprimida, el nivel de calidad es bastante bueno y el peso mucho menor que el de la imagen original.
Formato GIF (Graphic Interchange Format)
- Este formato reduce su información cromática a una tabla de 256 colores (8 bits), por lo tanto, no es un formato apto para la visualización de fotografías.
- Si tenemos una imagen con una paleta de colores inferior a 256, GIF actuará como un formato de compresión sin pérdida, por el contrario, si la imagen tiene una paleta de colores superior, GIF puede perder un porcentaje muy elevado de colores y ofrecer una mala calidad.
- Es el formato por excelencia para las pequeñas animaciones de Internet (de 1 o varios fotogramas que duran de 3 a 5 segundos y se repiten indefinidamente) Además, soporta transparencia.
- También se suele utilizar en banners publicitarios, puesto que el impacto es mayor que el de una imagen estática.
- Además de su uso como animación, también se utiliza para gráficos como logotipos en los que no se necesita mucha profundidad y color y, por tanto, la compresión no plantea problemas de mala visualización.
Formato PNG (Portable Network Graphics)
- Un formato que surge como alternativa al GIF, más moderno y con posibilidad de comprimir imágenes sin pérdida y una profundidad de color de hasta 24 bits. Sin embargo, no es un formato con el que se puedan realizar animaciones. Soporta paletas de color RGB pero no CMYK, por lo que no es un formato apto para la impresión.
- PNG soporta transparencias y semitransparencias, ya que posee un canal alfa de 32 bits.
- Debido a que se trata de un formato de compresión sin pérdida, los archivos que genera tienen un peso elevado, por tanto, no es tan recomendable para las fotografías web como lo es el formato JPG.
- Nos encontramos con 2 tipos de formatos PNG:
- PNG 8: tiene limitación de colores, comprime un máximo de 256, como el GIF, y su tamaño es muy pequeño.
- PNG 24: no tiene limitación de colores, alcanza los 16 millones, pero su peso es mayor.
- Su uso más adecuado es para pequeñas ilustraciones (iconos, logotipos), imágenes sin fondo, imágenes que contengan texto, fotografías en las que necesitemos compresión sin pérdida (aunque sabemos que su peso va a ser mucho mayor que un formato JPG)
La primera imagen está comprimida en PNG 8 y tiene un peso de 23,4 Kb. La segunda imagen está comprimida en PNG 24 y pesa 56,2 Kb. La diferencia de calidad es poco apreciable en este tipo de gráficos, sin embargo, la diferencia de peso puedes ver que es considerable. Es importante que tengas en cuenta todos estos factores para escoger el tipo de compresión que más te convenga.
Imágenes Vectoriales
Formato SVG (Scalable Vector Graphics)
- Aunque es poco conocido, se trata del formato de compresión de imágenes vectoriales más popular en la actualidad. Ten en cuenta que también estás ante un formato apto para animaciones.
- Al tratarse de un formato vectorial permite escalar las imágenes sin perder la calidad, además de ocupar muy poco espacio, por lo que es ideal para la web.
- En un momento en que los desarrolladores web trabajan luchando por la optimización WPO, los archivos SVG ofrecen muchos beneficios.
- Estos archivos te permiten visualizar perfectamente una imagen independientemente de la resolución que tenga la pantalla en que la estés viendo.
- Se trata de un formato que te permite utilizar tanto vectores (polígonos, segmentos…) como imágenes y texto. No es apto para fotografías, ya que tendría que transformar todos los elementos en vectores.
- El principal «inconveniente» de este formato es que, por motivos de seguridad, los archivos se detectan como maliciosos en sistemas como WordPress, por lo tanto, no dejará que los subas a tu web. Será necesario que insertes un código o que instales un plugin, aunque merecerá la pena.
Conclusiones
La velocidad de carga de las páginas es un factor muy importante para conseguir que los usuarios no abandonen tu web.
Cuanto más tiempo esté un usuario esperando a que se cargue el contenido, más probabilidades existen de que renuncie a la búsqueda y localice otro sitio.
Que tu web tarde poco en cargar también es un factor importante a la hora del posicionamiento en Google, pues valora mucho la experiencia de usuario de las webs que tienen tráfico.
La correcta utilización de los formatos de compresión, tanto de vídeo como de imágenes, ayudarán a mejorar la velocidad de carga de tu web. Utiliza adecuadamente estos formatos de compresión y verás como aumenta la visualización de tu web. ¿Estabas utilizando bien estos formatos? Cuéntame tu experiencia.
