Las imágenes son una parte muy importante para un sitio web. Sirven para mostrar tus productos, el resultado de tus servicios, explicar procesos… Además aportan diseño y calidad visual, con lo que tu página web será mucho más atractiva para el usuario, convirtiéndose en un recurso imprescindible para mantener la atención del lector.

Pero para poder aprovechar las ventajas que nos proporciona el uso de  imágenes en nuestro sitio web, hay que tener en cuenta una serie de factores. De hecho, de no cumplirlos podríamos conseguir justo lo contrario: que el rendimiento del sitio web se vea afectado. ¿Cómo? Muy sencillo: la velocidad de carga de una web es un factor muy relevante en muchos aspectos: para el posicionamiento orgánico, para mantener una tasa de rebote baja e incluso para no desperdiciar presupuesto en la inversión publicitaria. 

Por todas estas razones, te vamos a dar una serie de recomendaciones para que las tengas en cuenta al subir imágenes a tu web.

El formato

Podemos identificar tres formatos de imágenes que destacan en el uso de web: PNG, JPG y GIF. Cada uno cumple una función diferente.

  • PNG: Es el formato utilizado para logotipos, iconos e imágenes sin fondo (con fondo transparente), son un poco más pesados que el JPG, pero a la hora de diseñar un sitio web son necesarios para algunas funcionalidades. 
  • JPG: Es el formato por excelencia para comprimir imágenes. Con este formato puedes conseguir imágenes de muy bajo peso sin perder la calidad. Te recomendamos usar JPG para todas esas imágenes que no sean logos o iconos, como pueden ser banners o imágenes para acompañar el contenido de tu blog.
  • GIF: Es un formato para animaciones, ya que utiliza una secuencia de varias imágenes que se van reproduciendo a la velocidad que hayamos elegido. Suele perder mucha calidad al comprimirse.

La resolución

La resolución de una imagen se mide en píxeles por pulgadas (pp), cuanto más elevado sea el número de pp, mayor será la calidad de la imagen. Pero ¡ojo! tampoco se debe utilizar una calidad excesiva, ya que aumentará el peso de la imagen.

La resolución recomendada para las imágenes que se usan en web debe oscilar entre 72 pp y 150 pp. Puedes comprobar la resolución real de tus imágenes en su ficha de detalles (clic con el botón derecho > propiedades > detalles) o usando Photoshop.

Si utilizas Photoshop hay una forma de guardar imágenes listas para utilizar en tu sitio web, Puedes encontrarla en archivo > guardar para web. Ahí podrás cambiar la resolución de tu imagen, además encontrarás todas las opciones, para elegir el formato y el tamaño,  podrás ir viendo cómo varía el peso según las funciones que elijas. Ahí podrás cambiar la resolución de tu imagen, además de encontrar otras opciones para elegir el formato y el tamaño. Verás cómo varía el peso según las opciones que elijas. Jugando con las diferentes opciones podremos lograr nuestro objetivo: optimizar el peso de la imagen sin perder calidad perceptible de la misma.

El peso

El tamaño o peso de la imagen será determinante para calcular la velocidad de carga de una página. Independientemente de la resolución que tenga una imagen, podemos optimizarla para que, sin una pérdida apreciable de calidad visual, pase de pesar de 5 MB a  100kb. Para esto es importante la manera en la que guardemos nuestra imagen cuando la exportamos desde Photoshop y que la optimicemos antes de subirla a nuestro sitio web.

En alGenio recomendamos el uso de imágenes de menos de 500 kbs. Para ello, tras haberla exportado correctamente desde la herramienta de edición que usemos, podemos pasarla por alguna de las muchas herramientas online que existen para comprimir imágenes, aquí te dejamos algunos ejemplos:

Tamaño en píxeles

En función de los píxeles que tenga  una imagen, tanto de largo como de ancho, se puede determinar su tamaño. Este tamaño es relevante a la hora de decidir cuántos píxeles debe tener una imagen para web, ya que la respuesta es: depende. Depende de cuál va a ser la función de esa imagen, a continuación dejamos algunos ejemplos para que te sirvan de orientación. 

  • Imágenes para la cabecera (header o slider): es una imagen que va a ocupar la totalidad del ancho de nuestra pantalla por lo que debería tener una tamaño de entre 1500 y 3000 píxeles de ancho. 
  • Imágenes que acompañan al texto: estas imágenes suelen ocupar la mitad del ancho de nuestra pantalla o en muchos casos incluso menos. Su tamaño debe oscilar entre los 600 px y los 1000 px de ancho o largo, según la orientación de la imagen. 
  • Imágenes para productos o de cada miembro del equipo: Suelen ser imágenes cuadradas de 400 px x 400 px. 

Recuerda que es importante tener en cuenta que si una imagen va a rellenar un hueco cuadrado, esta no puede ser una imagen totalmente vertical, puesto que no quedará bien. La orientación y contenido de la imagen deben ser específicos para su función.

Saca partido a las imágenes en SEO

Cuando hablamos de SEO, solemos pensar en textos y enlaces. Pero, en muchas ocasiones, las imágenes son más fáciles de posicionar que el propio contenido. Google considera las imágenes uno de los factores a tener en cuenta de cara al posicionamiento orgánico de su algoritmo. Te recomendamos que los títulos de las imágenes estén relacionados con los términos y las palabras claves con las que te propones aparecer en Google. Además, recuerda que en web las tildes y la letra ñ no son caracteres legibles, por lo que nunca uses tilde ni ñ en tus títulos o títulos alternativos (alt).

Recomendaciones

Por último, te dejamos una serie de recomendaciones que, aunque no son técnicas, también te ayudarán a alcanzar una mayor calidad en tu sitio web.

  • Intenta que sean imágenes visualmente atractivas para el usuario. Por ejemplo, en el caso de una página de arquitectura, que sean fotografías de los espacios reformados y decorados, que estén llenas de luz y reflejen estancias amplias. 
  • Las imágenes deben estar estrechamente relacionadas con el contenido de la página o de la entrada de blog. La imagen debe reforzar el mensaje que queremos transmitir, y debe vender tu negocio.
  • Evita utilizar imágenes pixeladas o en las que no se vea claramente el contenido. 
  • Evita utilizar imágenes repetitivas, que sea demasiado parecidas.
  • Si crees que tus imágenes no cumplen los requisitos, siempre es preferible usar imágenes de stock, que sí tengan la calidad suficiente.

¡Esperamos que te haya sido útil! Ya no hay excusa para no tener imágenes 100% optimizadas en tu sitio web.

¿Necesitas ayuda con el diseño de tu sitio web?

Hablemos