Optimiza las imágenes para tu web

Actualizado el jueves, 16 julio, 2020

Uno de los principios más básicos de la web y, quizás el más importante, es el del tiempo de carga. Puedes escribir el post más maravilloso del mundo que, si por alguna razón tus imágenes no se cargan, tus visitas se irán a otra página.

Las imágenes son una parte integral de los contenidos online y están entre las causas más comunes del aumento del tiempo de carga. Por eso, lo mejor es optimizar su tamaño reduciendo la cantidad de información que contienen, comprimiéndola y eliminando metadatos innecesarios. Echa un vistazo a algunos consejos básicos para optimizar las imágenes de tu web:

Tamaño y formato de los archivos

Lo ideal es que el tamaño del archivo sea lo más pequeño posible. Así las imágenes pesan menos y cargan antes, y esto los buscadores lo premian.

Antes de subir imágenes a la web, es recomendable que las comprimas todo lo posible, sin que esto signifique comprometer su calidad. Para lograrlo, puedes usar la herramienta online Compressor.io.

Conocer los parámetros de tu web es el secreto para ajustar la imagen al tamaño correcto.Por ejemplo, si tu sitio tiene 800 píxeles de ancho, deberás ponerlas imágenes a este tamaño. La altura no importa demasiado, a no ser que quieras imágenes con un formato específico. Recuerda prestar atención a los bytes. Menos de 300k es un peso ideal y seguro para garantizar la calidad.

Para capturar, recortar y reescalar imágenes puedes utilizar Coloretto, una aplicación que encontrarás en tu Panel y que te servirá para editar fotos rápidamente (reescalar, recortar y aplicar filtros à la mode Instagram) y componer tus propias paletas de colores.

Si usas WordPress como gestor de contenidos, puede interesarte el plugin  EWWW Image Optimizer,con el que podrás optimizar todas las imágenes que subas a esta plataforma.

> Truco: cuando edites tus imágenes, elige la opción «Guardar para Web».

Formatos

Hay tres tipos estándar de archivo de imagen: JPEG, PNG y GIF. JPEG es el mejor para la compresión de fotografía digital. GIF se utiliza normalmente para clips de vídeo de baja resolución, imágenes animadas y logotipos con una paleta de colores limitada. PNG es el más recurrido en Internet, ya que soporta imágenes basadas en la gama de colores, la escala de grises e imágenes RGB.

> Truco: usa JPEG para fotografías, PNG para vectores y GIF para animaciones/vídeos.Puedes elegir el formato ideal para tus imágenes en cualquier software de edición de fotos.

Asignación de nombre a las imágenes

Tal vez no te hayas parado a pensarlo, pero las imágenes pueden generar enormes cantidades de tráfico a tu web desde los buscadores.

Por eso, cada imagen que utilizas en tu web merece un nombre. Y no solo lo merece, sino que necesita un nombre si quieres que tu sitio web la indexe. El nombre del archivo es un indicador del contenido de la imagen y para optimizarlo debes intentar que sea corto y descriptivo, utiliza guiones para separar palabras y evita acentos y otros caracteres especiales.

¡Ah! Y no te olvides de incluir una descripción textual de lo que representan visualmente tus imágenes para lector de pantalla, y así mejorar la accesibilidad de tu web.