Optimizar imágenes: ¿por qué sigues sin sacar todo su potencial?

Aunque no es la Covita de las que piensa que una imagen vale más que mil palabras, no vamos a negar que optimizar imágenes para nuestro blog nos facilitan mucho la vida.

 

No obstante, con optimizar no me refiero solo a conseguir que pesen poco, sino a sacarles todo el provecho posible. Ver todos los usos que se le pueden dar.

Muchas veces, al leer otros blogs, me extraño del poco provecho que hacen de las imágenes que usan. Y lo que es peor, es muy habitual ver una y otra las mismas fotografías e ilustraciones en múltiples blogs.

En pleno momento multimedia donde la situación ideal es que el texto se combine con vídeos, podcasts, presentaciones, infografías y demás formatos… es curioso el ver que no exprimimos al máximo las posibilidades de las imágenes.

Para que tú sí saques​ todo el potencial que nos pueden dar las imágenes he creado este post.

 

También, porque me lo ha pedido un suscriptor (gracias por la idea Serjunco). Recuerda que si quieres que trate algún tema concreto en un post, solo tienes que escribirme.

optimizar imagenes

Beneficios del uso de imágenes en nuestros contenidos

Para que veas todo el potencial, lo primero es que descubras todos los usos que les puedes dar.

1. Sensación de profesionalidad. El lector percibe que te trabajas las entradas.

2. Refuerza tu marca personal y favorece que no te olviden.

3. El lector pasa más tiempo en tu web al pararse a mirar las imágenes. Si además le añades texto, arañarás unos segundos más.

4. Complementas la información que presentas en el post y facilitas la comprensión.

5. Descongestionas el diseño de la entrada.

6. Al combinar el texto con las imágenes transmites mejor sentimientos y emociones.

7. Mejora el SEO.

8. Viraliza tus contenidos. Está más que demostrado que los mensajes que van acompañados de imágenes se comparten mucho más. Sea la red social que sea.

9. El caso especial de las infografías: todos los beneficios que te he acabo de comentar se multiplican con las infografías. Tengo que reconocer que es mi gran cuenta pendiente, aunque a ratos voy aprendiendo a hacerlas

🚧

Peligros de las imágenes

 

¡¡¡ Ninooo, ninooo, ninooo!! !

Se disparan todas las alarmas porque no puede haber algo peor para la velocidad de tu página web que no optimizar las imágenes que subes a tu Wordpress.

No optimizar imágenes es igual que tirar tu blog al río atado a una piedra. Se hundirá por siempre jamásHaz click para twittear

Junto con respetar los derechos de la imagen, optimizar es la única precaución que tenemos que tomar.

Buscar imágenes: dónde encuentrar las fotos ideales para tu web

buscar imagenesPhoto credit: olarte.ollie via Foter.com / CC BY-SA

Para mí las imágenes son muy importantes. En concreto, para mí son fundamentales para reforzar mi marca personal y para dar un toque de humor a los post.

Fíjate si les doy importancia, que no habrá sido ni una, ni dos, las veces que he tardado más tiempo en elegir las imágenes y editarlas que en escribir el propio post (sí, también es que soy un poco lenta).

Al lío.

 

Aunque lo habrás escuchado hasta la saciedad, nunca sobra el repetirlo: las imágenes también tienen derechos.

No puedes entrar en Google, buscar la imagen que te apetezca y ponerla en tu págna web. No es solo que no puedas porque no está bien apropiarse del trabajo de los demás, sino que también te puedes meter en un buen lío.

La Covita busca sus imágenes en dos bancos: Pixabay y Foter. Cuando no encuentro lo que quiero en Pixabay, salto a Foter.

 

Pixabay está muy bien porque es un banco gratuito de imágenes en el que solo tienes que buscar y descargar. No tienes ni que registrarte. No obstante, ya empieza a estar bastante esquilmado; y en muchos casos, si buscas cuestiones más especiales se queda corto.

 

Foter es el que uso como segunda opción. Sería la primera si no fuese porque ya te tienes que fijar en la licencia de uso. En todas hay que citar al autor y en muchas no se permiten las modificaciones. Cuestión que salvo excepciones para mí invalida a esa foto.

Es raro que entre los dos no consiga nada, pero si se da el caso empiezo a rastrear el resto:

 

Flickr

 

Unplash

 

Free Digital Photos

 

Morgue file

Te recomiendo que investigues por Unplash. Son fotos muy buenas y de una calidad inceíble, pero en mi caso, me cuesta encontrar el tipo de fotos que busco.

Precauciones con Foter con el tema de las licencias. Se te especificará así:​

 

Attribution required: debes citar al autor de la fotografía. Para ello, te dejan dos preparadas dos vías: una con el código html y otra para editores visuales. Si te fijas debajo de la ilustracón de mi pequeño Poirot buscando imágenes verás la atribución para editores visuales.

 

Commercial Use Ok / No commercial use: no queda muy claro qué es un uso comercial. Yo creo que se refiere más a que no uses la foto para hacer un banner o un anuncio. No obstante, no queda muy claro a qué se refieren.

 

Modifications ok / No modifications: como decía antes, si no me deja modificarla no la uso ya que siempre pongo textos y el logo en las imágenes. La única excepción fue en el post de Clase magistral de Copywriting de la mano de la Sirenita y Sebastián.

Imagínate, con Disney nos hemos topado. La única foto que me gustaba para la imagen destacada es la que aparece de la Sirenita, pero no me dejaba modificarla. No había más dónde elegir.

¿Qué busco en las imágenes?

Más allá de que sea bonita, la foto tiene que transmitir ese matiz o broma que quiero aportar. Por eso, no todo me vale. Muchas veces, en mi cabeza me imagino un tipo de imagen en el post y al no encontrarla, tengo que dar más vueltas a la cabeza. Relaciones más disparatadas, dobles sentidos…

 

No me vale el poner cualquier cosa para rellenar el hueco. Las imágenes​ son importantes y quiero que aporten también valor.

Unos truquillos a la hora de buscar imágenes:

 

Introduce el término en inglés. Aunque no sepas la lengua de Shakespeare, solo tienes que utilizar un diccionario online y traducir. Obtendrás muchos más resultados.

 

Usa sinónimos: cada fotógrafo puede clasificar su imagen con un criterio distinto. Por ejemplo, quieres transmitir el momento en el que alguien duda a la hora de tomar una decisión. Puedes jugar con toda esta serie de palabras: duda, vacilación, incertidumbre, titubeo, pregunta, cuestión…

 

Intenta relacionar la sensación que quieres transmitir con las típicas imágenes que a todos nos vienen a la cabeza. Siguiendo con el ejemplo anterior, la “duda” se suele representar con este tipo de imágenes: un cruce de caminos, un poste con un montón de señales, el deshojar la margarita o una interrogación.

 

Explora los sentimientos humanos: son las clasificaciones más típicas y es donde encontrarás un registro más variado de expresiones: miedo, sorpresa, asco, amor, cariño, ternura…

 

Investiga, no te quedes en la primera página de resultados. Al depender de cómo clasifica la persona que sube las imágenes, no pienses que lo mejor siempre está al principio.

 

Procastina buscando imágenes: esto es muy Covita. Me encanta la fotografía, así que no me importa profundizar en los bancos buscando imágenes.

 

Ten una carpeta de “imágenes molonas” en las que vayas guardando todas esas fotos a las que sepas que antes o después, llegarán su momento. No te tomes a la ligera este consejo, tener esta pequeña selección personal me ha salvado cuando ya pensaba que no tenía más opciones.

 

¿Quieres ver un ejemplo en el que mi pequeño banco de imágenes me salvó?

El post de la semana pasada: Experiencia de usuario: ¿por qué se comportan así los lectores?  fue un suplicio.

Desde el inicio todo fue un sinfín de problemas.El típico día que parece que todo se tiene que enrevesar. En varios momentos me desesperé bastante, pero la Covita no se rinde y seguí.

Cuando gracias a la constancia avancé y parecía que los nubarrones se disipaban, llegó el momento de elegir la imagen destacada.

La experiencia de usuario. “¿Y cómo reflejo yo esto en una foto?” Busqué sin mucha esperanza “user experience”, “user behavior (comportamiento de usuario)” y nada. Hasta lo intenté con algo tan genérico como “experience”.

A veces rebuscando en términos tan genéricos encuentras imágenes interesantes, pero es como buscar una imagen en un pajar.

Ya cansada y desesperada decidí ir a mi pequeña selección. En la cuarta foto estaba mi “ángel” (si entras en el post y ves la foto lo entenderás). Era la foto perfecta.

Por eso, si te vas a tomar en serio el buscar imágenes distintas a los demás, no dudes en ir guardando todas las imágenes que te llamen la atención. Además, tu instinto se irá agudizando.

 

Cómo insertar una marca de agua en tus imágenes

Puede ser el logo de tu blog, tu nombre, tus redes sociales, unas iniciales o una combinación de varias. Sea lo que sea que eliges es importante que “firmes” tus imágenes.

Yo he escogido el logo porque al ser un símbolo creo que se recordará de una manera más sencilla. No obstante, muchas veces me entra la duda de si incorporar también mi nombre.

Las imágenes llaman más la atención que el texto, se comparten más fácilmente; por eso no hay que perder la oportunidad de promocionar nuestra marca con esos contenidos que tienen más probabilidades de viajar más rápido por las redes sociales.

Primer paso para optimizar imágenes: el tamaño

Uno de los grandes problemas que tenemos con las fotos es que no somos conscientes de lo grandes que son los archivos.

 

Una foto con una resolución alta puede “pesar” varios megas, lo que es una auténtica barbaridad de cara a subirla a la web. Una imagen que subas a tu Wordpress nunca puede ocupar más de 100 kb.

Por ello, el primer paso para meter tijera a nuetras fotos es reducir su tamaño. Lo normal es que el ancho máximo de tu post nunca mida más de 800 píxeles, por tanto, ajusta las imágenes a ese tamaño. El ancho ya es más relativo y depende de cómo sea la foto. Yo intento que no sea superior a 450 píxeles.

Como dije antes, yo uso Photoshop, pero con Pixrl lo puedes hacer también. Ya vimos que es una herramienta gratuita y online.

1. Abrimos la foto y vamos dentro del menú a Imagen / Tamaño de Imagen.

cambiar tamaño fotografias

2. Ajustamos el tamaño que queramos. Fíjate en que esté seleccionado restringir proporciones y pon primero la opción de 800 píxeles. Pixrl te ajustará de forma automática el ancho. En este caso, la ha dejado en 533 píxeles.

tamaño de imagen

3. Si el ancho es muy elevado es que esa imagen es más cuadrada que rectangular.

Puedes jugar a desactivar la opción de restringir proporciones y modificar el ancho. Ten cuidado porque eso puede deformar la foto.

modificar ancho

En la imagen puede ver el resultado de modificar el ancho eliminando la restricción proporcional. Como no me convencía el resultado he preferido recortar la foto (he eliminado la franja que está por encima de la cabeza).

Cómo insertar una frase o título en tus fotos

Seguimos con Pixrl. Ahora vamos a añadir frases o títulos en la imagen, junto a la marca de agua que hemos creado antes.

¿Es estrictamente necesario?

No, pero te lo recomiendo. Las imágenes atraen a nuestros ojos y de forma automática, leemos el texto. Solo con ese gesto ya hemos ganado unos segundos de permanencia más en página.

 

Además, con los textos puedes crear dobles sentidos o asociaciones graciosas con las imágenes. Si has elegido una buena imagen y le agregas una frase ingeniosa, las posibilidades de que se comparta más en las redes se duplica.

Vamos a ver cómo lo hacemos.

Segundo paso: reducir “peso” sin perder calidad

Ya tenemos nuestra foto lista, ahora solo queda pasarla por la sesión de adelgazamiento para que pierda algo de peso.

Como te decía antes, nunca una imagen debe “pesar” más de 100 kb. Aunque claro, cuanto más la reduzcas sin perder calidad, mejor que mejor.

Para ello, yo voy a hablarte de dos herramientas: Tinypng y Compressor.io.

 

Ambas son muy fáciles de usar. Solo hay que seleccionar la foto y darle al botón.

Diferencias entre las dos hay pocas:

En TinyPNG puedes comprimir varias fotos a la vez. Aquí habría que decir que la manera ideal de trabajar sería que primero escribieses todo el texto y luego, editases y optimizases todas las imágenes a la vez. Así ahorrarás tiempo (yo tengo que reconocer que no lo hago, me gusta ir viendo como va quedando cada foto).

En Compressor.io solo puedes comprimir una de cada vez, pero te permite añadir archivos más grandes 10MB (en TinyPNG solo admite hasta 5MB). También te permite previsualizar la foto.

Los resultados en cuanto a compresión y calidad suelen ser muy parecidos. No obstante, hay veces que se dan casos como este.

tinypng

Desconozco si hay algún motivo que lleve a una herramienta a optimizar mejor que la otra.

Segunda sesión de adelgazamiento de fotos

Para optimizar las imágenes al máximo, vamos a meterles otra sesión de adelgazamiento express.

Además, este método no puede ser más fácil, por tanto, no hay excusas. Solo tienes que descargar el plugin WP Smush It.

Instalas, activas y andando. También te descomprimirá las fotos anteriores que ya hayas subido.

Con esto, ya haas aprendido a optimizar imágenes en todos los sentidos.

¿Qué uso le das tú a tus imágenes?

¿Te parecen importantes o te más igual?

Copywriter y redactora web que ayuda a emprendedores digitales a conseguir más ventas y visitas.

Desde mis inicios como redactora he tenido un romance con Google que dura a día de hoy y que te cuento en mi curso gratuito SEOvitamina tus post antiguos.

No podría vivir sin libros, aunque también me encantan los cómics. De corazón rockero y comilona a no parar. Más de calle que las aceras. Si quieres saber más de mí (y de la Covita), pulsa aquí.

  • ¡Hola Cova!

    Yo suelo usar las imágenes para descongestionar un poco el texto y que no sea tanto mazacote. A veces reconozco que uso imágenes obvias tipo “hablo de Twitter, pongo fotos del pajarito azul”, pero otras veces me siento más creativa y como dices, utilizo algo más evocador. Por ejemplo, en un post sobre errores a la hora de curar contenidos puse la imagen de un pie a punto de pisar una piel de plátano 😛

    Uso Pixabay siempre, normalmente encuentro algo que me guste aunque como dices, me gusta pasar de la primera página porque es cierto que a veces veo muchas imágenes que ya están siendo muy trilladas y me da rabia, jajaja. Las edito con GIMP y fíjate, nunca me da por ponerles texto ni marca de agua, si seré burra… Voy a tener que empezar a cambiar eso…

    Las infografías me dan una pereza absoluta. Creo que habré hecho dos o tres para mi blog, me pongo nerviosa porque nunca me salen tan genialosas como las que veo por ahí. Supongo que será cuestión de práctica o ponerme a ello cuando me sienta creativa, pero la verdad es que tengo pendiente ponerme a completar artículos con infografías.

    En fin, que me ha gustado mucho este post y lo haré rodar por ahí 😉

    ¡Un saludo!

    • Hola Laura!!

      Sí, me fijé en esa imagen de la cáscara de plátano. A veces, cuesta encontrar esa idea o esa imagen que transmita lo que tú quieras. A veces me vuelvo loca para encontrar esa foto algo más original, pero creo que merece con mucho la pena. Aunque solo sea para que el lector permanezca más tiempo en la web, ya estará bien empleado el tiempo.

      Pixabay está muy bien. Puedes encontrar muchas joyitas. De hecho, creo que el fondo fotográfico de Ryan McGuire ha pasado por todos los blogs que conozco 🙂 En Foter puedes encontrar fotos muy, muy buenas; pero hay que tener cuidado con la licencia.

      Cuantas cosas importantes habrá que yo no haré y serán muy básicas. Para eso estamos, ¿no? Hay que ayudarse los unos a los otros.

      Yo también estoy luchando con las infografías. Estoy aprendiendo, poco a poco, a usar Illustrator, pero como todo, lleva su tiempo; aunque hablan maravillas de lo que se comparten. Es una de mis cuestiones pendientes a la hora de desarrollar contenidos.

      Muchas gracias por comentar y compartirlo.

      Un abrazo!

      Cova

  • Muchas gracias Cova.

    Me ha servido , mira que es facil cuando se ve, y la aplicacion online me ha gustado.
    Al menos para poder poner el logo creo que voy a ser ya capaz 😉

    • Hola Serjunco

      Me alegra que te haya ayudado, de eso se trataba.
      La verdad es que la idea original era hacer el post basándome en photoshop que es como las hago yo, pero me di cuenta que habría mucha gente que no lo tendría. De ahí el buscar alternativas. Estuve probando también Canva pero no me convenció tanto para lo que es la idea de este post, aunque si que ayuda a la hora de hacer diseños chulos en las imágenes. Quizás más adelante haga un tutorial con Canva, pero Pixrl para ser online y gratuita está muy bien.

      Si tienes cualquier duda, dímelo sin problema.

      Un saludo!!

      Cova