Cómo optimizar correctamente imágenes para web

Una buena página depende de la calidad de sus imágenes.

Diseñar, desarrollar y publicar una página web es un trabajo delicado con multitud de detalles a pulir. Insertar esos archivos de imagen de forma adecuada es vital y depende de varios parámetros. En este artículo te quiero dar unas pautas importantes sobre el tratamiento de los recursos gráficos.

Contenidos

En Squembri somos conscientes del impacto que produce una web a nivel gráfico, de ahí la importancia que damos a las imágenes a la hora de diseñar una página web. Observamos como un error muy habitual subir fotografías a la página que no están previamente optimizadas y esto genera un efecto negativo directo en el posicionamiento, aumentando los tiempos de carga del sitio y perdiendo a los usuarios sobre la marcha. Si queremos tener a Google de nuestro lado debemos ser conscientes del valor de subir imágenes optimizadas a la web.

La importancia de subir imágenes optimizadas

A veces por las prisas o simplemente por desconocimiento se suelen subir imágenes directamente descargadas de Internet, de la cámara de fotos o del propio móvil sin tener en cuenta que estas deben pasar una auditoría previa antes de ser subidas a la página. Por eso te aconsejo que, antes de subirla, te preguntes:

  • ¿He reducido el tamaño y peso de la foto?
  • ¿He cambiado el título de la imagen?
  • ¿Se ve con calidad?

Comprimir el tamaño de las imágenes debe ser una prioridad, más aún después de la nueva directiva de Google llamada Core Web Vitals, en la que se expone que el buscador valorará especialmente la velocidad de carga de tu web y una buena experiencia de usuario a la hora de incluirla en los resultados de búsqueda. Aquí es donde las imágenes tienen un papel fundamental.

Analiza qué imágenes debes optimizar

Lo primero que debemos hacer es analizar cuántas imágenes debemos mejorar y dónde están ubicadas dentro de nuestra web. En el equipo de desarrollo web de Squembri hacemos uso de varias herramientas para ello. Por un lado, utilizamos las propias de Google, Dev Tools, para detectar los problemas que puedan causar una mala experiencia de usuario. No obstante, para la cuestión que nos ocupa, haremos uso de Screaming Frog, un programa de rastreo que nos indicará qué imágenes superan los 100KB de peso (Over 100 KB) y pueden estar causando un bajo rendimiento en la web.

Optimizar una web con Screaming Frog

Aclaración:  El peso máximo que aconsejamos en Squembri debe ser inferior a los 200KB, sugerimos que no sobrepase los 1900px de ancho en caso de ser una fotografía a pantalla completa y por supuesto que esté guardada a 72ppp; son los parámetros habituales para web.

Herramientas para optimizar imágenes sin perder calidad

Optimizar una foto no es sólo cambiar su tamaño y reducir el peso. Es comprobar si la imagen se está visualizando al tamaño adecuado, si este necesita ser reducido o por el contrario debemos aumentarlo. Es comprobar si tiene una nomenclatura correcta, si estamos usando mayúsculas o caracteres extraños o si el nombre que hemos dado a la imagen define correctamente el contenido de la misma.

En cualquier caso, el primer paso será reducir el tamaño y el peso usando cualquiera de estas herramientas:

Adobe Photoshop

Es el programa más versátil y profesional, con el que nos aseguramos de subir la imagen a la mejor resolución y calidad. Lo haremos en dos pasos:

  1. Cambiar el tamaño de la imagen, desde el menú “Imagen” > “Tamaño de imagen”.
  2. Guardar para web, provocando una exportación de la imagen optimizada. Esto lo haremos desde el menú “Archivo” > “Exportar” > “Guardar para web”. Desde aquí también podrás cambiar el tamaño de manera proporcional.

Alternativas a Photoshop

Existen otras herramientas online que cumplen la misma función como simulador de cómo optimizar una imagen. En ellas puedes subir una imagen, la analizan y la transforman para que puedas descargar una versión optimizada de la misma:

Herramientas para optimizar imágenes online

Plugins en WordPress para optimizar imágenes

En Squembri no somos especialmente partidarios de los plugins predefinidos para WordPress. Es cierto que hacemos uso de ellos; si la rueda ya está inventada y funciona debemos aprovechar e invertir el tiempo en otras cuestiones de valor. Por eso solo usamos aquellos que nos parecen realmente interesantes y que nos harán ganar tiempo, ya que un plugin nuevo no deja de ser más carga en la web (precisamente lo que queremos evitar). No obstante, si eres de los que prefiere usar un plugin para optimizar estas tareas, te recomiendo los siguientes:

  • Imagify, un plugin desarrollado por los creadores de WP Rocket. Si tuviera que recomendarte solo uno, sería este.
  • Smush. Es de los que más años lleva en el mercado y se ha ganado con creces la autoridad entre los plugins de optimización de imágenes.
  • EWWW Image Optimizer
  • ShortPixel

Qué otras cosas debemos tener en cuenta

Está claro que reducir el peso de la imagen es uno de los factores más importantes a la hora de optimizar las imágenes para web. Pero antes de subirla, debemos tener otras cuestiones en cuenta: 

  • Nombra la imagen describiendo de manera concisa el contenido de la misma e incluyendo la palabra clave principal.
  • Asegúrate de que el formato sea .jpg (si es fotografía), .png (colores planos o vectores) o .gif (imágenes animadas). 
  • Usa siempre minúsculas, nunca mayúsculas (¡prohibido!). 
  • Usa guión medio para separar las palabras. Nunca utilices espacios entre ellas ni guión bajo. 
  • No uses caracteres raros (acentuación, signos de admiración o interrogación, ç, ñ, etc.). Sabemos que puede ir en contra de las reglas más básicas de ortotipografía, ¡pero el SEO es así, no lo hemos inventado nosotros!
  • Asegúrate de que estén comprimidas sin perder calidad. (El peso depende de la calidad y del tamaño de la imagen). Para que te hagas una idea, una imagen de 1500x500px no debería pesar más de 200Kb máximo de archivo.

Conclusión

Estos consejos te sirven como introducción práctica a la optimización de imágenes para web. Hemos concretado la resolución que deben tener, herramientas para conseguirlo y otros detalles a tener en cuenta. En Squembri aplicamos estos procesos en el diseño de páginas web y así se lo hacemos saber a los responsables de los proyectos en los que trabajamos. Como agencia de publicidad debemos tener todos estos factores en cuenta. También queríamos compartirlos con vosotros. 

Tener una página web es mucho más que tener presencia online. Es una ventana al exterior, un catálogo visual que nos expone a nuestros futuros y posibles clientes y que ha de transmitir el nivel de importancia que le damos a nuestro proyecto. ¿Acaso no tenemos limpia y recogida nuestra casa antes de recibir una visita? ¿Vas a darle más importancia a la visita offline que a la visita online?

Subir imágenes a la web correctamente y con el SEO de tu parte
Icono

Si sabes lo que quieres contar y sabes a quién quieres contárselo, nosotros sabemos cómo hacerlo.

Icono Icono 1 Icono 2

Agencia de publicidad Granada

958 52 11 10 | 675 659 167

Avenida Fernando de los Ríos, 11, portal 4, oficina 19 (Armilla)

Pertenecemos a la Asociación Andaluza de Diseñadores, una entidad que impulsa el trabajo realizado en nuestra comunidad autónoma.

Somos socios del Club de Creativos, una organización de referencia que trabaja por unir el talento creativo en nuestro país.

Formamos parte del Club de Directores de Arte de Europa, una institución que apuesta por la excelencia en nuestro continente.