Cómo optimizar las imágenes web para mejorar el diseño y el SEO

Una marca es mucho más que un logo, en la imagen corporativa entran en juego color, patrones, tipos, formas, texturas, servicio, actitud… 

Para obtener los mejores resultados en blogs, webs o tiendas online es necesario invertir algo de tiempo en cuidar las imágenes. Para lograr una correcta optimización se deben cumplir dos requisitos básicos, las imágenes deben poder ser indexadas por buscadores y deber verse bien.

99desings, la web de diseño online más importante del mundo, muestra cómo se puede mejorar el aspecto y el SEO de nuestra web, utilizando herramientas gratuitas de edición básica de fotografías.

1. Utilizar imágenes de alta calidad

Sin necesidad de ser un fotógrafo profesional, se pueden utilizar buenas fotografías en una web. Cada día hay más sitios de fotos de stock que permiten su descarga gratuita para un uso comercial. Algunos de los mejores son: Pixabay, Unsplash, PicJumbo, SplitShire o Little Visuals.

Como las fotos de stock no pueden usarse para todo (fotos del equipo, de los productos…), también hay algunos trucos para conseguir buenas imágenes de producto sin necesidad de utilizar una cámara profesional. Por ejemplo, se pueden crear espacios que hagan atractivo el conjunto de la imagen y vigilar el ángulo para mostrar el producto de la mejor forma posible. Además mostrar la escala ayuda a representar el tamaño concreto del producto.

Utilizar el formato correcto, JPEG o PNG

Las imágenes que se encuentran más fácilmente tienen formato JPEG o PNG, hay pros y contras de las dos, pero para 99designs.es, lo más importante es que las fotografías se guarden y suban como JPEG. Este tipo de archivo trata los colores de las fotografías de una forma muy manejable y eficiente, por lo que será mucho más sencillo editarlo que con un PNG.

Los gráficos, en cambio, especialmente los que tengan grandes áreas planas de color, deben guardarse en PNG. Esto incluye a la mayoría de archivos de diseño, infografías y logotipos. Los PNG son de mucha más calidad que los JPEG, y tratan de forma nítida las grandes áreas de color y los textos, de esta forma, se puede ampliar la imagen sin perder calidad.

También funcionan con fondos transparentes (imprescindibles para logos). Siempre que sea posible, es recomendable guardar los archivos PNG como “24 bits” en lugar de “8bits”, de esta forma se obtendrá una mayor calidad y una gama más amplia de colores compatibles.

¿Qué pasa con las fotografías que tienen texto sobre ellas? Si la mayor parte de la imagen es una fotografía, puede utilizarse como JPEG.

Balance entre tamaño de imagen y resolución para hacer una web “friendly”

Para las imágenes de la web, es importante encontrar el equilibrio entre el tamaño y la resolución del archivo. Cuanto mayor sea la resolución mejor se verá su imagen, pero mayor será el tamaño. Los archivos demasiado grandes pueden ralentizar la carga, lo que daña la usabilidad web y, posiblemente, los rankings en buscadores.

Por otra parte, es necesaria una imagen más grande para aprovechar el fondo. Al utilizar una foto de baja calidad, esta podría quedar borrosa o pixelada.

¿Cómo debe conseguirse este balance? Lo primero, es importante entender que cuando se refiere a imágenes el tamaño es un término relativo. Para impresión, se necesita un tamaño mucho más grande que para una web. Para ello resulta interesante tener en cuenta estos tres aspectos:

• Resolución: dejando atrás el mundo print, la resolución es la calidad o densidad de una imagen, medida en puntos por pulgada (ppp). La mayoría de los monitores de ordenador no muestran más de 72 ppp, por lo que cualquier cosa por encima de eso es demasiado y constituye una imagen innecesariamente grande. Cuando un programa de diseño tiene la opción de “guardar para web”, significa que está guardando el archivo en una resolución baja y web friendly.

• Tamaño de la imagen: la medida de la altura y el ancho de la imagen, en píxeles. Aunque lo normal en las imágenes impresas, es una medida de 4×6, 5×7, o 8×10, pero, por ejemplo, la imagen de portada de una web tiene 795×300 píxeles.

• Tamaño del archivo: el número de bytes que el archivo ocupa en el ordenador. El tamaño del archivo es el factor que puede ralentizar la web. Una foto de 15MB es un archivo muy grande. Un archivo de 125KB es mucho más razonable. Si el tamaño del archivo es demasiado grande, o la imagen será demasiado grande o la resolución demasiado alta.

Imágenes del mismo tamaño y forma

Las imágenes de una página web se verán mejor si se utiliza un estilo y proporciones coherentes.  La consistencia ayudará a la hora de alinear textos, columnas y otras informaciones en la web.

Nombrar el archivo correctamente para mejorar el SEO

La mayoría de la gente no se preocupa mucho de cómo nombrar sus archivos. Un nombre de archivo correcto puede impulsar el SEO.

Cuando Google explora su sitio web, puede leer el texto pero no puede ver lo que hay en las imágenes. El nombre del archivo proporciona la información acerca de lo que está en la imagen, por lo que Google puede interpretar correctamente, en lugar de llamar a una foto DSC12345.JPG,  debería llamarse Eiffel-tower.jpg)

Para una mayor consistencia, es recomendable llamar a  los archivos con las letras minúsculas y números del 0-9. No se deben introducir puntuaciones o espacios y lo mejor es utilizar guiones en lugar de guiones bajos.

[smartads]

Completar los textos y etiquetas

A la hora de subir una imagen, muchas veces se pasa por alto la información adicional. Igual que el nombre del archivo, esta información ofrece posibilidades en el SEO.

Las etiquetas no son visibles para el usuario, sin embargo, les dan a los buscadores una idea de lo que trata cada imagen. Una vez que añadido una imagen a la web, se debe trabajar con la descripción correcta, con palabras clave seleccionadas.

Colocar la imagen cerca de textos relevantes

Colocar imágenes que estén relacionadas con lo que el texto dice; una fotografía rodeada de un texto relevante mejorara la posición.

Este consejo también sirve para fotos típicas de stock. Si la web es sobre educación, no se obtendrá ninguna mejora en el SEO con la foto de una manzana. Las fotos de profesores, estudiantes, clases, etc., serán mucho más interesantes para los lectores y más relevantes para el tema.