Cómo optimizar las imágenes para tu web

Actualizado el jueves, 24 noviembre, 2022

Es muy importante que aprendas a optimizar las imágenes de tu web. Uno de los principios más básicos de la web y, quizás, el más relevante, 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 revisar 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 empezar a optimizar a imágenes en web.

Tamaño y peso 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 que puedas, 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 poner las 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 300 k es un peso ideal y seguro para garantizar la calidad.

Además, no te olvides de rellenar los atributos width y height de la etiqueta <img>, ya que es un factor que se tiene en cuenta para calificar tu SEO. La carencia de esta información podrá hacerte bajar en los resultados de búsqueda de tu web.

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. Recuerda que en dinahosting te ofrecemos nuestro WordPress Optimizado, con plugins de optimización de imágenes ya preinstalados.

Formatos de imagen

Por historia, los tres tipos estándar de archivo de imagen más común son: 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 diferentes gamas de colores y soporta transparencia.

Actualmente, la web posee muchos más formatos de imagen. De hecho, el formato que se recomienda ahora mismo para las imágenes bitmap es el WebP. En otro artículo del blog te contamos al detalle qué es WebP y cómo sacarle el máximo provecho.

Recuerda que la resolución es importante, sobre todo en impresión, pero en imágenes para web, una resolución de 72 ppp será más que suficiente. La resolución de una imagen determina el peso en Bytes que esta tendrá. A menor resolución, menor peso, y eso nos beneficiará en los tiempos de carga.

Si lo que necesitas para tu web son imágenes vectoriales, el formato por excelencia es SVG. Es un formato vectorial optimizado para web, basado en XML. Permite añadir etiquetas para mejorar su accesibilidad y puedes manejas sus propiedades a través de instrucciones CSS.

Aquí tienes una tabla a modo de resumen con las características de cada formato:

Accesibilidad para optimizar tus 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. Cada vez que alguien busca algo en Google imágenes, puede ir a parar a tu web si te has preocupado de cuidar bien los detalles.

Lo primero es que 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, usa 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. Esta descripción proporciona una descripción detallada de lo que se puede ver en la imagen. A través de estas descripciones podrás introducir keywords que por sí misma la imagen no ayudaría a indexar.

Esperamos que estos trucos para optimizar imágenes en web te hayan resultado útiles. Es una tarea que te recomendamos llevar al día, puesto que te favorecerá tanto con respecto al rendimiento como a la accesibilidad de tu página.

¿Te surge alguna duda? ¡Te leemos en los comentarios!