Cómo optimizar las imágenes para tu web

Actualizado el viernes, 15 diciembre, 2023

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:

Formatos de edición

En muchas ocasiones necesitamos trabajar con formatos que sean editables. Ya sea para hacer modificaciones a posteriori, como para hacer otras versiones del mismo archivo. En este caso, dos de los formatos más comunes son TIFF y PSD.

Los formatos de imagen TIFF (Tagged Image File Format) y PSD (Adobe Photoshop Document) son ampliamente utilizados en el ámbito de diseño gráfico y producción de imágenes.

TIFF (Tagged Image File Format):

1. Sin Pérdida de Calidad: TIFF permite la compresión sin pérdida, lo que significa que puedes guardar imágenes sin comprometer la calidad original. Esto es crucial en aplicaciones donde se requiere preservar cada detalle, como en la impresión de alta resolución.
2. Soporte para Capas y Transparencia: TIFF puede almacenar información de capas y transparencia, lo que lo convierte en una elección sólida para trabajos de diseño y edición de imágenes. Esto es especialmente útil cuando necesitas preservar la estructura y los elementos de diseño en un proyecto.
3. Formato Versátil: TIFF es compatible con varias configuraciones de bits por píxel, lo que significa que puede adaptarse a diferentes necesidades, desde imágenes en escala de grises hasta imágenes en color de alta profundidad.
4. Amplio Soporte de Software: TIFF es compatible con muchos programas de software, incluyendo aplicaciones de diseño gráfico, editores de imágenes y software de impresión, lo que facilita la interoperabilidad en diferentes plataformas.

PSD (Adobe Photoshop Document):

1. Edición Completa en Capas: PSD es el formato nativo de Adobe Photoshop y es ideal para proyectos que requieren una edición detallada en capas. Guarda la información de cada capa, permitiendo realizar ajustes incluso después de que se haya guardado el archivo.
2. Compatibilidad con Adobe: PSD es perfectamente compatible con otros productos de Adobe, como Illustrator e InDesign. Esto facilita la integración de diferentes elementos de diseño en proyectos más amplios.
3. Guarda Ajustes y Metadatos: PSD permite guardar ajustes de capa, metadatos y otros detalles específicos de Photoshop. Esto es valioso cuando necesitas preservar configuraciones específicas de edición para futuras referencias.
4. Soporte para Gráficos Vectoriales y Rasterizados: PSD admite tanto gráficos vectoriales como rasterizados, lo que facilita la creación de composiciones complejas que involucran diferentes tipos de imágenes.

Ambos formatos, TIFF y PSD, son adecuados para situaciones donde se requiere alta calidad, flexibilidad y capacidad de edición. La elección entre ellos dependerá de los requisitos específicos del proyecto, la compatibilidad con el software y las preferencias del flujo de trabajo de diseño.

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!