Imágenes: cómo buscarlas y optimizarlas de principio a fin

¿Imágenes? Con Canva es fácil y si pagas la licencia de algún banco como Shutterstock, más todavía.

Sería ideal que la cosa fuera tan sencilla, pero desafortunadamente no es así. En absoluto.

Hoy vamos a hablar de las imágenes y de su búsqueda, de su optimización y de su puesta a punto en WordPress.

Escribo estas líneas porque la gente, a pesar de tener un gusto exquisito para las imágenes que sube no parece querer optimizarlas, a pesar de los beneficios que ello conlleva. Al final del post te los cuento, pero ahora vamos a lo que vamos.

¿Dónde buscar imágenes?

Antes de optimizar una imagen hay que dar con la adecuada, y para ello nos podemos valer de distintas fuentes:

#1 Bancos de imágenes

Personalmente no soy muy fan de estos medios, simple y llanamente porque si decides no pasar por el aro y no pagar, te piden que menciones al propietario cuando uses esa foto en tu web.

Los bancos de imágenes pueden ser gratuitos o de pago. Los gratuitos tienen el inconveniente que te he comentado y los de pago suelen resultar peligrosamente caros.

Caros, claro está, en función del negocio al que te dediques; si eres diseñador gráfico o diseñador web seguro que no te importa pagar sus suscripciones, pero si no acaba siendo bastante dinero para el uso puntual que le vamos a dar.

Estos son algunos de los bancos de imágenes más conocidos:

• Shutterstock
• Pixabay
• iStock
• StockLib
• Freepik

Este post no va sobre bancos de imágenes, si gratuitos o de pago, así que paro ya. Si te interesa el tema, Vilma Núñez tiene un señor listado aquí.

#2 Editores online con banco de imágenes

Pues sí, estoy hablando de Canva, ese magnífico recurso que te permitirá hacer infografías, portadas, folletos y creaciones artísticas sin tener ni idea de diseño.

Para los que somos nulos creativamente hablando en este tipo de quehaceres, Canva nos viene de maravilla.

Le veo, en cambio, sus puntos buenos y sus puntos malos.

Los buenos, que tiene muchas imágenes para elegir y que manipularlas a tu antojo es realmente intuitivo.

Los malos, que las imágenes en sí no son tan fácilmente editables. Más que las imágenes, hablo del lienzo donde se ubican.

Te lo explico: Canva te permite elegir lienzos con un formato predefinido, y sobre él estampar la imagen que quieras. El resultado es el que es, y a nivel de propiedades de la imagen podrás hacerle de todo: cambiarla de tono, ponerla en blanco y negro, darle más brillo, etc.

A nivel de tamaño, en cambio, Canva deja mucho que desear: no podrás modificarlo. Este es su gran(dísimo) problema, desde mi punto de vista.

Es más complicado escribirlo que entenderlo una vez experimentas con Canva. Si no lo has hecho aún, pruébalo y verás a lo que me refiero.

Y es aquí cuando pasamos al plan B, Stencil.

Yo uso Stencil (ojo, el link es de afiliado). No porque lo considere el mejor que Canva, sino porque requiero cierto nivel de personalización del tamaño final de la imagen.

En Stencil te pones el lienzo al tamaño que quieras, añades la imagen que elijas de su base de datos –que no es especialmente pobre, dicho sea de paso– y la colocas a tu gusto, para terminar bajándotela a tu disco duro.

Como comentario antes de seguir, decir que en Stencil (en Canva no pago, así que no lo sé), si estás pagando una licencia, tienes derecho de uso sin citar ni nada de tooooodas las imágenes de su base de datos.

#3 Imágenes en Google

Un clásico entre los clásicos, especialmente cuando no usamos una web con marca personal.

Cuando hemos empezado, todos hemos buscado imágenes en Google imágenes, nos las hemos bajado, subido a nuestra web y no hemos citado a su propietario o autor.

A estas alturas ya no deberíamos hacerlo.

Y si lo hacemos, ¿qué menos que citar la fuente?

Para buscar imágenes en Google y no perder tres horas haciendo búsquedas en inglés te recomiendo que uses las herramientas de búsqueda y acotes un poco. Son estas:

Puedes filtrar por:

• Tamaño: grande, mediano, pequeño, icono, mayor que, tamaño exacto.
• Color: cualquier color, a todo color, blanco y negro, transparente y por doce colores en particular. Si eliges transparente, solo te saldrán imágenes en PNG; un recurso utilísimo.
• Tipo: cualquier tipo, cara, fotografía, imagen prediseñada, dibujo lineal, animadas.
• Fecha: cualquier fecha, últimas 24 horas, última semana, intervalo personalizado.
• Derechos de uso: sin filtrar por licencia, etiquetadas para reutilización con modificaciones, etiquetadas para reutilización, etiquetadas para reutilización no comercial con modificaciones, etiquetadas para reutilización no comercial.

Veo especialmente útil el poder buscar imágenes transparentes (en PNG), de un tamaño en particular y en una fecha concreta, para quitarnos de encima todas las imágenes subidas con anterioridad a una fecha dada.

Ya tengo la imagen bajada en mi disco duro. ¿Ahora qué hago?

Lo más complicado en lo relativo a las imágenes de un post es su elección. Muchos pensamos que cuanto antes, mejor –me incluyo–, pero lo ideal sería que no paráramos hasta dar con la foto que mejor represente aquello sobre lo que estamos hablando.

Una vez elegida, el proceso de optimización de una imagen es MUY sencillo. Hay varias alternativas, además. Vamos a verlo todo.

#1 Optimización del tamaño

El tamaño y el peso no es lo mismo. Aquí hablamos de las dimensiones en píxeles, no de su peso en kb. Luego entramos en eso.

Optimizar el tamaño de una imagen no es más que ajustarla al espacio web en el que se va a visualizar.

Si estamos eligiendo una imagen de portada para nuestro blog, deberíamos ver a qué tamaño se está visualizando y luego darle a la imagen exactamente esas medidas.

¿Qué pasa si subimos una imagen de distinto tamaño?

• Si es más grande, WordPress la ajustará hasta que entre en el espacio de visualización. Estarás añadiendo un paso extra. Y no solo eso: lo lógico es que las imágenes, cuanto más grandes sean, pesen más; y el peso es algo que queremos reducir lo máximo posible, por cuestiones SEO y de usabilidad.
• Si es más pequeña, WordPress la redimensiona. El problema es que este proceso conlleva una pérdida de calidad bastante significativa, por razones obvias.

Para saber el espacio que una imagen ocupará en una web, te recomiendo que te vayas a una pantalla full HD y lo mires desde ahí. Si lo hacemos desde un móvil, cuando la web se visualice en desktop redimensionará la imagen a un tamaño muuuuucho más grande y podría verse muy mal.

Así pues, nos vamos desde el ordenador a nuestra web, al hueco donde va la imagen y le damos con el ratón, botón derecho, a Inspeccionar.

Mira, por ejemplo, cómo lo hago yo con mi web:

Estoy tratando de ver el tamaño web de esa imagen del iPad.

A la derecha, si pulso inspeccionar, sale un cuadro muy feo lleno de directrices CSS. Pero ojo a su derecha, que está lo que nos interesa:

¿Y qué vemos ahí?

Un magnífico y resplandeciente 223×300, que viene a ser el tamaño que ocupa esa imagen en esa pantalla, en este caso una con resolución Full HD.

¡Listo! Ya sé que cualquier imagen que suba a ese espacio, tendrá que tener un tamaño de 223×300 para que se vea con las mismas dimensiones y tenga un tamaño óptimo.

Si usara una imagen de 500×700, por ejemplo, es posible que la web la mostrara a ese tamaño de 500×700. O si está diseñada para tal, que la redujera y la encajara en ese hueco de 223×300, desfigurándola. Eso depende de la web donde la vayas a subir.

Como en la mayoría de los casos estaremos buscando imágenes para el blog, cuenta con que una pantalla en Full HD tiene un ancho de 1.920 píxeles.

Es decir, que si subimos una imagen de más de 1.920 píxeles de ancho, estaremos obligando al sistema a redimensionarla cada vez que la muestre.

Pero ojo, que aquí está la miga: aunque la muestre luego a 1.920 píxeles, el usuario desde su navegador habrá cargado 3.200 píxeles, el tamaño original que habíamos subido, que probablemente pese el triple.

Espera, que sigo subiendo la apuesta.

Seguro que en tu blog, el espacio para el contenido no es el 100% de la pantalla. Para averiguarlo, vuelve a darle a Inspeccionar cuando tengas seleccionada una línea entera de tu contenido y esta vez elige el campo div.entry-content. Entonces mira el cuadro, a ver qué marca.

En mi caso, 800 px de ancho.

Así pues, mis imágenes no deberían ocupar un acho mayor… Y eso suponiendo que quisiera que la imagen ocupara todo el ancho.

Ojo, apunte: aunque pongas la imagen a 800 px, es posible que los usuarios necesiten apreciar cierto nivel de detalle, y que a 800 px sea imposible. En ese caso sí que es interesante que cargues una imagen con un ancho mayor, digamos 1.300 px, y permitas a los usuarios abrirla en una pestaña nueva. Yo esto solo lo hago cuando pienso que el lector no va a poder ver en detalle lo que quiero que vea; de lo contrario, nunca pongo enlaces a las imágenes. En cualquier caso, nunca subo imágenes de más de 1.920 píxeles de ancho.

Cuando sepamos el tamaño que tiene que tener nuestra imagen, pasamos a dárselo. ¿Cómo? En una acción conjunta con la optimización del peso, estrechamente relacionado con el tamaño y la resolución.

#2 Optimización del peso de una imagen

Nos metemos un poco en la parte más fea del SEO, esa que habla de rebajar el tiempo de carga de las páginas. Para ello, nada como hacer que los elementos audiovisuales pesen lo mínimo posible.

Para este paso hay que grabarse una cosa a fuego:

Hay que conseguir el menor peso posible sin llegar a sacrificar en exceso la calidad de la imagen.

Haber elegido el tamaño óptimo es el primer paso para optimizar una imagen. Nos habíamos quedado en cómo dárselo. Tienes varias opciones, de las cuales yo suelo utilizar estas:

• Herramientas online: Image resizer, Image Compressor o Squoosh

Fáciles de usar, intuitivas, rápidas y con buenos resultados en la relación calidad/peso.

• Otra herramienta online: Stencil

Como decía, aquí puedes modificar el tamaño del lienzo sobre el que colocar la imagen, ajustarla y bajártela. La calidad, además, es buenísima.

• Photoshop

Basta con abrir la imagen, seleccionar tamaño de la imagen y cambiárselo.

TIP: en Photoshop, en ese mismo panel, podrás ver la resolución. Si ves algo que sea superior a 72, cámbialo a 72. No te hace falta que sea mayor, pues en una pantalla de ordenador no vas a notar la mejora, pero el archivo sí que va a pesar más.

Ahora que ya tenemos la imagen con el tamaño elegido, vamos a optimizarle el peso y quien dice optimizarle dice minimizarle.

Yo hago esto de dos maneras. Para el ejemplo voy a coger una imagen de Stencil, de 800 px de ancho, como si fuera para este mismo post. La original, sin optimizar ni nada, es esta:

Como ves, es el mono más simpático de la red. La imagen es de 800×400 px (recuerda, es un parámetro que ya he decidido) y pesa, recién bajada de Stencil, 339 kb. Ahora sí, vamos a optimizarle el peso.

1. Con Optimizilla

Rápido, fácil y online.

Subes la foto que quieres y su algoritmo te la optimiza, por defecto, dejándote una calidad de 90, lo que viene siendo un “Alta” en Photoshop.

Las diferencias, en el 95% de los casos, no son apreciables a la vista, pero sí en cuanto al peso.

La imagen resultante es esta, que pesa 77 kb en vez de los 339 originales:

Te pongo la otra de nuevo, para que las veas juntas:

Salvo que seas el hijo del inventor del Photoshop, no se me ocurre un motivo mejor para que no utilices Optimizilla.

Bueno sí, uno: que la gestión del tamaño la hagas también desde Photoshop, en cuyo caso lo uses como un todo en uno.

1. Optimización del peso con Photoshop

Sí, uno de los métodos es el de bajarle la resolución, como he comentado antes. No siempre podrás hacerlo, ya que las imágenes que andan circulando por Internet en su mayoría ya están a 72 ppp, pero nunca está de más comprobarlo con un simple clic.

Las de Stencil vienen ya con 72 ppp, así que para bajarle el peso nos vamos a exportar la imagen y guardar para web.

Nos saldrá un panel con muchas cosas, de las cuales solo nos tendremos que fijar en aquellas señaladas por las cuatro flechas:

De las de arriba:

• La primera marca la naturaleza de la imagen. Si no tiene transparencias, déjala en JPEG. Si hay transparencias y quieres conservarlas, PNG.
• La segunda marca la calidad. Cuanto más alta, más pesará la imagen final. “Alta” es el parámetro por defecto, y en este caso dejaría la imagen con un peso de 83.83 kb, muy parecido a los 77 kb del Optimizilla.
• La tercera es una pestañita propia de los JPEG, que es la carga progresiva. Por razones de SEO en las que no vamos a entrar, márcala.

La flecha de abajo indica el peso final de la imagen, que variará en función de lo que elijas en las otras tres flechas. Para este caso, como vemos, sale 83,83 kb.

Test de agudeza visual

Voy a poner las tres imágenes seguidas, y tú sin hacer scroll hasta donde esté la solución, tienes que adivinar cuál es cuál: la original (339 kb), la optimizada con Optimizilla (77 kb) y la optimizada con Photoshop (84 kb).

¿Quieres ver la solución? ¡Échame un cable compartiendo en redes sociales!

Optimización de los atributos de la imagen

Vamos, que ya estamos casi.

Ya tenemos el archivo que vamos a subir a WordPress. Antes de hacerlo, un breve recordatorio sobre los atributos interesantes que podemos tocarle:

• El nombre-de-archivo.jpeg
• El atributo ALT
• El atributo title

Para cuando vayamos a subir esta imagen, ya tenemos que saber qué palabras clave estamos optimizando en ese post.

Siguiendo con el ejemplo del mono, vamos a suponer que estamos escribiendo un artículo sobre monos simpáticos y que queremos optimizar justo esa keyword, «monos simpáticos».

#1 Nombre-de-archivo.jpeg

Aquí hay que meter la palabra clave, y separar los términos con guiones. De este modo, nuestra imagen se llamaría monos-simpaticos.jpeg, sin tilde ni nada. Le podemos dar ese nombre desde nuestro disco duro, antes de subirla.

Nos vamos a WordPress, ahora sí, y subimos la imagen a nuestro post, con el nombre ya cambiado.

Ojo: el primer cuadro que nos salga lo dejaremos como está. No tiene nada que nos interese. Le damos a insertar en la entrada y listo.

Una vez en el editor de WordPress, le abrimos sus propiedades y ahora sí, vamos a optimizar el resto de cosas.

#2 Atributo ALT

El ALT de una imagen en WordPress lo puedes editar desde el campo «Texto alternativo».

En este campo también conviene optimizar la keyword, así que le ponemos Mono simpático. Aquí hay que tener cuidado, porque es conveniente y seguro que el ALT describa lo que sale en la imagen.

El atributo ALT es lo que escucha un ciego que está navegando por tu página y llega a la imagen.

Si en este campo te dedicas a mentir a discreción y a meter keywords sin moderación, llegará el día en que Google te sancione.

Otro ejemplo de buen alt: mono sonriéndole a la cámara

Ejemplo de mal alt: mi tía de Albacete

#3 Atributo title

¿Qué quieres que le salga en el cartelito a la persona que está navegando por el post y pone el ratón encima de la imagen?

Eso es el title y no, no hace falta que ahí metas palabras clave, porque Google no lo tiene en cuenta.

Yo he elegido El mono molón echándose un selfie, pero porque estoy poniendo el ejemplo. De normal no suelo rellenar este atributo, aunque hacerlo de forma correcta mejore la experiencia del usuario.

Cuida tus imágenes desde ya

¿Sabes qué beneficios obtienes si cuidas lo que subes?

• Evitas llenar tu servidor. Al subir imágenes de 70 kb en vez de otras de 400, el espacio tarda más en llenarse.
• Consigues que al usuario le carguen antes las fotos y, por ende, desaparece la lentitud de carga como causa de abandono.
• Causas una buena impresión. Si cuidas todos los detalles que el usuario percibe, como son la fotografía, el title, el tamaño y la calidad, este te lo agradecerá. En el copywriting turístico, ni qué decir tiene, las imágenes no solo son un complemento, sino que son casi tan protagonistas como el contenido en sí.
• Atraes más tráfico a tu post, ya que estás usando las imágenes para posicionar el artículo. De todo esto te hablo en este post sobre SEO copywriting.

En fin, que las imágenes en tu WordPress son importantes.

Ahora ya sabes qué hacer, desde cómo seleccionarla a cómo editarla, tanto antes de subirla a tu web como después.

Ya no tienes excusa para no hacerles caso.

¡Que yo no me entere!

Antes de despedirme, me gustaría que me contaras si tú cuidas detalles como estos cuando subes imágenes a tu web. Y si lo haces, ¿sigues estos métodos? ¿Haces alguna otra cosa que me ayude a simplificar el proceso? Te leo en los comentarios.

¡Hasta la próxima!