Guía de como optimizar las imágenes en tu blog

Guía de como optimizar las imágenes en tu blog

Más que un artículo en un blog, esto intenta ser una guía de como optimizar las imágenes en tu blog. Si, las imágenes del contenido son más importantes de lo que usted piensa, principalmente cuando ese contenido es distribuido en social media y los motores de búsqueda.

En semanas anteriores estuvimos tocando el tema de la importancia de los elementos visuales en el marketing de contenido.

Compartimos sitios en donde se puede encontrar fotografía y gráficos gratis o a muy bajo costo y libres de derechos, y también compartimos una serie de herramientas que se pueden utilizar para crear imágenes.

Aquí comparto los links si quiere visitar esos artículos:

Hoy hablaremos de como optimizar las imágenes en un blog. Para eso cubrimos los siguientes puntos:

  • Los tamaños ideales para que esas imágenes sean compatibles con las redes sociales
  • Las imágenes se deben adaptar a la versión móvil del sitio
  • Que formatos se deben utilizar en diferentes tipos de gráficos
  • Como optimizar la información de las imágenes para los motores de búsqueda y las redes sociales
  • Que hacer para que las imágenes no demoren mucho y hagan que su sitio se vuelva lento

Empecemos entonces…

Los tamaños ideales

Una de los puntos que hay que considerar es las dimensiones de las imágenes para que cuando sus lectores compartan el contenido en las redes sociales, están sean desplegadas de forma correcta.

Este es un claro ejemplo en donde esto no ha sido tomado en cuenta y la imagen del artículo aparece cortada en Facebook:

Optimizar imagenes - Tamaño de la imagen incorrecto

El problema es que la imagen en realidad tiene un formato vertical en el artículo del blog.

Y en este caso se ha publicado una imagen que ha quedado perfecta:

como optimizar las imágenes en tu blog - tamaño para social media

Las redes sociales utilizan diferentes dimensiones para sus imágenes en las publicaciones de link, estas son las de Facebook y Twitter:

Facebook

Las dimensiones de la imagen cuando usted la ve publicada en Facebook es de 484x252px, pero se recomienda subir a 1200x628px para lograr una mejor resolución.

Twitter

En Twitter las imágenes son de 420x220px y 1024×512 en su versión expandida, lo que quiere decir que si usted sube una imagen en la versión pequeña, lo más probable es que pierda calidad al ver la expandida, por eso es mejor subir su imagen a 1024×512.

Tome en cuenta que Twitter no publica la imagen automáticamente, usted la debe agregar en su publicación de forma manual.

Aunque represente un poquito mas de trabajo, es importantísimo que incluya imágenes cuando promociona su contenido en Twitter. Este gráfico muestra como los tweets con imágenes obtienen un 35% mas de retweets.

Tweets con imagen obtienen más retweets

Y si se utilizan diferentes dimensiones, ¿Cuál debemos utilizar?

En SocialMouths y aquí en Cafeína Digital, siempre utilizamos las dimensiones de Facebook para la imagen principal del post porque es nuestro canal principal y porque normalmente se adapta muy bien a las otras plataformas.

Usted puede crear imágenes para cada plataforma y subirlas manualmente cuando se hace cada publicación, pero obviamente su lector no podrá hacer lo mismo.

Imagen correcta

Otra cosa que es muy importante cuando se comparte un link en una red social es que se publique la imagen principal del artículo.

Seguramente que habrá visto su artículo compartido en Facebook con una de las imágenes internas y no la principal.

Esto se puede solucionar con el plugin WordPress SEO de Yoast, que le permite especificar cual es la imagen que debe ser incluida cuando se comparte el artículo.

Mostrar la imagen correcta en social media

Imágenes para móvil

Otro problema común en el uso de imágenes en blogs o sitios web en general es que las imágenes no se adaptan a los diferentes tamaños de pantallas.

Veamos un ejemplo de cómo la experiencia de este sitio en la versión móvil es completamente arruinada por lo que sucede con la imagen.

Imágenes que no funcionan bien en móvil

Como la imagen no se adapta a la pantalla, la mayor parte queda afuera y se pierde totalmente lo que se quiere comunicar. Recuerde que los elementos visuales en el contenido nos ayudan a comunicar mejor.

Y vea como la imagen se adapta en este artículo en SocialMouths, la imagen no solamente se reduce en tamaño, además mantiene la proporción y sus espacios para permitir que el resto del contenido fluya como corresponde.

Imágenes compatibles con móvil

Si usted quiere ver como se comportan las imágenes de su blog en un dispositivo, puede hacer 3 cosas:

  • Simplemente achique su buscador de forma vertical y vea como el contenido se va adaptando
  • Ingrese a la pagina de su blog desde un smartphone
  • Utilize una herramienta de diseño responsive como la de mattkersley.com (imagen de abajo)

Vea como se ven sus imágenes en diferentes tamaños de pantalla

¿Por qué esto es tan importante?

El usuario promedio de Internet emplea el 60% de su tiempo accediendo por medio de un smartphone.

Móvil es responsable por el 31% del crecimiento de las actividades en internet en el último año.

Estadísticas del uso de dispositivos móvil para internet

¿Le parece que sea inteligente que por un descuido como este un porcentaje de gente tan grande tenga una mala experiencia con su sitio web?

¿Cómo se soluciona esto?

Muchos de los nuevos temas de WordPress ya vienen preparados para que las imágenes se adapten de manera “Responsive.”

Pero si no es su caso, también existen plugins que puede instalar en su blog para lograr el mismo resultado. Por ejemplo PB Responsive Images.

Formatos

Cuando hablamos del formato de la imagen nos referimos a la extensión del nombre del archivo. Los formatos pueden ser: JPG, PNG, TIF, GIF…

Normalmente usted se encontrará con dos tipos de formatos:

JPG: Es utilizado normalmente para fotografía.

PNG: Debe ser utilizado más que nada para gráficos como ilustraciones.

Normalmente el formato JPG es un poco más liviano, lo que ayudará a que las imágenes tarden menos tiempo en cargar.

Pero hay algo a lo que se le debe prestar atención, si usted sube la misma imagen a Facebook y a Google+ se dará cuenta que la calidad de la imagen subida a Google+ es superior, y que incluso la calidad de la imagen en Facebook es muy pobre.

Eso se debe a que Facebook tiene un proceso de compresión de los archivos que les baja la calidad inmediatamente al ser subidos. Esto es evidente más que nada cuando se trata de fotografía a la que le hemos agregado texto.

Por eso, le recomiendo que la imagen principal de su artículo siempre sea en formato PNG, para que no pierda su calidad.

Información de una imagen

Este es un punto que muchas personas ni siquiera consideran y se pierden de una gran oportunidad. Incluso, algunas personas se toman el tiempo de trabajar en la optimización del contenido escrito y se olvidan del potencial que representa optimizar las imágenes.

¿Por qué esto es tan importante?

Las imágenes son parte del contenido y los motores de búsqueda las toman en cuenta.

Muchísimas personas utilizan el motor de imágenes de Google para encontrar resultados, si sus imágenes no cuentan con la información necesaria no serán encontradas.

En el siguiente ejemplo, he buscado “Facebook tabs” en el motor de búsqueda de imágenes de Google. Como puede ver, hay 3 imágenes que pertenecen al contenido de SocialMouths y que además contienen un link directo al artículo en donde se publicaron.

búsqueda en Google Images

Lo más interesante es que a pesar que ese artículo fue publicado hace más de 3 años, y que este es un tema que ha generado muchísimo contenido en la web durante ese tiempo, las imágenes siguen apareciendo en los primeros puestos.

Estas imágenes tienen muchas más probabilidades de ser encontradas por su optimización.

¿Qué pasa cuando una imagen es compartida en Pinterest?

Las imágenes de su contenido también pueden ser compartidas en las redes sociales como Pinterest. Aunque no lo pensemos así, las redes sociales también tienen motores de búsqueda internos.

Veamos la diferencia, primero una imagen que no ha sido optimizada apropiadamente. En este ejemplo he tratado de compartir una infografía, lo que aparece como descripción de la imagen es “marketing-really_28990.”

Error en Pinterest

El problema es que no se está describiendo la imagen y la probabilidad de que la imagen sea encontrada por el motor de búsqueda de Pinterest es casi nula. Usted seguramente entiende que la persona que está compartiendo esa imagen no se tomará la tarea de agregar la descripción.

En el siguiente ejemplo, la descripción de la imagen esta presente al momento de compartir.

Descripción de la imagen en Pinterest

Y por supuesto aparece cuando vemos el pin ya compartido:

Imagen compartida en Pinterest

Esto ayuda a que sus imágenes aparezcan en las búsquedas si se ha hecho un buen trabajo en la descripción.

Búsqueda de Pinterest

Entonces, ¿Qué hay que hacer para que sus imágenes puedan ser encontradas por los motores de búsqueda y redes como Pinterest?

Es muy sencillo, veamos paso a paso lo que significa optimizar una imagen.

Nombre del archivo

Utilice las palabras claves o el nombre de su artículo para nombrar el archivo, en este caso la imagen tiene como nombre “reward-your-fans-and-increase-engagement.png”

Nombre del archivo de la imagen

Descripción

La descripción de la imagen debe:

  • Si adivinó… ser descriptiva
  • Incluir las palabras claves de su artículo

Texto alternativo

El texto alternativo es algo muy antiguo que se inventó en el caso de que un buscador no mostrara las imágenes. El único motivo por el que sigue existiendo es porque los motores de búsqueda lo toman en cuenta para su posicionamiento.

Caption

Es muy poco utilizado pero también puede agregar valor a la imagen, un sitio que lo utiliza en todas sus imágenes es Social Media Examiner.

Caption de la imagen

¿Donde se agrega toda esta información?

Toda esta información es agregada en el momento que usted sube una imagen a su artículo.

Optimización de la imagen en WordPress

¿Cómo saber que se ha hecho una buena optimización?

El plugin que mencione antes de WordPress SEO de Yoast también hace un análisis de su contenido que incluye la información de las imágenes.

análisis de SEO de las imágenes

También puede utilizar herramientas disponibles en linea como el “Image SEO Tool” de FeedTheBot.com, que es totalmente gratis y le permite hacer un análisis de todas las imágenes incluidas en una pagina especifica. Simplemente ingrese la URL de la pagina deseada.

Análisis de optimización de imágenes en una pagina

¿Qué hacer para que las imágenes no sean tan pesadas?

Entonces, hemos hecho mucho énfasis en la importancia de que el contenido tenga elementos visuales, pero no podemos olvidar que una publicación con varias imágenes puede causar que la página se tarde más de lo normal en cargar.

¿Por qué esto es tan importante?

Porque a Google no le gustan las páginas lentas y le resta prioridad en el orden de sus resultados. Esto quiere decir que si sus imágenes pesan mucho y su página se ha puesto lenta, su ranking en Google podría ser afectado.

Además, los usuarios de internet tienen muy poca tolerancia con los sitios lentos, tan así que hay estudios que dicen que un solo segundo puede afectar las conversiones del sitio en un 7%.

Imagínese si su artículo contiene una infografía…

¿Cómo se soluciona esto?

Hay 2 cosas que se pueden hacer:

Controlar el peso

Si usted utiliza un programa como Photoshop para crear las imágenes de su blog, probablemente sabrá que las imágenes se pueden salvar de diferentes formas y la resolución se puede ajustar para que exista un buen balance entre calidad y peso.

Photoshop incluso le dará un estimado de cuánto se tardará una imagen en cargar.

Pero si no es su caso, existen herramientas en línea que le pueden ayudar con la compresión de sus imágenes. Una de las más populares es Image Optimizer de Dynamic Drive.

Simplemente ingrese el url si su imagen ya está en línea o subala desde su escritorio. Esta herramienta le devolverá varias opciones de las que usted puede elegir.

Controlar el peso de la imagen

Recuerde que siempre hay que apuntar a encontrar un buen balance entre la calidad y el peso.

Sistema de distribución de contenido

Otra cosa que ayuda muchísimo es utilizar un sistema de distribución de contenido para alojar todas sus imágenes.

¿Qué es un sistema de distribución de contenido? Buena pregunta…

Es un servicio que ofrece la posibilidad de almacenar archivos en la nube, y que ademas genera un URL único para que usted pueda distribuir ese archivo. Esto por supuesto que no solamente incluye imágenes, se puede utilizar para otros tipos de archivos como PDF, videos, etc.

Con esto se logran 4 cosas:

  • Todas sus imágenes serán almacenadas en un mismo lugar.
  • Estos archivos no estarán en su servidor ocupando espacio.
  • Los sistemas de distribución son mucho más rápidos en cargar las imágenes en su sitio.
  • No importa cuánto tráfico reciba su sitio, sus imágenes no dejarán de cargar.

Algunos ejemplos de sistemas de distribución de contenido:

Amazon Web Services (S3)

Probablemente el más conocido y muy económico.

Almacenar la imagen en Amazon S3

MaxCDN

Ofrece un paquete de 100GB por $9 al mes y con capacidad para distribuir contenido a dos sitios web.

Ya que la imagen ha sido alojada en uno de estos sistemas, agregarla a su blog sera tan fácil como especificar la URL en lugar de subirla a su propio servidor. Vea la siguiente imagen:

Sistema de distribución de contenido

Entonces, ¿Qué debe incluir una imagen perfecta?

Una imagen perfecta para su contenido entonces debe contar con las siguientes cualidades:

  • Una dimensión óptima para que sea bien representada en las redes sociales.
  • Que se adapte a la pantalla de dispositivos móviles sin interferir en el resto del contenido.
  • El formato apropiado para que no pierda su calidad.
  • Contar con toda la información necesaria para los motores de búsqueda.
  • Que no sea demasiado pesadas y hagan que su sitio web sea lento.

¿Se me paso algo?

Seguramente que si, así que si le quedo alguna duda, haga las preguntas que quiera en los comentarios y con mucho gusto lo aclaramos.

Subscribete a Cafeína Digital para recibir contenido exclusivo directo en tu inbox

Y unete a cientos de personas que ya lo han hecho!

Revisa tu inbox para confirmar tu subscripción.

  • Víctor Campuzano

    Guau Francisco, menuda guía!!!

    Creo que has recopilado muchos consejos y muy útiles y además los argumentas y demuestras.

    Sin duda este artículo es un must. Gracias!!!

    • http://www.socialmouths.com/ Francisco Rosales

      Gracias Víctor, me alegra que te haya gustado.

  • Beto Espinosa

    Excelente artículo Francisco!! Conciso, conceptualmente muy apropiado, con buena profusión de herramientas… Muchisimas gracias por compartirlo.

    • http://www.socialmouths.com/ Francisco Rosales

      Es un placer Beto!

  • http://mycellmedia.blogspot.com Marco Antonio

    Francisco agradezco compartas esta información y por el tiempo que dedicas para recopilarla, Es un post profesional sin duda. Según yo conocía y reconocía la optimizacion de las imágenes y he quedado de verdad complacido de lo que he aprendido. Saludos

    • http://www.socialmouths.com/ Francisco Rosales

      Pues te agradezco mucho por tu comentario, el objetivo es que el contenido sea útil. Avísame si hay algún tema que te gustaría que toque o cualquier pregunta.

      Gracias!

  • http://www.antoniocalero.com/ Antonio Calero

    Más que un artículo debería ser un libro!!! Qué cantidad de información útil, muchas gracias por tu tiempo para redactarlo e incluir las imágenes.

    • http://www.socialmouths.com/ Francisco Rosales

      Muchas gracias a ti Antonio por pasar a darte una vuelta por aquí, que bueno que te haya gustado.

  • http://www.mauricioantunez.com/ Mauricio Antúnez

    Comparto lo que ha dicho Antonio y Victor, más que post “Mega Guía” Muy completa la información Francisco. Se agradece, Saludos!

  • Germán Vargas S.

    Buenas noches Francisco: He quedado pasmado por la cantidad de cosas que ignoro; pese a ello he aprendido mucho con tan estupenda nota. _ Me doy cuenta de que la anhelada cámara con gran resolución en los móviles, puede resultarnos un “estorbo muy pesado” cuando pretendemos compartir las imágenes. _ Me pregunto: ¿Si nuestras fotos nunca las imprimimos a un tamaño mayor de 20 cm x 25 cm, cuál debe ser la resolución que debo usar en mi celular, para que no pesen innecesariamente?
    Muchas gracias… y felicitaciones por tan valioso trabajo.

    • http://www.socialmouths.com/ Francisco Rosales

      Hola Germán, me alegro que haya sido útil el artículo. Yo en realidad, el teléfono lo utilizo para tomar fotos, pero nunca para editar y optimizarlas, así que las traspaso a mi computador en la mayor resolución posible, y de ahi ya poder trabajar en optimizar la imagen, incluyendo el peso.

      • Germán Vargas S.

        Buenos días Francisco: Te escribo desde Villavicencio, Departamento del Meta, Colombia.
        Agradezco tu respuesta. _ Después que te envié mi pregunta, tu artículo sembró en mi mente la necesidad de analizar qué era lo más conveniente y práctico… y llegué a la misma conclusión que tú amablemente me expones hoy: Seguiré tomando mis fotos con buena resolución y las editaré en mi PC, según me convenga.
        De nuevo muchas gracias. Un saludo. Te deseo lo mejor.

  • http://dianameono.com Diana Blogger

    Esta información es un tesoro. Mi más sincero agradecimiento Francisco, ya que como blogger que empieza en esta industria me haz dado ideas invaluables para mejorar, por ejemplo, la carga de mi blog y mis imágenes. Gracias de verdad! espero ver mas post como este!

  • http://dianameono.com Diana Blogger

    Entre Maxcdn y Amazon cual recomiendas mas para empezar?