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.

¿Cómo se estructura este post?

¿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:

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.

Cita: 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:

Herramientas de búsqueda de imágenes en Google

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:

Espacio web de esa imagen

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, está lo que nos interesa:

Ver tamaño del espacio web

¿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 vayáis a subir.

Como en la mayoría de los casos estaremos buscando imágenes para el blog, contad 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.

Ancho de contenido en WordPress

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 solo utilizo estas tres:

Fácil de usar, intuitiva, rápida y la que peores resultados ofrece en la relación calidad/peso.

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:

Mono simpático

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:

Imagen optimizada con Optimizilla

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

Imagen original, sin optimizar

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.

Comprobar resolución en Photoshop

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

Exportar imagen para web en Photoshop

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

Panel de exportación de imágenes de Photoshop

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.

Imagen optimizada con Photoshop

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).

¿Mono simpático optimizado u original?

¿Mono simpático optimizado u original?

¿Mono simpático original u optimizado?

¿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.

Panel de subida de imágenes a WordPress

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».

Panel de edición de una imagen en WordPress

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!

PS: Estoy pasando por algunos problemas con la lista de correos. Por alguna razón (a ver si MailRelay tiene algo que decir…) que desconozco, algunos de los correos que envío acaban en la bandeja de SPAM.

Si estás suscrito a la lista y en algún momento echas de menos esos mensajes, mira en dicha bandeja o directamente, agrega a info@joanmarco.com a tu lista de contactos, pues hago los envíos desde ahí.

Y si no estás suscrito todavía… ¿No quieres ser one of us?

únete a la comunidad de JoanMarco.com

¿Te apuntas a la comunidad?

Escribe, conecta y dispara tus ventas

Recibe en tu correo los contenidos que vayan saliendo en el blog

Vende más y aumenta tus reservas con textos llenos de sabor e intención.
LOS 10 MANDAMIENTOS DEL
COPYWRITING GASTRONÓMICO

Joan Marco

Copywriter y redactor de contenidos, especialista en el sector del turismo 3.0. Me va cocinar, viajar y la NBA. Nunca le hago ascos a una cerveza. Viviendo en Barcelona, deseando volver a mi Valencia natal. La conjura de los necios del gran Ignatius Reilly cae una vez al año, sin excepción.

6 comentarios en “Imágenes: cómo buscarlas y optimizarlas de principio a fin

  1. Como siempre, aportando contenido superútil, Joan. Nada de post de “más de lo mismo”, seguiendote me aseguro de aprender algo cada vez que te leo 👏

    Yo descubrí Piktochart hace una eternidad pero me estáis empujando al Stencil 😄

    A partir de ahora cuidaré muchísimo más mis imágenes ¡estoy por hacerme un check list con tu post!

    Gracias mil, una vez más.

    • Qué bien que te ayude, Patricia. Yo he visto cosas de imágenes por un tubo, pero después de pelearme con ellas durante tanto tiempo y haber encontrado un método con alternativas válido para dejarlas niqueladas… Pues qué mejor sitio para compartirlo que este.

      Piktochart no lo conozco. ¿Tiene base de datos de imágenes? ¿Y permite el resize? Como dice Maite por ahí abajo, es un factor fundamental para que me parezca la mejor herramienta de todas.

      Gracias a ti por pasarte.

  2. ¡Qué interesante! He aprendido muchísimo sobre la importancia de las imágenes en el SEO.
    Yo también uso Stencil (la compré con App sumo) y estoy encantada con ella. Sobre todo aprecio la facilidad para redimensionar las imágenes.
    Lo dicho, gracias por toda la información que aportas, Joan.

    • Hola Maite,

      pues sí, sí. Trabajarlas bien es un plus, entre otras cosas, para el SEO. Cuando hay que meter keywords y no hay espacio suficiente y queremos evitar desconfigurar la web, las imágenes son una vía de escape genial.

      Ya somos dos con lo de Stencil. Es una caña, la verdad. Yo también cogí la licencia con App Sumo, de esas de por vida, y me va de maravilla. Y ya no es que su base de datos sea potente, sino que además puedes subir imágenes de fuera y hacer con ellas lo que quieras.

      Gracias a ti por el comentario, Maite; un placer tenerte por aquí. ¡Saludetes!

  3. ¡Hola, Joan!!

    Enhorabuena, te has marcado otro post de esos en los que tienes que tomar apuntes y guardar en favoritos que tanto me gustan.

    Me encanta que escribas sobre estos temas que normalmente se pasan por alto, como si fueran secundarios, pero que son taaaan importantes.

    Tomo nota, y al lío.

    Por cierto, en Canva si pagas Canva for work (unos $12 al mes) sigues teniendo que pagar por algunas imágenes o elementos gráficos… Tengo ganas de probar Stencil, porque lo de redimensionar es un buen punto.

    ¡Un abrazo!

    Alicia

    • Hola Alicia,

      ahhhhh las imágenes, las imágenes… A unos se les da mejor elegirlas, a otros modificarlas.. Jajajaja. Es que son importantes, ¿eh? Si no te fijas en el peso, te acabas cargando el host. Si no miras el nombre de archivo y el ALT, desaprovechas fuerza en el SEO copywriting. Si no miras el tamaño, pierdes oportunidad de bajarle el peso.

      No sé, son muchas cosas. A ver si el post te srive de ayuda cuando vayas a subir alguna 😉

      Lo de Canva lo sé, que toca pagar un extra por algunas. Canva tiene una base de datos bastante más grande que la de Stencil, por lo que no descarto combinar una herramienta con otra. De todos modos, no creo que Canva tarde en sacar lo de redimensionar porque es de traca que sea una herramienta tan puntera y no lo tenga.

      Stencil, por otro lado, solo tiene cosas buenas. Echo de menos una base de datos mayor. Trabajo en varios proyectos que requieren imágenes y para un mismo concepto no suele haber demasiadas alternativas. A pesar de ello, también es posible subirle fotos y hacer con ellas lo que quieras… Así que mejor, difícil. Y por lo que vale una licencia de estas de lifetime, de cabeza.

      ¡Al lío! 🙂

Deja un comentario