Acelere su sitio web gestionando las imágenes como un chef

Las imágenes son indispensables en todo sitio web, pero si no se gestionan correctamente, pueden causar que el sitio web responda de manera lenta. Comparado al texto, las imágenes de un sitio web estándar llegan a necesitar mas de veinte veces mas de datos que el sitio web en él mismo. Vamos a ver diferentes técnicas que se pueden aplicar para reducir al máximo los efectos de las imágenes en la velocidad del sitio web, pero primero, debemos entender los diferentes tipos de imágenes y como se estructuran en los ficheros asociados.

Las imágenes con pixeles

Estas son la mayoría de las imágenes que se ven en cualquier sitio web, los formatos más conocidos son: bmp, jpg, png, gif…

Este tipo de imagen se guarda creando una especie de mapa de puntos llamados “pixeles”. Cada punto (o píxel) contiene su color en tres bytes, uno para cada color primario (rojo, verde, azul) en inglés RGB.

Imágen de pixeles
Figura 1.- Ejemplo de imagen con pixeles

 

En la figura 1, diremos que la imagen tiene una resolución de 7x10 (7 pixeles en horizontal y 10 pixeles en vertical). La imagen de la figura 1 necesitara 7x10x3 bytes en su fichero correspondiente, es decir 210B. Como las imágenes son en dos dimensiones la talla del fichero asociado augmenta exponencialmente cuando augmentamos la resolución. 

La calidad de las imágenes de pixeles va asociada con la resolución. Para poder ver nuestra imagen de la figura 1 correctamente en un ordenador, necesitaremos una resolución de 700x1000 y el fichero resultante tendrá una talla de 2.1MB sin compresión (veremos la compresión más adelante)

 

Las imágenes vectoriales

Las imágenes de vectores (o vectoriales) han llegado con fuerza hace relativamente poco y son aun minoritarias, el formato más utilizado es el “svg”

Este tipo de imagen guarda la información en vectores que representan la imagen y es el navegador quien tiene que interpretar los vectores y construir la imagen.

Figura 2.- Ejemplo de imagen vectorial

Este tipo de imagen guarda la información en vectores que representan la imagen y es el navegador quien tiene que interpretar los vectores y construir la imagen.

En la figura 2 se muestra el equivalente de nuestra imagen de ejemplo en formato vectorial. Los vectores son líneas que unen dos puntos y crean formas geométricas que pueden ser muy complejas. Los vectores se guardan en su fichero correspondiente en un formato de texto llamado XML. El fichero resultante de la figura 2 tendrá una talla inferior a 1KB, pero lo mas importante, su representación será siempre perfecta independientemente de la resolución de la pantalla.

Las imágenes vectoriales tienen la gran ventaja de necesitar muchos menos datos. El problema es que estas imágenes solo se pueden utilizar en dibujos (que a veces pueden ser muy realistas, cómo en la Figure 3) pero no en fotos

 

Imagen vectorial compleja
Figure 3.- Imagen vectorial compleja

 

Comprimir las imágenes

Es, sin ninguna duda, la primera técnica que se tiene que aplicar es la más fácil de poner en marcha. Cualquier imagen de pixeles se puede comprimir reduciendo su talla considerablemente. El rey de la compresión es el formato jpg que todo el mundo conoce. Nuestra imagen de la Figura 1 que hacía 2.1MB si la comprimimos en formato jpg solo ocupará unos 20KB en función del factor de compresión que utilicemos.  El inconveniente de la compresión es que la imagen es ligeramente modificada y, a veces, los efectos de la compresión son visibles.

 

Una resolución adaptada a la pantalla

Como hemos visto antes, los ficheros de imágenes de pixeles augmentan mucho su talla cuando utilizamos resoluciones altas. Sería pues lógico, que presentáramos imágenes con menor resolución en un móvil que en un ordenador que tiene la pantalla más grande. Un móvil tiene una resolución de 340x480 pero un ordenador puede tener una resolución de 1200x900. Si utilizamos una imagen con una resolución superior a 340x480 en un móvil, no nos servirá para nada y, además, estaremos monopolizando la conexión internet para cargar unos datos que el usuario no le sirven. I todo esto sin contar que en un móvil lo mas probable es que no esté conectado al WiFi y tenga una conexión internet menos buena que un ordenador

En conclusión, una buena técnica es proporcionar la misma imagen, pero con resoluciones diferentes en función del soporte que se utiliza

 

Utilizar imágenes vectoriales cuando sea posible

Como hemos visto antes, las imágenes vectoriales no dependen de la resolución y, a menudo, necesitan menos datos para representar su imagen equivalente en mapa de pixeles. Por lo tanto, es aconsejable de utilizar imágenes vectoriales cuando sea posible. Hay muchos programas disponibles en el mercado para la creación de imágenes vectoriales, uno que además es gratuito y bastante completo es Inkscape

 

Cargar las imágenes solo cuando sea necesario

Esta es una técnica llamada “Lazy loading” o carga perezosa. El principio es simple, cuando cargamos el sitio web, solo las primeras imágenes son descargadas y, a medida que vamos bajando en el contenido de la página las nuevas imágenes que aparecen en la pantalla son descargadas. Si nos paramos a la mitad de la página, las imágenes que están en la segunda mitad de la página web nunca serán descargadas.  

Ésta es una de las mejores técnicas, ya que si no se utiliza en el momento que cargamos la página web se cargan todas las imágenes en paralelo distribuyéndose la capacidad  de la conexión que tengamos.

 

kubiiks utiliza todos los métodos descritos aquí para optimizar sus sitios web, permitiendo así una experiencia de usuario única

 

Creado : 01-Apr-2020

Descubra como las nuevas tecnologías web le pueden ayudar

Recibirá un correo electrónico al mes con explicaciones de nuevas funcionalidades del web

Condiciones de utilización de datos personales