Paginaweb365.com

Imágenes en WordPress, las buenas prácticas

Imágenes en WordPress, las buenas prácticas

¡Contrata tu web ahora!

Si ya estabas pensando en tener una nueva página web contáctanos ahora, seguro que te encantará lo que te propondremos

Si no lo tenias claro hasta ahora, te convenceremos 👌

Optimizar las imágenes nos aporta:

  • Vuestro lugar se carga lo más rápido posible
  • Vuestras imágenes están optimizadas para el rastreo y la indexación de motores de búsqueda como Google
  • Las imágenes dispondrán de un nombre descriptivo de la imagen, de manera que será más sencillo buscar la imagen en un futuro en la mediateca de WordPress

1. Reducir el tamaño de la imagen

¿Cómo empiezas a optimizar tus imágenes? Redimensionarlas en la resolución adecuada para la web es un buen punto de partida, y es algo que muchas personas que gestionan sitios web olvidan o desconocen.

a. Redimensionar imágenes

Las imágenes con las dimensiones adecuadas harán que el sitio web se cargue más rápidamente, lo que significa una mejor experiencia de usuario y una puntuación SEO más favorable para Google. Si no sabes cómo redimensionar tus imágenes, aquí tienes algunas reglas básicas que puedes seguir:

  1. Para las imágenes de inicio (es decir, a pantalla completa), deberían tener como máximo 1920 píxeles de anchura. Sin embargo, hoy en día, con las pantallas 4k y los monitores alargados cada vez más extendidos, es razonable utilizar imágenes de resolución más alta para este tipo de imágenes, aunque no es necesario que superen los 4000 píxeles.
  2. Las imágenes normales no deberían tener más de 1320 píxeles de anchura, ya que la mayoría del contenido de tu sitio web se ajustará dentro de un contenedor, que normalmente no tiene más de 1320 píxeles de anchura, incluso en las pantallas más grandes.
  3. Las imágenes deben redimensionarse en función de la cantidad de espacio de la pantalla que ocuparán. Una imagen que se espera que cubra aproximadamente el 50% de la pantalla no debe tener más de 680 píxeles de anchura.

Una imagen que ocupe toda la anchura de la pantalla requiere una resolución más alta para evitar que parezca pixelada. Por otro lado, las imágenes normales se encuentran en un contenedor en la mayoría de sitios web y, por lo tanto, no necesitan una resolución tan alta.

b. Formato de la imagen

La imagen también debe tener un formato adecuado según sus necesidades. El valor predeterminado es tener la imagen desada en formato JPG. Sólo si la imagen contiene alfa (o transparencia), debería mantenerse como PNG ya que el JPG no admite imágenes transparentes.

Actualmente existe el formato WEBP, que permite transparencia y que ocupa mucho menos que el JPG o el PNG. Este formato es el recomendable a utilizar para conseguir el mejor rendimiento web. Como contrapartida navegadores antiguos no son capaces de abrir estas imágenes

c. Compresión de imagen

El último paso es comprimir las imágenes para reducir aún más el tamaño del fichero. Os recomendamos desde las imágenes en formato Webp, formato desarrollado por Google. Podéis convertir vuestras imágenes en Webp utilizando el siguiente enlace:

Si prefieres desar las imágenes en otros formatos puedes utilizar las siguientes webs para comprimir las imágenes:

  1. JPG / JPEG: CompressJPG
  2. PNG: CompressPNG
  3. GIF: EZGIF GIF optimiser

2. Nomenclatura y etiquetado adecuados de las imágenes

Una nomenclatura y etiquetado adecuados de las imágenes permiten que sean optimizadas para la exploración e indexación por los motores de búsqueda como Google.

a. Convenciones de nomenclatura

Antes de cargar los ficheros de imagen en el WordPress, es una buena práctica nombrarlos utilizando la misma convención que las páginas web, para que tengan una URL amigable:

  • Todas las palabras en el nombre deben estar en minúsculas.
  • Eliminar los caracteres especiales.
  • Todos los espacios y guiones bajos son reemplazados por guiones
  • Los nombres de las imágenes deberían ser descriptivos.

Estas convenciones hacen que los motores de búsqueda tengan una tarea más sencilla al extraer información de tus imágenes, de manera que puedan indexarlas adecuadamente.

Utilizar nombres descriptivos para tus imágenes también te permitirá hacer un mejor uso de la función de búsqueda en la mediateca del WordPress, que te permite buscar medios utilizando palabras clave.

b. Etiquetado de imágenes

Después de cargar las imágenes, etiquetalas con una descripción adecuada tanto en el campo Texto alternativo (Alto Texto) como en el campo Título (Title) cuando las utilices.

Estos campos añadirán información adicional a tus imágenes que es leída por los motores de búsqueda y lectores de pantalla, y muchos motores de búsqueda recompensan los lugares que llenan de manera consistente estos dos atributos para sus imágenes.

  • En general, querrás tener descripciones más detalladas que los nombres de los ficheros de las imágenes, ya que casi no hay restricciones sobre qué puedes introducir en estos campos.
  • Tradicionalmente, el Texto alternativo ha sido considerado más importante que el texto del Título. Los motores de búsqueda dan mucha más importancia al Texto alternativo, al igual que hacen los lectores de pantalla.
  • El texto del Título determina la información emergente que aparece cuando un usuario coloca el ratón sobre una imagen. En general, a los motores de búsqueda no les importa si los utilizas o no, pero pueden añadir a la experiencia general.
  • Puedes introducir los mismos valores tanto en el Título como en el Texto alternativo sin ninguna penalización.

Conclusión

Para resumir, redimensiona, convierte y comprime tus imágenes antes de darles a cada una un nombre único y descriptivo que siga la convención de nomenclatura adecuada. Después de cargarlas en el WordPress, etiqueta cada imagen con el Texto alternativo y el Título antes de utilizarlas.

De esta manera obtendrás mejores resultados SEO y la mediateca de WordPress estará más arreglada

Si tienes alguna duda o quieres que te asesoremos puedes contactar con nosotros 

Explora más entradas en el blog

Abrir chat
💬 ¿Necesitas ayuda?
Paginaweb365.com
Hola 👋
¿En qué podemos ayudarte?