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ás

Click to Tweet

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 imagenes
Photo 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ó?

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?

Artículos relacionados

4 Comments

Cuéntame que te ha parecido

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *