Cómo elegir y optimizar imágenes para tu web

Bienvenid@ a un nuevo post de Coach2Coach.

Cómo elegir y optimizar imágenes para tu web

Cuando en diseño web nos referimos al contenido, no estamos hablando solamente de los textos. El contenido web es todo aquello que un usuario puede ver en una página e identificar. El contenido web, por tanto, incluye imágenes, vídeo e infografías (al fin y al cabo, imágenes).

Como ya sabrás, el contenido web tiene una gran importancia a la hora de posicionar tu página o blog. El contenido consta, principalmente, de texto e imagen. Para Google es fácil leer el texto en HTML, no así las imágenes. Los robots de Google no son persona, son programas diseñados para leer sólo texto.

Por eso es importante optimizar las imágenes de cara al SEO. Pero vamos primero a ver cómo elegir las imágenes para tu web y después de cómo optimizarlas.

Cómo elegir las imágenes para tu web

Elegir las imágenes para una web no es tan fácil. En mi opinión, es algo muy subjetivo y personal. Pero, por otra parte, un diseñador web tiene la ventaja de contar con un montón de conocimientos al respecto que le convierten en una mejor opción a la hora de elegir las imágenes para una web.

No tengas prisa en elegir las imágenes.

Para un diseñador, al empezar a diseñar una web en WordPress, la elección de imágenes pasa a segundo plano y es, prácticamente, lo último que hace. La apariencia de la web en términos de layout (o sea, la elección del tema a configurar) seguramente ya está elegido. Sin embargo, para quien no sabe diseño web, elegir las imágenes para su web, es uno de los primeros pasos.

Lo anterior es un error. Si elegimos las imágenes antes de crear una buena estructura web, antes de pensar en la usabilidad web para crear una buena experiencia para el usuario, antes de realizar la redacción de textos o al menos los borradores, etc., es como elegir los muebles de nuestra nueva casa antes de tener los planos o saber las medidas.

Cuando tengas encaminada tu web (en los sentidos que acabo de indicar), entonces quizá ya puedas empezar a buscar imágenes para tu web.

Decide entre imágenes gratuitas y de pago.

Que las imágenes sean de pago no es sinónimo de

mejor calidad

mejor estética

exclusividad

Sí es cierto que, por lo general, es así. Si te decides por las gratuitas, ten en cuenta que muchas tienen derechos y no puedes usar cualquier imagen que encuentres en Google por el morro.

Para elegir imágenes de pago para tu web, mis bancos de imágenes favoritos son:

Photolia

iStock

Para elegir imágenes para tu web de forma gratuita, hay muchas opciones. Desde buscar en Google hasta bancos de imágenes gratis. Si las buscas en Google, recuerda que has de mencionar en la web de dónde has sacado la imagen, o elegir en la búsqueda la opción “Etiquetadas para reutilización”. Bancos de imágenes gratis que yo uso:

Freepik. Vectores, fotos, iconos…

Pixabay. Fotos, vectores, ilustraciones…

Unsplash. Tiene una pega. No puedes buscar imágenes por palabras clave.

Elige imágenes acordes con el contenido del sitio

Hay que darle la importancia que se merece a los criterios de búsqueda. Por ejemplo, por mucho que, a mí, una imagen de una mariposa me sugiera la idea “ir de flor en flor”, no he de pensar en mis propios marcos mentales, sino en los de mi audiencia objetivo.

Por otro lado, tratemos de realizar una búsqueda que sea lo menos genérica posible (“volar”) si no queremos obtener imágenes que también lo sean. Esto puede resultar en la elección de imágenes que no aportan el énfasis necesario.

Y, en tercer lugar, busquemos imágenes para la web que vayan algo más allá de lo que la propia imagen expresa, desde el punto de vista emocional o contextual. La intención con esto es crear un vínculo con el usuario. En el caso del ejemplo de “ir de flor en flor”, la imagen puede ir desde una persona rodeada de otras que se lo están pasando muy bien, hasta una abeja polinizando, etc.

Mantén la coherencia en las imágenes a lo largo de la web

Quizá si hablamos de un blog que no cuenta con una web propiamente dicha, esta “regla” puede ser algo más laxa. Pero si estamos hablando de elegir imágenes para una web, hacerlo de forma coherente y homogénea se convierte en algo serio.

Cuando hablo de mantener la coherencia me refiero al tipo de imágenes (fotos reales, vectores, iconos…), al tamaño y a la ubicación.

Las imágenes de la página de inicio, contacto y quiénes somos, pueden saltarse esta regla. Pero el resto debe ser homogéneo. Si mi página consta de 6 páginas, además de las citadas, todas las imágenes deberían ser del mismo tipo, tener el mismo tamaño y estar colocadas en el mismo lugar o mismos lugares. De lo que se trata es de dar una impresión de consistencia, no de un barullo desordenado e incluso caótico.

Elegir imágenes para tu web de forma adecuada requiere análisis y creatividad.

Cómo optimizar las imágenes de tu web

También forma parte de la elección, pero aquí además hablaremos de la optimización de imágenes de cara al SEO.

Google se fija en todo. Hay miles de factores dentro de tu web que suman o restan puntos de cara a tu posicionamiento web. Varios de ellos tienen que ver con las imágenes.

En primer lugar, el peso de las imágenes afecta al posicionamiento ya que pueden hacer tu web más lenta. En segundo lugar, la calidad de la imagen en una web puede ser determinante en la usabilidad de la misma. Es decir, si el usuario al entrar ve caos, imágenes de baja calidad o feas estéticamente, etc., el usuario abandonará y casi con toda seguridad no volverá. Esos abandonos son tenidos en cuenta por Google y perjudican tu posicionamiento. En tercer lugar, y como decía al principio, los robots de los motores de búsqueda no saben leer más que texto.

Elige imágenes de calidad y de poco peso

¿Cómo juzgar la calidad de una imagen? Bueno, es una pregunta algo difícil de contestar. Lo primero, se tiene que ver a la perfección. Creo que todo el mundo puede distinguir entre una imagen demasiado pixelada y otra nítida.

Respecto a la calidad y tamaño

Si eliges imágenes de poco tamaño, tienes dos inconvenientes: uno, quedan horribles. Y dos, si quieres hacerlas más grandes, pierden calidad, se ven pixeladas y feas.

Pero ojo, elegir imágenes grandísimas de tamaño no garantiza buen visionado en nuestra web. Al hacerlas o mostrarlas más pequeñas, también pierden calidad.

El mejor “truco” para elegir imágenes de calidad para nuestra web es saber el ancho de las páginas y escoger imágenes iguales a esa medida o un poco mayores. Si utilizas WordPress, como espero que sea tu caso, los temas difieren en el ancho e incluso en muchos puedes elegirlo, con lo que no voy a adentrarme más en eso. Cuando averigües el ancho de tus páginas, intenta que las imágenes sean de un ancho similar, si no exacto.

[Por ejemplo, yo cambié recientemente el tema de WordPress de esta web. Ahora las páginas son más anchas que antes, con lo que las imágenes destacadas de los posts, ahora quedan demasiado pequeñas. Puedes comprobarlo en casi todos los posts previos a noviembre 2015].

Elige imágenes de calidad, coherentes, de poco peso y de la medida adecuada.

Respecto al peso de las imágenes

Si tu web no cuenta con un blog, cosa que desaconsejo, entonces no importa mucho que tus imágenes sean grandes y pesadas. Al fin y al cabo, es un número limitado. Pueden tener hasta 1 mega, si no tienes demasiadas páginas estáticas y si no pones más de dos o tres imágenes en cada una.

Sin embargo, este no suele ser el caso. Lo normal es que la web tenga un blog, y que éste sea actualizado con nuevas entradas de forma regular y frecuente. Dentro de esos posts es bueno que pongas tres o cuatro imágenes, además de la imagen destacada (como si fuese la portada del artículo).

En este caso, ya son palabras mayores. Mi blog, en este momento, cuenta con más de 120 posts, y solamente publico uno a la semana de media. Imagina si pongo una imagen destacada y otra dentro del post, de 1 mega cada una. Se me hunde la web.

Para estos casos, recomiendo que las imágenes no tengan más de 50kbs. Las jpeg suelen ser menos pesadas que las png. Tenlo en cuenta. Si de vez en cuando no puedes convertirlas en un tamaño alrededor de 50, ok, sube hasta 100, pero no te acostumbres.

Una vez has elegido imágenes para tu web que son coherentes etc., si alguna no tiene las medidas idóneas, puedes usar una herramienta gratuita de image resizing. Yo utilizo Webresizer.com el 90% del tiempo. También a veces no me da para lo que necesito y lo intento con Resizeimage.net.

Estas herramientas te permiten subir una imagen y cambiar su tamaño y peso, cortarlas etc. Son muy fáciles de usar.

Recuerda que la calidad de las imágenes repercute en la usabilidad y el peso repercute en la velocidad de carga. Ambas cosas repercuten a su vez en el posicionamiento. Por ello, a la hora de elegir imágenes para tu web, ten en cuenta también el SEO.

Respecto a la optimización SEO (además de quitarles peso)

Cuando ya tengas la imagen exacta que quieres subir a tu post o página, tienes que optimizarla para SEO. Es decir, tienes que hacer todo lo posible para que Google no se la pase de largo, añadir texto.

Cómo optimizar imagenes para web

En tu ordenador o Mac, renombra el archivo, es decir, no dejes el nombre original de la imagen. Ponle un nombre relacionado con la palabra clave del post. Por ejemplo, si la imagen origina se llamaba “abeja amarilla con flores alrededor”, renombrala con algo que incluya la palabra clave de tu post: “xxxxx de flor en flor”.

Al subir la imagen a tu web, rellena los campos Título, Texto Alternativo y Descripción. Recuerda, para optimizar la imagen para SEO, ha de contener la palabra clave.

A continuación, pincha en la imagen para editarla y añade el “alt text”. No repitas la misma descripción, alt text etc., para diferentes imágenes.

Si quieres optimizar incluso más la imagen, puedes añadir también la leyenda, siempre que incluya diferentes variantes de la palabra clave.

Utiliza entre 2 y 5 imágenes en cada post, recordando siempre no usar la misma palabra clave exacta, sino distintas variaciones.

Créditos imágenes: Diseñada por Freepik | Diseñada por Vecteezy

La entrada Cómo elegir y optimizar imágenes para tu web es un artículo original de Diseño Web Coaching.