1.3Medios: imágenes, galerías & optimización
Lo esencial en 30 segundos
- La biblioteca de medios centraliza imágenes, PDF y vídeos; se reutilizan sin subirlos dos veces.
- Redimensionar antes de subir y comprimir: una foto en bruto de varios MB es el primer factor de lentitud.
- Rellenar siempre el texto alternativo (alt): accesibilidad para los lectores de pantalla y posicionamiento.
Minicaso hilado — las fotos de Hassan
Hassan envía fotos de jarrones tomadas con el móvil, a veces de 6 MB cada una. Samir debe publicarlas en una galería sin volver lento el sitio. Muestra a Hassan cómo redimensionar, comprimir y describir las imágenes. Aprovecha para explicar el texto alternativo: útil para las personas con baja visión y para Google Imágenes.
Continuación del caso 1.2 — la página existe; hay que ilustrarla correctamente.
1. Gestionar los medios
La biblioteca de medios (Medios → Biblioteca) almacena todos los archivos del sitio: imágenes, PDF, vídeos. Al insertar una imagen en un artículo o una página, se puede subir o elegir de la biblioteca — reutilizar evita duplicados y aligera el almacenamiento. El bloque Imagen gestiona la imagen sola; el bloque Galería reúne varios visuales con un número de columnas ajustable.
Para cada imagen, el texto alternativo describe lo que muestra. Lo leen los lectores de pantalla y lo tienen en cuenta los motores de búsqueda. «Jarrón de gres esmaltado azul» es útil; «imagen1.jpg» no lo es. Samir lo convierte en regla para todas las fotos del taller.
2. Optimizar el peso
Una foto de móvil puede pesar de 5 a 8 MB cuando la visualización solo necesita una fracción. El primer reflejo es redimensionar a un ancho útil (a menudo 1600 a 2000 px como máximo) antes de subirla y luego comprimir la imagen. El formato WebP reduce aún más el peso con una calidad comparable; extensiones como ShortPixel o Imagify automatizan la compresión y la conversión.
WordPress activa de forma nativa el lazy loading: las imágenes fuera de pantalla solo se cargan al acercarse a la vista, lo que acelera la visualización inicial. Samir comprueba el peso antes y después y mantiene nombres de archivo claros, útiles para la organización y el posicionamiento.
🔎 Ejemplo concreto — Preparar las fotos del taller (caso Samir)
Foto en bruto: 4032 px, 6,2 MB.
1. Redimensionar a 1600 px de ancho.
2. Comprimir (calidad 80) → 240 KB.
3. Subir a Medios.
4. Alt: «Jarrón de gres esmaltado azul, colección Atlas».
→ Galería de 4 fotos, carga rápida.Resultado: un visual nítido con un peso dividido por veinte.
Lección: la calidad percibida no depende del peso del archivo.
Vocabulario de la sección
- Biblioteca de medios
- Almacenamiento centralizado de los archivos del sitio, reutilizables en todos los contenidos.
Ejemplo sencillo: Samir reutiliza una foto ya subida para dos páginas.
Lo que no es: subir diez veces la misma imagen.
Reflejo: un archivo, varios usos.
- Texto alternativo (alt)
- Descripción de una imagen, leída por los lectores de pantalla y aprovechada por los motores de búsqueda.
Ejemplo sencillo: «Cuenco de cerámica torneado a mano».
Lo que no es: dejar «imagen1.jpg» como descripción.
Reflejo: ninguna imagen sin un alt útil.
- Optimización de imagen
- Reducir el peso sin pérdida visible: redimensionar y comprimir antes de subir.
Ejemplo sencillo: 6 MB reducidos a 240 KB.
Lo que no es: subir la foto en bruto del móvil.
Reflejo: ligero = rápido = mejor posicionado.
- WebP
- Formato moderno más ligero que JPEG/PNG con la misma calidad.
Ejemplo sencillo: las fotos del taller convertidas a WebP.
Lo que no es: conservar PNG pesados para las fotos.
Reflejo: fotos → WebP si es posible.
- Lazy loading
- Carga diferida de las imágenes fuera de pantalla, nativa en WordPress.
Ejemplo sencillo: las fotos del final de la galería solo se cargan al desplazarse.
Lo que no es: desactivar el lazy loading sin motivo.
Reflejo: ganancia de velocidad gratuita.
En la práctica — Insertar imágenes sin lastrar el sitio
- Redimensiona una foto a 1600 px de ancho en tu ordenador.
- Súbela a Medios e insértala con el bloque Imagen rellenando un alt descriptivo.
- Crea una galería de 3 o 4 imágenes y ajusta el número de columnas.
- Instala una extensión de compresión, lanza la optimización y compara el peso antes y después.
Guion listo para decir — explicar la optimización (25 s)
«Preparo sus fotos antes de ponerlas en línea: siguen nítidas pero pesan mucho menos, así el sitio se muestra rápido, incluso en un teléfono. También describo cada imagen para las personas con baja visión y para Google.»
Hablar de la velocidad percibida por el cliente, no de kilobytes.
Modelo copiar-pegar — ficha de imagen
ARCHIVO: _______________
ANCHO TRAS REDIMENSIONADO: _______________
PESO ANTES / DESPUÉS: _______________ / _______________
FORMATO: WebP / JPEG / PNG
TEXTO ALTERNATIVO: _______________
PÁGINA DE INSERCIÓN: _______________Galería de producto
Imágenes cuadradas, WebP, alt preciso con el nombre de la pieza.
Foto de ambiente
Imagen grande de cabecera comprimida y cargada con prioridad.
Logotipo
PNG o SVG ligero, alt con el nombre del taller.
Documentos PDF
Comprimir también los PDF; nombrarlos claramente antes de subirlos.
✓ Buenas prácticas
- Redimensionar y comprimir antes de cualquier envío.
- Escribir un alt descriptivo para cada imagen.
- Reutilizar los medios existentes en lugar de duplicarlos.
✗ Errores frecuentes
- Subir fotos en bruto del móvil.
- Dejar el texto alternativo vacío.
- Subir varias veces la misma imagen.
Puntos clave
- La biblioteca centraliza y reutiliza los archivos.
- Redimensionar + comprimir = sitio rápido.
- El texto alternativo sirve a la accesibilidad y al SEO.
- WebP y lazy loading aligeran aún más la carga.
Reto 48h — aplícalo mañana
Toma tres fotos: redimensiónalas, comprímelas y escribe su texto alternativo. Insértalas en una galería y compara el peso total antes y después. 20 minutos.
- Gestiono la biblioteca de medios.
- Optimizo una imagen antes de subirla.
- Relleno un texto alternativo útil.
Preguntas frecuentes
¿Qué tamaño y qué formato para mis imágenes?
Un ancho adaptado a la visualización (rara vez más de 1600-2000 px), en WebP si es posible, si no JPEG para las fotos y PNG para los logotipos con transparencia. Una extensión de compresión automatiza la conversión y el redimensionado.
¿Puedo reutilizar una imagen ya subida?
Sí: la biblioteca lo conserva todo. Al insertar, elige «Biblioteca de medios» en lugar de «Subir» para evitar duplicados que sobrecargan el almacenamiento.
¿El texto alternativo es obligatorio?
Técnicamente no, pero es muy recomendable: hace el sitio accesible a los lectores de pantalla y ayuda a los motores a comprender la imagen. Para una tienda, también puede captar tráfico desde Google Imágenes.
Hassan envía una foto de jarrón de 6 MB tomada con el móvil. ¿Qué hace Samir antes de subirla?