Ocho reglas para la optimización de imágenes en la web

1.- Elija el formato adecuado para sus gráficos
Para imágenes de formas geométricas simples y rangos tonales sin complicaciones, se recomienda reemplazar los gráficos rasterizados con gráficos vectoriales.. Los gráficos vectoriales (por ejemplo, formato svg) se muestran igualmente bien en resoluciones altas y bajas. Se recomiendan para logotipos, iconos e ilustraciones.

Los gráficos de trama (tipo de archivo como png o jpg) funcionarán para imágenes y fotografías complicadas. Se puede lograr una bonificación a su optimización web con el formato WebP (consulte el punto 6).

2.- Use el nivel correcto de compresión al crear el archivo
El software de edición de fotos ofrece compresión al momento de guardar el archivo, dependiendo del tipo de archivo. Cada usuario debe encontrar la regla de oro personalmente, con la sugerencia general de mantener la compresión por encima del 92 %. Debe encontrar un punto en el que, sin sacrificar la calidad, el tamaño de la imagen sea satisfactorio.

3.- Utilice un compresor de imágenes avanzado
Los archivos de imágenes grandes se pueden comprimir adicionalmente con un minimizador de imágenes en línea. Usarlos es tan fácil como arrastrar y soltar un archivo y descargar el resultado. Haga que los compresores de imágenes sean sus herramientas para guardar para la web. Los servicios en línea que recomendamos incluyen Tiny JPG e ImageOptim. Encontrará muchas clasificaciones en línea de compresores de imágenes, ya que estos sitios son muy populares.

4.- Reemplace gif con videos donde sea relevante
Los archivos gif tienden a ser pesados, especialmente si incluyen secuencias de vídeo más largas. Puede ser mucho más conveniente usar varios tipos de archivos de vídeo comprimidos para ahorrar tiempo de carga de la página e introducir la optimización de visualización.Incluso podría considerar usar YouTube incrustado u otros vídeos en la nube, lo que evitará que el navegador descargue los videoclips directamente desde su servidor y todos a la vez.

5.- Sirve imágenes de manera receptiva
Para la optimización del sitio web, asegúrese de que su CMS sirva varias versiones de imágenes para diferentes dispositivos y resoluciones de pantalla.

6.- Use WebP, JPEG2000 y otros
El uso del formato WebP que apareció en el mercado ya en 2010 se convierte en un impulso para el SEO de su sitio web y, naturalmente, ahorra tiempo de carga. Este formato ofrece una imagen de buena calidad y un tamaño de archivo reducido. Sin embargo, el uso de este tipo de archivo puede estar limitado por la compatibilidad del navegador. También hay muchos más formatos web disponibles que, sin embargo, no han ganado tanta popularidad (heic, avif, jpeg, xl). ¡Y Google ya está pensando en WebP2!

Varios servicios en la nube, como Orbitvu SUN, sirven imágenes en formato WebP de forma condicional: si el navegador no lo admite, se utiliza jpg o png en su lugar.

7.- Use CDN para cargar imágenes
Las redes de entrega de contenido (CDN) pueden entenderse como api que definen cómo usar la imagen cargada en su sitio web. Pueden ser autogestionados o entregados por un servicio externo. Su uso se aplica mediante direcciones URL de imagen especiales que condicionan la forma en que el navegador muestra la imagen y puede generar un ahorro del 40-80 % en el tamaño de la imagen.

8.- Imágenes de caché que no cambian
El almacenamiento en caché funciona almacenando imágenes que no cambian en el disco del usuario y cargándolas directamente desde allí cuando sea necesario. El almacenamiento en caché generalmente lo manejan los navegadores, pero la construcción del sitio web puede fomentar esta solución y, por lo tanto, acortar el tiempo de carga de la página para los usuarios que regresan.

Para más información: ORBITVU PRODUCT TELEPORTING, SL
C/ Esteve Terradas 51-55 • 08023 • Barcelona
espana@orbitvu.com • tlf.:634 537 370