Imágenes para Discover en WordPress: peso, carga y accesibilidad

70

Preparar imágenes para Discover en WordPress exige elegir la foto, controlar su exportación y comprobar cómo se presenta y carga. Esta guía explica ese flujo y el texto alternativo, sin repetir los criterios de elegibilidad tratados en la guía enlazada. Para los requisitos de elegibilidad y la directiva max-image-preview:large, consulta también la guía sobre imágenes y vista previa grande en Discover; aquí evitamos repetirla.

1. Elige una imagen que represente la página

Empieza por la pregunta editorial: ¿qué debe reconocer una persona al ver la tarjeta? La imagen principal tiene que corresponder al tema y no prometer una prueba, una noticia o un resultado que el artículo no contiene. Google recomienda que sea relevante, representativa y de buena resolución; también desaconseja usar el logotipo del sitio o una creatividad saturada de texto como imagen principal. La documentación de Discover y las pautas de Google para imágenes sirven para separar esa elección editorial de la configuración técnica.

Google recomienda proporción 16:9 para la imagen representativa que puede aparecer en Discover y advierte que puede recortarla automáticamente. Conserva el original y revisa que el encuadre horizontal mantenga el sujeto. La recomendación no obliga a recortar en 16:9 todas las fotos del artículo ni garantiza aparecer en el feed.

2. Conserva un original y exporta una versión adecuada

Guarda el original de trabajo fuera de la biblioteca pública y prepara una copia web con las dimensiones que necesita la plantilla. Para una imagen destinada a Discover, Google recomienda al menos 1.200 píxeles de ancho y más de 300.000 píxeles totales; describe la resolución, no un peso universal en kilobytes ni una garantía de aparecer en el feed. Consulta los detalles en la documentación oficial de Discover.

No existe un peso ideal universal: un paisaje, una captura y un dibujo comprimen distinto. Reduce dimensiones sobrantes y revisa la imagen a tamaño normal. Si aparecen halos, bloques o letras borrosas, prueba otro formato o nivel de calidad; no amplíes un archivo pequeño para simular resolución.

El ejemplo de portada mide 1.672 × 941 píxeles: el PNG original pesa 2.073.780 bytes y la exportación JPEG de calidad nominal 87, 239.490 bytes (un 88,5 % menos). Es una sola ilustración sintética, no una prueba controlada de calidad ni velocidad; no demuestra que JPEG sea siempre mejor.

3. Escoge el formato después de comparar

JPEG es práctico para fotografías y tiene compatibilidad amplia. WebP y AVIF suelen conseguir una compresión mejor que formatos anteriores, pero el resultado depende de la imagen, el modo de exportación y el soporte del servidor. La guía de formatos de web.dev recomienda elegir según el contenido y comprobar el archivo final, no cambiar la extensión sin revisar.

WordPress permite subir y usar WebP desde la versión 5.8 si el alojamiento admite el formato. AVIF llegó en WordPress 6.5 y depende también de las bibliotecas de procesamiento del servidor, que puedes revisar en Salud del sitio, en gestión de medios. Si un formato no es compatible, elige otro que el servidor pueda procesar y servir. WordPress documenta el soporte WebP de 5.8 y las condiciones de AVIF en 6.5.

PNG resulta útil cuando necesitas transparencia o conservar bordes limpios en gráficos, pero puede ser pesado para una fotografía. Si el formato elegido tiene una alternativa menos compatible, conserva una URL de respaldo en el atributo src. Google recomienda utilizar el elemento img y un respaldo legible aunque también se ofrezcan fuentes en picture. No cambies la biblioteca entera de golpe: una conversión puede alterar medios, variantes, metadatos y cachés.

4. Deja que el navegador elija una variante responsiva

Subir una imagen grande no significa que cada teléfono tenga que descargar el original. WordPress crea tamaños al importar un medio y puede incluir srcset y sizes para que el navegador escoja un candidato adecuado. El tema y los tamaños registrados determinan qué variantes se generan; los plugins o el HTML manual pueden cambiar la salida. El manual de imágenes responsivas de WordPress describe ese mecanismo.

Qué revisar en el HTML de una imagen de WordPress

Atributo	Qué comprueba	Señal útil
src	URL de respaldo que navegador y rastreadores pueden leer.	Responde bien y representa el contenido.
srcset	Variantes de tamaño disponibles.	Incluye candidatos apropiados, no solo el original.
sizes	Anchura de presentación que orienta la elección.	Se aproxima al hueco real en móvil y escritorio.
width y height	Proporción intrínseca y espacio reservado.	Coinciden con la variante, sin deformar el recorte.

En la página pública, examina la etiqueta img, no solo la ficha de Medios. Google encuentra imágenes a partir del atributo src de un elemento img y documenta el uso de srcset y picture para versiones responsivas. Una imagen importante colocada únicamente como fondo CSS no sustituye a una imagen de contenido con alternativa textual.

Las dimensiones también importan para el espacio de lectura. Con una proporción correcta en el HTML, el navegador puede reservar el hueco antes de descargar la imagen. web.dev recomienda dimensiones o una proporción equivalente para reducir saltos del contenido. En un diseño responsivo conserva la proporción con estilos como max-width:100%; height:auto; no pongas anchura y altura que deformen la foto.

5. Prioriza solo la imagen que aparece primero

El atributo loading no se debe aplicar igual a todas las imágenes. Si la portada visible al abrir una página es el elemento LCP, marcarla como loading="lazy" puede retrasar su solicitud. web.dev recomienda que el recurso LCP se descubra pronto en el HTML y advierte que no se cargue de forma diferida cuando está en la zona inicial. Para imágenes fuera de pantalla, la carga diferida puede posponer trabajo hasta que el lector se acerque a ellas.

fetchpriority="high" puede ayudar si una imagen es realmente prioritaria, pero no reduce sus bytes ni corrige un archivo sobredimensionado. La documentación de optimización de LCP recomienda reservar esa prioridad para uno o pocos recursos; si todo recibe prioridad alta, deja de distinguir lo importante. En WordPress, funciones como wp_get_attachment_image() pueden generar atributos de carga y variantes. Inspecciona la salida del tema antes de añadir ajustes manuales.

Una estrategia de carga según la posición

Imagen	Acción inicial	Qué comprobar
Imagen principal visible	No retrasarla con carga diferida. Valorar prioridad alta solo si es el LCP real.	Que aparece pronto en el HTML y la petición empieza pronto.
Imagen visible no principal	Dejar que el navegador ordene; no elevar prioridad por rutina.	Que no compita sin motivo con la imagen principal.
Imagen varias pantallas más abajo	La carga diferida puede reducir trabajo inicial.	Que se solicite al acercarse y no quede rota.

Compresión, formato y prioridad resuelven problemas distintos: cambiar PNG por WebP no corrige una imagen que la plantilla inserta tarde con JavaScript o como fondo. Para diagnosticar una página completa, enlaza esta revisión con la guía para mejorar la velocidad de una web y mide la URL con herramientas de laboratorio y, cuando existan datos, con datos de campo. Un cambio que parece rápido en una conexión no garantiza la misma experiencia para todas las personas.

6. Escribe un texto alternativo que ayude a entender

El texto alternativo describe la información o función de la imagen, no una lista de palabras clave. Google lo interpreta junto al contenido y desaconseja repetir términos. Para una imagen decorativa que no aporta información, W3C recomienda alt="", no omitir el atributo. W3C explica cómo tratar estas imágenes.

Para una fotografía, describe lo que el lector necesita saber en esa página. Si es un gráfico, resume el dato principal en el alt y deja valores y matices en texto cercano o en una tabla accesible. El pie puede indicar autoría, contexto o crédito; no repitas palabra por palabra el alt. En una ilustración creada con IA, identifica que es conceptual y no una captura real ni evidencia de una prueba.

Si un medio enlaza a otra página, el alt también puede actuar como texto del enlace. En ese caso debe expresar el destino o la acción. La guía de SEO para imágenes de Google recuerda que el alt puede funcionar como texto de anclaje. Para revisar accesibilidad web completa, consulta la guía de errores de accesibilidad; este tutorial se limita al tratamiento de imágenes.

Lista de comprobación antes de publicar

• La imagen describe la página y el encuadre conserva el sujeto en una vista horizontal.
• La copia web conserva resolución suficiente; el peso se mide en el archivo real, sin imponer una cifra universal.
• El formato es compatible con el servidor y el navegador; el archivo responde con el tipo MIME correcto.
• El HTML público contiene img src y, si se usan, variantes responsivas coherentes.
• La imagen principal no se retrasa con carga diferida; las imágenes lejanas no compiten sin motivo.
• Los atributos de tamaño reservan espacio y el recorte no se deforma en móvil.
• El alt explica la información o función; los adornos usan alternativa vacía y los créditos respetan derechos.
• La vista previa social utiliza una imagen representativa, sin texto excesivo ni promesas ajenas al artículo.

Estas prácticas facilitan el descubrimiento y la presentación de imágenes, pero no garantizan tráfico de Discover. Comprueba el HTML público y conserva los originales.

Fuentes y agradecimientos

Gracias a Google Search Central por publicar las pautas de Discover e imágenes; a web.dev por documentar formatos, LCP y estabilidad visual; al equipo de WordPress por sus manuales de formatos y variantes responsivas; y al W3C WAI por sus recomendaciones de texto alternativo. Estos documentos sostienen los criterios técnicos citados; no implican revisión ni aval de este artículo.

• Google Search Central: Discover y el sitio web.
• Google Search Central: SEO de imágenes.
• web.dev: elegir el formato de imagen.
• web.dev: optimizar LCP.
• web.dev: optimizar CLS.
• WordPress Developer Resources: imágenes responsivas.
• WordPress Core: soporte WebP en WordPress 5.8.
• WordPress Developer Blog: soporte AVIF en WordPress 6.5.
• WordPress Developer Resources: wp_get_attachment_image().
• W3C WAI: imágenes decorativas.