Marcos de colores, foto de Jessica Ruscello

Muchas veces nos olvidamos del poder de las imágenes hoy en día. Estamos bombardeados visualmente por imágenes ya que está demostrado que son capaces de afectar a nuestro comportamiento. Cuando vamos a comprar, cuando vemos la tele, y cómo no, cuando navegamos por Internet.

Por muy novato que seas en WordPress, estoy seguro de que conoces las imágenes destacadas. Pero, lo que deberías preguntarte es si estás usando correctamente las imágenes destacas en WordPress. Por esto, hoy vamos a estudiar con un poco de detalle para qué sirven las imágenes destacadas, te daré también algún que otro consejo para que lo apliques ya (si no lo estás haciendo) y por último veremos algún plugin que es recomendable conocer al respecto.

Para qué sirven las imágenes destacadas en WordPress

Estoy seguro de que cuando visitas una librería te fijas en las portadas de los libros mucho más que en los títulos de estos. Pues cuando tus visitantes entran en tu web pasa lo mismo. Las imágenes destacadas en WordPress sirven para que, de un vistazo rápido, tus visitantes puedan hacerse una idea de qué se van a encontrar en tu web.

Además, si tienes una tienda online las imágenes cobran aún más importancia ya que serán las encargadas de mostrar tus productos a tus posibles clientes. Si les encanta lo que ven, las posibilidades de que compren aumentarán. Lo peor que puedes hacer es tener contenidos de alta calidad en tu WordPress y acompañarlos de imágenes feas. O incluso usar imágenes que nada tienen que ver con tus contenidos.

Captura de pantalla del diálogo para seleccionar una imagen destacada en WordPress.
Captura de pantalla del diálogo para seleccionar una imagen destacada en WordPress.

Así que ya sabes, con las imágenes destacadas te estás jugando mucho en tu WordPress. Y también fuera de él, ya que estas imágenes son las que compartirás en tus redes sociales cuando promociones tus contenidos, así como en tus feeds RSS.

Nunca sabes dónde aparecerán tus contenidos, pero está claro que vendrán acompañados de las imágenes destacadas que has elegido, así que asegúrate de escoger las correctas. La importancia de las imágenes destacadas de tu WordPress es mayor de lo que te imaginas.

4 consejos básicos para usar correctamente las imágenes destacadas en WordPress

Ahora que conoces la importancia de las imágenes destacadas en tu web, veamos las cuatro cosas que has de tener en cuenta para que no tengas problemas con ellas. No te preocupes que son consejos muy sencillos de entender y de aplicar.

Usa imágenes destacadas de alta calidad; notarás la diferencia

Estoy seguro de que a diario visitas webs y te encuentras con imágenes que dan toda la pena. Hay de todo: baja resolución, pixelación por doquier o incluso imágenes borrosas o movidas. Por no hablar de aquellas imágenes hechas a mano por diseñadores amateur que harían llorar a un ciego. O imágenes que incluyen texto imposible de leer debido a una mala combinación de colores.

Lo sé, generar imágenes de alta calidad es complicado para la mayoría (en la que me incluyo). Pero por suerte, hoy en día existen multitud de bancos de imágenes gratuitas que puedes usar en tu web sin ningún problema. Y lo mejor de todo es que estas imágenes son de alta calidad, creadas por personas con gran talento en diseño y fotografía. Así que, ¿por qué no usarlas?

Captura de pantalla de la web de Unsplash.
Captura de pantalla de la web de Unsplash.

En Nelio ya hace tiempo que utilizamos imágenes destacadas sacadas de Unsplash, y la calidad final que conseguimos es mucho mayor. Es tan fácil como poner las palabras clave en su buscador y elegir la imagen que más nos guste y mejor se adapte al contenido que estamos editando. Como ejemplo, la imagen destacada que acompaña a este artículo que estás leyendo muestra un montón de marcos de colores. Creo que se adapta bastante bien a la temática que estamos tratando, ¿verdad?

El tamaño de tus imágenes destacas importa (las medidas y el peso)

No por obvio deja de ser importante recordar que las imágenes suelen ser uno de los cuellos de botella de tu web. Seguro que has entrado en webs cuyas imágenes tardan en cargar una infinidad. Escoger imágenes de alta calidad es importante, pero reducir su peso y dimensiones a cotas razonables lo es más.

En Nelio estamos muy concienciados con este tema, por lo que incluso pusimos un límite en el peso máximo que permitimos al subir imágenes a la biblioteca de medios de nuestro WordPress. De esta forma evitamos el error humano de subir una imagen sin antes haberla reducido.

El proceso que yo sigo (y el resto de mis compañeros también) al subir una imagen destacada es el siguiente. Primero descargo la imagen que más me guste de Unsplash, que suele ocupar varios megas, ya que su resolución supera en la mayoría de las ocasiones los 3.000 píxeles de ancho. Luego reduzco las dimensiones de la imagen a 1.200 píxeles de ancho, lo que a su vez reduce el peso. Y por último, paso la imagen por un compresor para reducir aún más el peso final, consiguiendo de forma habitual pesos inferiores a los 100 kylobytes. Para esto último suelo utilizar la web compressjpeg.com, principalmente porque me deja modificar el grado de compresión a utilizar y comparar el resultado con la imagen original.

La imagen original ocupa más de 4Mb. Al reducir sus dimensiones nos queda una imagen de casi 400kb que acabamos reduciendo a unos 100kb al comprimirla. Todo, sin apreciar pérdidas de calidad.
La imagen original ocupa más de 4Mb. Al reducir sus dimensiones nos queda una imagen de casi 400kb que acabamos reduciendo a unos 100kb al comprimirla. Todo, sin apreciar pérdidas de calidad.

Así que, si puedes tener la misma imagen con menos de 100kb sin perder calidad, ¿para qué vas a subirla ocupando varios megas? Las posibilidades actuales de compresión de imágenes te sorprenderán. Pruébalo tú mismo y me cuentas.

Escoge una imagen destacada que tenga relación con el contenido

Lo peor que puedes hacer al escoger qué imagen destacada acompañará a tu contenido es que esta no tenga nada que ver con lo que explicas allí. Si tus imágenes destacadas no tienen relación ninguna con tus contenidos, estarás confundiendo a tus visitantes. Y no quieres tener visitantes confundidos, ya que estos no volverán.

Otro tema a evitar es el clickbait, muy de moda hoy en día. Seguro que te suena: ves una imagen sugerente y haces clic para acceder al contenido que hay detrás, pero una vez allí te das cuenta de que te han timado. La imagen no corresponde al contenido o el contenido no cumple con las expectativas generadas por la imagen. Como te digo, el clickbait es muy común en los medios digitales hoy en día para ganar un puñado de clics, pero no lo hagas. Si abusas del clickbait la imagen que se llevarán tus visitantes de ti acabará por los suelos.

Marcos de colores, foto de Jessica Ruscello
Marcos de colores, foto de Jessica Ruscello. Esta es la imagen destacada que acompaña a este artículo.

Si hablas de animales, muéstrame eso mismo en tu imagen destacada. Si tratas una noticia, acompaña el contenido con una imagen que me enseñe la noticia. Sí, a veces es complicado poner una imagen que tenga relación con contenidos más abstractos, pero en esos casos tira de imágenes más evocadoras, como por ejemplo un paisaje o imágenes neutras como un fondo de color. Verás como poco a poco le coges el punto y consigues escoger imágenes que acompañan correctamente a tu contenido.

No olvides el SEO de tus imágenes destacadas en WordPress

Las imágenes también tienen un papel importante en el SEO de tu web. Los motores de búsqueda (como Google) las indexan y es posible que acabes recibiendo visitantes si etiquetas correctamente tus imágenes. Mucha gente utiliza los buscadores de imágenes integrados de los motores de búsqueda y terminan visitando la web donde aparece la propia imagen.

No te olvides de rellenar los campos de tus imágenes con contenido útil tanto para buscadores como para lectores de pantalla (usados por personas con problemas visuales).
No te olvides de rellenar los campos de tus imágenes con contenido útil tanto para buscadores como para lectores de pantalla (usados por personas con problemas visuales).

Para no fallar aquí, lo que deberías hacer es completar los campos que WordPress te indica cuando subes una imagen en la biblioteca de medios. Además, si lo haces estarás automáticamente consiguiendo tener una web más accesible para todos aquellos visitantes que tengan problemas visuales y necesiten lectores de pantalla.

5 plugins para ayudarte con las imágenes destacadas en WordPress

Plugins para gestionar imágenes en WordPress encontrarás una infinidad, pero los que te voy a comentar aquí son aquellos que considero más útiles para las situaciones más comunes que me he ido encontrado como usuario de WordPress durante todos estos años. Aquí los tienes:

  • Regenerate Thumbnails (descargar): Cada vez que cambies de tema en tu WordPress es muy posible que las miniaturas (esas imágenes de inferior tamaño que crea WordPress por defecto para mostrar diferentes tamaños dependiendo del dispositivo o el lugar donde se muestre la imagen) se tengan que volver a calcular porque los tamaños han cambiado. Para esta labor tenemos este plugin que borra las miniaturas antiguas y genera las nuevas fácilmente. ¡Indispensable!
  • Auto Post Thumbnail (descargar): Si no usabas imágenes destacadas y después de leer este artículo has quedado convencido para empezar a usarlas pero te parece un engorro ir artículo a artículo para seleccionar la imagen destacada de cada uno, tranquilo. La solución es utilizar este plugin que cogerá la primera imagen que aparezca en cada artículo y la pondrá como imagen destacada del mismo automáticamente. No es lo más recomendable, pero te puede ser útil para tener imágenes destacadas rápidamente.
  • Add From Server (descargar): Si has cambiado de servidor y tienes las imágenes subidas pero no aparecen en tu biblioteca de medios, este plugin te permitirá seleccionarlas (muestra el árbol de directorios de tu servidor) y hacerlas visibles desde el propio WordPress. Nunca está de más conocerlo para situaciones en las que una migración no ha ido todo lo bien que esperábamos.
  • Enhanced Media Library (descargar): Aunque tiene muchas funciones diferentes, la que más me gusta es la posibilidad de clasificar las imágenes de la biblioteca de medios por categorías. Seguro que esto es algo que habrás necesitado alguna vez cuando recuerdas que subiste una imagen que ahora quieres recuperar y eres incapaz de encontrarla mediante una simple búsqueda.
  • Nelio Content (descargar): Mucha gente lo desconoce, pero nuestro plugin añade la funcionalidad de establecer como imagen destacada una imagen externa a través de su URL. De este modo no necesitamos subir la imagen a la biblioteca de medios de WordPress.

Muchos de ellos me han salvado en situaciones en las que necesitaba funcionalidades extendidas con las imágenes que WordPress por defecto no proporciona. Te animo a que los pruebes y me cuentes que tal te han funcionado.

Resumen final

No me cansaré de repetirlo: las imágenes destacadas tienen un papel fundamental hoy en día en WordPress. Cada vez nos hemos vuelto mucho más visuales, y no leeremos un texto a menos que las imágenes que lo acompañen nos entren por los ojos.

Por esto, recuerda usar imágenes destacadas de calidad y que tengan relación con el texto sin olvidarte ni del SEO ni de vigilar el peso de las mismas. Con estos simples consejos seguro que notas una mejora en tu web.

Además, tienes a tu disposición muchos plugins que te ayudan a gestionar mejor las imágenes destacadas en WordPress. No dudes en usarlos si lo necesitas. Recuerda que están a tu servicio.

Imagen destacada de Jessica Ruscello vía Unsplash

22 respuestas a «Cómo usar correctamente las imágenes destacadas en WordPress»

  1. Avatar de JUAN MANUEL
    JUAN MANUEL

    ¿cual es el tamaño ideal para una imagen destacada wordpress?

    1. Avatar de Antonio Villegas

      Depende del tema que estés usando. Mira el tamaño que mejor se adapte y utiliza ese, siempre comprimiendo la imagen para que ocupe lo mínimo posible manteniendo la calidad que necesites. Nosotros utilizamos imágenes de máximo 1200px de ancho y de menos de 250Kb de peso.

  2. Avatar de Fran
    Fran

    Por que a google le cuesta tanto mostrar una imagen destacada de la pagina de Inicio

    1. Avatar de Antonio Villegas

      Hola Fran. ¿A qué te refieres exactamente?

  3. Avatar de Alejandro
    Alejandro

    A pesar de que edito la imagen al tamaño alargado de la imagen destacada, al actualizar me aparece en la portada sólo una parte central y con mucho zoom de la imagen destacada. ¿Qué puedo hacer para que aparezca más o menos como la imagen original?

    1. Avatar de Antonio Villegas

      Pues supongo que deberás contactar con los desarrolladores del tema que estés utilizando. Es el tema el que decide cómo muestra las imágenes destacadas y qué tamaños necesita.

  4. Avatar de David Aguilera
    David Aguilera

    Hola, yo uso las imágenes destacadas para que me salgan en miniatura en la portada, donde salen todos los artículos que tengo, si no pongo ninguna imagen en «imagen destacada» no me sale. Pero sin quererlo también se me añaden directamente al articulo y encima, con mucho zoom y cortando la imagen.

    1. Avatar de David Aguilera

      Esto que comentas es normal. Los temas suelen usar las imágenes destacadas tanto en la lista de entradas como en la propia entrada. La visualización concreta en cada una de las diferentes páginas donde puede aparecer dicha imagen, así como en tamaño, escalado y recortado de las mismas, depende del tema. Para evitar que la imagen se vea fea en la propia entrada, te recomiendo que subas imágenes destacadas «grandes» y así el tema no tendrá que escalarla mal. Cuando el tema necesite una versión más pequeña de la imagen, él mismo la generará, con lo cual no deberías sufrir por subir imágenes más grandes.

  5. Avatar de Guillermo Capellán
    Guillermo Capellán

    Mi problema es que al compartir en facebook una publicación de mi web wordpress, FACEBOOK la imagen destacada no recupera vista previa y el enlace no muestra ni la imagen ni el título del artículo que publico. Este cuestión a veces no se produce.

    El problema ¿podría ser la imagen que utilizo como IMAGEN DESTACADA?
    Mil gracias. Cordialmente
    Guillermo

    1. Avatar de Antonio Villegas

      Podría ser que la imagen no es accesible por Facebook, aunque lo más normal es que no tengas bien puestas los metadatos de OpenGraph. Revisa esta entrada de mi compañera Ruth, que te explica el tema en más detalle.

  6. Avatar de Davianny
    Davianny

    En mi tema, ¿Dónde puedo ver cuál es el tamaño de la imagen destacada?

    1. Avatar de Antonio Villegas

      Hola Davianny. En el menú Ajustes > Medios (si tu usuario es administrador) tienes algo de información sobre las medidas. De todas formas, si no encuentras nada allí me temo que esta pregunta tendrá que responderla el autor del tema.

  7. Avatar de Discernir.info
    Discernir.info

    Hola Antonio. Cuando comparto la url de mi web, sale una imagen que no tiene nada que ver.

    Sé cuál es la imagen en mi bliblioteca, pero no localizo en la página de administración de la web dónde conecta esa imagen con la url del site para poder cambiarla.

    Gracias por tu ayuda.

    1. Avatar de Antonio Villegas

      Cuando dices que compartes una URL ¿te refieres en redes sociales? Si es el caso, échale un ojo a las etiquetas Open Graph de tu web. Ruth escribió este artículo sobre el tema hace un tiempo.

  8. Avatar de John Jairo Zuñiga
    John Jairo Zuñiga

    Cuando coloco una imagen destacada pequeña (200 x 200), al abrir la entrada aparece la imagen muy grande, tan grande que no se alcanza a ver en la pantalla. Cómo logro que se vea pequeña o al menos del mismo tamaño de la imagen destacada.

    Muchas gracias

    1. Avatar de Antonio Villegas

      Tendrás que ver en tu tema qué tamaño de imágenes son las que has de usar. Contacta con el desarrollador de tu tema y él te sabrá ayudar.

  9. Avatar de Julio
    Julio

    Hay alguna posibilidad de cargar varias imágenes destacadas o en el posts de diferentes tamaños y seleccionarlas por dispositivo (sin media querys). Es por el seo, una imagen destacada de 700×500 de una pantalla de ordenador la muestras en un móvil y para no obligar a la redimensión de cada imagen.

    1. Avatar de Antonio Villegas

      Me temo que eso debería hacerlo el tema que uses en WordPress. Es responsabilidad del tema elegir qué tamaños de imágenes crea cuando subes una imagen destacada y así mostrar el que toque cuando toque.

  10. Avatar de Leonardo
    Leonardo

    como podría saber las medidas exactas de las imágenes de mi tema, y no habrá algún problema con las medidas que pide wordpress, deben ser iguales con los de mi tema, agradecería si me quitas esa duda y como solucionarlo

    1. Avatar de Antonio Villegas

      Hola Leonardo. Las medidas de las imágenes las define tu tema, que es el que se encarga de visualizarlas. Dentro del Escritorio de WordPress, en el menú Ajustes > Medios puedes ver las medidas.

  11. Avatar de juan jose
    juan jose

    Por qué no aparece miimagen destacada en los enlaces que comparte en redes sociales.
    Agradecido de antemano

    1. Avatar de Antonio Villegas

      No debes tener definidas las metaetiquetas de Open Graph en tu web. Sobre esto, tienes este artículo al respecto.

Deja una respuesta

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

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.