Medios: imágenes y texto alternativo

Módulo 4: Crear contenido · Tiempo de lectura: 9 minutos

Objetivo de la lección: Tras esta lección sabrá preparar, subir y describir bien las imágenes, de modo que carguen rápido, se vean nítidas y sean utilizables para todos.

Conceptos clave: biblioteca de medios, formatos de imagen, big image threshold (2560 píxeles), JPEG, PNG, WebP, AVIF, compresión, srcset, lazy loading, texto alternativo, nombre del archivo, derechos de autor

Qué ocurre cuando sube una foto

Sube una foto desde su teléfono: 4.000 por 3.000 píxeles, 5 MB. WordPress hace entonces más de lo que imagina:

1. Si la foto es más ancha o alta que 2.560 píxeles, WordPress crea una versión reducida (con -scaled en el nombre) y la usa como «original». El original real también se conserva. Esto se llama el big image threshold y existe desde WordPress 5.3.
2. WordPress crea además una serie de formatos más pequeños: miniatura (por defecto 150 x 150 píxeles, recortada), mediano (300), grande (1024), y formatos adicionales de 768, 1536 y 2048 píxeles de ancho. Su tema y sus plugins suelen añadir también formatos propios.
3. Todas las versiones se guardan en wp-content/uploads/2026/11/ (año y mes de la subida).

Una sola foto se convierte así fácilmente en ocho o más archivos. Por eso la carpeta uploads crece tan rápido (lección 1.3), y por eso importa lo que sube.

En la página, WordPress añade a cada imagen un srcset: una lista de todos esos formatos. El navegador elige por sí mismo el formato más pequeño que sea lo bastante nítido para la pantalla. Un teléfono carga entonces el formato de 768 píxeles, una pantalla grande el de 1536. Esto solo funciona bien si los formatos existen, es decir, si sube la imagen a través de la biblioteca de medios y no por FTP.

Reducir y comprimir de antemano

Incluso con esos formatos automáticos, merece la pena reducir las fotos de antemano:

• Tamaño: una foto que en su sitio nunca se muestra más ancha de 1.600 píxeles no necesita tener 4.000 píxeles de ancho. Redúzcala de antemano a unos 2.000 píxeles en el lado largo. Esto ahorra espacio de almacenamiento, tamaño de copia de seguridad y tiempo de subida.
• Compresión: un JPEG con una calidad de 75 a 85 se ve casi igual a simple vista que uno con calidad 100, pero suele pesar la mitad.
• Metadatos: las fotos de un teléfono suelen contener la ubicación GPS donde se tomaron. Si no quiere que todo el mundo sepa dónde vive, elimínela antes de subir la foto. WordPress elimina muchos metadatos en los formatos reducidos, pero el original puede seguir conteniéndolos.

Existen plugins que comprimen las imágenes al subirlas o las convierten a un formato más moderno. Son útiles, pero compruebe si lo hacen en su propio servidor o envían las fotos a un servicio externo (lección 9.3), y si realmente necesita un plugin cuando también puede hacerlo de antemano.

Qué formato elegir

Si su servidor no puede procesar un formato, WordPress muestra un error al subir la imagen o no crea formatos más pequeños. En Herramientas > Salud del sitio (pestaña Información, en Gestión de medios) puede ver qué formatos admite su servidor.

Lazy loading

Desde WordPress 5.5, las imágenes reciben automáticamente loading="lazy": el navegador no carga una imagen hasta que se desplaza hacia ella. Esto hace que una página larga con muchas fotos sea mucho más rápida. WordPress deja deliberadamente la primera imagen grande de la parte superior de la página sin lazy loading y a menudo le da prioridad con fetchpriority="high", porque debe ser visible lo antes posible. Volverá sobre esto en la lección 6.3.

Ponga también siempre ancho y alto en una imagen (WordPress lo hace con las imágenes de la biblioteca de medios). Así el navegador reserva espacio de antemano y el texto no salta cuando llega la foto.

Texto alternativo: para quien no ve la imagen

El texto alternativo (alt) describe lo que aparece en una imagen. Los lectores de pantalla lo leen en voz alta a los visitantes ciegos o con baja visión, y aparece si la imagen no carga. Los motores de búsqueda lo usan para entender la imagen.

Un buen texto alternativo describe lo que la imagen expresa en este contexto:

• Malo: IMG_4032.jpg o foto.
• Malo: tienda de bicicletas bicicleta e-bike comprar bicicleta barata (acumular palabras clave no ayuda a nadie).
• Bueno: Un mecánico ajusta los frenos de una e-bike azul en el taller.

Si una imagen es puramente decorativa (una línea, un patrón de fondo), deje el texto alternativo vacío. Así un lector de pantalla la omitirá. Vacío es distinto de ausente: una imagen sin alt hace que un lector de pantalla a menudo lea el nombre del archivo en voz alta. Una imagen que es un enlace (por ejemplo, un logo que lleva a la página de inicio) describe a dónde lleva el enlace: Ir a la página de inicio de Fietsenwinkel De Spaak.

En la biblioteca de medios se introduce el texto alternativo junto a la propia imagen, y en el editor de bloques, en el bloque de imagen. Tenga en cuenta: un texto alternativo que introduzca en la biblioteca de medios no cambia automáticamente en las imágenes que ya están en páginas.

Nombres de archivo y derechos de autor

• Nombre del archivo: e-bike-remmen-afstellen.jpg dice más que IMG_4032.jpg y aparece en la dirección de la imagen. Minúsculas, guiones, sin espacios.
• Derechos de autor: una imagen de Google Imágenes no es de uso libre. Los fotógrafos y los bancos de imágenes envían con frecuencia facturas por el uso sin licencia. Use fotos propias, fotos con una licencia clara o un banco de imágenes cuyas condiciones conozca, y conserve la prueba de su licencia.

Almacenamiento y limpieza

La biblioteca de medios no se ordena sola. Una imagen que quita de una página sigue estando en la biblioteca y en uploads, con todos sus formatos. En un sitio con años de contenido, esto se va acumulando. Ordene de vez en cuando, pero con cuidado: una imagen puede usarse en un lugar que la biblioteca no ve (en un ajuste del tema, un widget o un correo). Haga primero una copia de seguridad.

Resumen

• WordPress crea varios formatos de cada subida y reduce las fotos grandes a 2.560 píxeles; el navegador elige el formato adecuado mediante srcset.
• Reduzca y comprima las fotos de antemano y elimine los datos de ubicación.
• Use JPEG o WebP para fotos, PNG para logos y capturas de pantalla; SVG solo con un plugin que limpie el archivo.
• El lazy loading funciona automáticamente, salvo para la primera imagen grande; el ancho y el alto evitan saltos.
• Un texto alternativo describe lo que la imagen expresa en el contexto; lo puramente decorativo recibe un texto alternativo vacío.

Cuestionario

Ejercicio

Ejercicio A4.4: Imágenes en su página de inicio. Introduzca la dirección de su sitio. El programa lee la página de inicio y examina las primeras 20 imágenes: ¿tienen un atributo alt (puede estar vacío, pero no faltar), tienen ancho y alto, y qué tamaño tiene cada archivo (mediante una solicitud HEAD)? Se señalan las imágenes de más de 300 kB. Corrija lo que aparezca en rojo en su biblioteca de medios o en la página, y vuelva a comprobarlo.

Para saber más

Estos artículos describen los pasos en los paneles de WebOké; en otros paneles funcionan de forma similar.

• Manual de DirectAdmin 18.5: Carga demasiado grande (error 413) o tiempo de espera agotado
• No se puede subir el archivo: aumente los valores de upload_max_filesize y max_execution_time
• Biblioteca de medios (wordpress.org, en inglés): https://wordpress.org/documentation/article/media-library-screen/
• Cómo escribir textos alternativos (W3C, en inglés): https://www.w3.org/WAI/tutorials/images/decision-tree/