La regla corta
Si solo vas a leer una pantalla, que sea esta.
Antes de subir nada: el optimizador de fotos (ShortPixel) está detenido desde el 28 de agosto. Las 171 fotos JPEG/PNG subidas en septiembre no tienen versión AVIF ni WebP y se entregan como JPEG sin optimizar (unas 2 veces más pesadas). Hay 202 fotos en su cola. Se arregla con un ajuste (ver propuesta 1).
Fotos
JPEG · calidad 85 · sRGB · 2560 px por el lado largo
- Portada a sangre: 2560 × 1440 (16:9). Peso al subir: 300–900 KB.
- Banner de sección, galería: 2048 px por el lado largo. 250–600 KB.
- Tarjetas y miniaturas: 1600 × 1067 (3:2), sujeto al centro. 150–400 KB.
- Para compartir (OG): 1200 × 630, menos de 300 KB.
- Logos: SVG; si no hay, PNG transparente a 3 veces su tamaño en pantalla.
Sube JPEG, no WebP ni PNG: el sitio crea solo 9 tamaños y los convierte a AVIF/WebP. Esa conversión solo funciona si subes JPEG o PNG.
Videos
MP4 H.264, sin audio, 8–12 s, 1080p y 720p
- Loop de portada: 1920×1080 a 3.5 Mbps como máximo, y 1280×720 para teléfono. Pesos: ≤ 4 MB y ≤ 1.5–2 MB. Imagen póster WebP. Hoy pesa 13.1 MB y 7.0 MB porque dura 30 s.
- Loop de sección: el doble del tamaño de su caja, 4–10 s, 0.3–1.5 MB. Solo arranca cuando se ve en pantalla.
- Video largo con sonido: nunca en la biblioteca de medios. Súbelo a YouTube o Vimeo (o a Bunny Stream o Cloudflare Stream) y en la página pon una miniatura con botón de play. El reproductor carga al tocar.
DPI: no importan
En la web solo cuentan los píxeles. Una foto de 2560 px a 72 ppp y la misma a 300 ppp es el mismo archivo para el navegador. Si alguien te pide un número, pon 72 y listo. Explicación.
Nombre y texto alternativo
lovers-beach-el-arco-aerial.jpg: en inglés, minúsculas y con guiones, sin acentos, ñ ni espacios. Si cambias la foto, cambia también el nombre (-v2).
Texto alternativo en inglés que describa lo que se ve y dónde. Ejemplo real del sitio: “Aerial view of Lovers Beach at Lands End, Cabo San Lucas, with El Arco, the golden sand crescent and emerald water”.
Ejemplo real: la portada de El Dorado (subida el 23 de septiembre)
Se subió como JPEG de 2560 × 1440 a calidad 78, 394 KB (adjunto 5821). La medida y el peso de subida son correctos. WordPress creó 1024×576, 1536×864 y 2048×1152, entre otros tamaños. Esto es lo que la página entrega:
| Pantalla | Caja de la portada | Archivo que pide | Formato y peso entregados | ¿Nitidez suficiente? |
|---|---|---|---|---|
| Escritorio 1920 px | 1920 × 609 | 2048×1152 | JPEG · 255 KB | Sí (1.07×) |
| Escritorio 1440 px | 1440 × 609 | 1536×864 | JPEG · 140 KB | Sí |
| Pantalla retina 1440 o 1920 | 1440 × 609 / 1920 × 609 | 2560 completo | JPEG · 394 KB | 0.89× y 0.67×: casi |
| Teléfono 390 px (retina 3×) | 390 × 542 (casi vertical) | 1536×864 | JPEG · 140 KB | 0.53×: se ve suave |
Dos lecciones. 1) Como ShortPixel está detenido, la portada sale en JPEG. En las fotos del sitio que sí están optimizadas, la mediana del tamaño 2048 es 115 KB en AVIF contra los 255 KB de esta; es decir, 55 % menos. 2) En teléfono la caja es casi vertical y recorta los lados de la foto 16:9, así que haría falta un archivo de casi 2900 px de ancho. Subir una foto más grande no lo arregla. Lo que funciona es un recorte vertical aparte para teléfono (ver propuesta 4).
Qué hace el sitio solo con cada foto que subes
Por eso la regla es «subir un JPEG grande y bueno»: todo lo demás lo fabrica el sitio.
Subes un JPEG
Por Medios → Añadir, o desde la ficha. Si mide más de 2560 px, WordPress lo reduce a 2560 («-scaled») y guarda también el original.
WordPress hace 9 copias
150 (cuadrada), 300, 768, 1024, 1536 y 2048 px, más 3 de WooCommerce (100 y 300 cuadradas, 600). Calidad JPEG 82, con Imagick 7.1.2.
ShortPixel optimiza
Compresión con pérdida y crea un .avif y un .webp de cada copia. Hoy no corre solo: solo avanza con el panel de WordPress abierto.
El servidor elige el formato
Una regla propia del .htaccess entrega el AVIF (o el WebP) con la misma dirección .jpg a cada navegador que lo acepta.
La página elige el tamaño
Con srcset el navegador baja la copia que necesita, hasta 2048 px. LiteSpeed retrasa la carga de las fotos que no se ven al inicio.
Consecuencias prácticas:
- Subir WebP o AVIF ya convertidos te hace perder la mejor compresión. La regla del servidor solo convierte
.jpg,.jpegy.png. Desde mayo se han subido 383 WebP. - No sirve subir más de 2560 px. WordPress lo reduce a 2560. El original pesado queda guardado en el servidor, y ShortPixel guarda otra copia de respaldo: hoy los respaldos ocupan 4.0 GB de los 7.7 GB de fotos.
- La calidad al subir importa, pero no hace falta pasarse. Todas las copias se recomprimen (a 82 y luego con ShortPixel). Un JPEG a 85 es suficiente; a 90 o más solo agrega peso.
Fotos: medidas de exportación por colocación
Cada número sale de medir las cajas donde se pintan las fotos hoy, multiplicadas por la densidad de pantalla (1× en escritorio normal, 2× en retina, 3× en iPhone).
| Colocación | Medida (px) | Proporción | Formato y calidad al subir | Peso al subir | Lo que baja el visitante | Por qué |
|---|---|---|---|---|---|---|
| Portada a sangre (hero): home, golf, zonas, playas, fichas | 2560 × 1440 | 16:9 horizontal | JPEG, calidad 85, sRGB, sin GPS | 300–900 KB (tope 1.2 MB) | AVIF de 1536/2048/2560: 80–230 KB | 2560 es el máximo que conserva WordPress. En pantallas retina de 1440 y 1920 se pinta el 2560 completo (medido en golf). Más grande no se ve. |
| Portada: recorte vertical para teléfono (opcional) | 1440 × 1920 | 3:4 vertical | JPEG, calidad 85 | 300–800 KB | AVIF ~100–200 KB | En teléfono las portadas miden entre 390×293 y 390×680, casi verticales. Con una foto 16:9 se ven al 50–65 % de la nitidez posible. Solo se aprovecha si la plantilla lo programa (propuesta 4). |
| Banner de sección / foto grande dentro del texto | 2048 × 1365 (o 2048 × 1152) | 3:2 (o 16:9) | JPEG, calidad 85 | 250–600 KB | AVIF de 768–2048: 30–150 KB | Las cajas medidas van de 486 a 1145 px. El navegador nunca pide más de 2048 (tope del srcset). |
| Galería y lightbox (foto a pantalla completa) | 2048 por el lado largo | La original (3:2 o 4:3, vertical u horizontal) | JPEG, calidad 82–85 | 250–500 KB | Miniatura 10–60 KB; lightbox 100–200 KB | El lightbox abre el archivo completo. Hoy varias galerías usan ese mismo archivo como miniatura: en golf, fotos de 1000–1680 px en cajas de 173–350 px (114–206 KB cada una); en hoteles, el de 2560 en cajas de 202 px (hasta 383 KB). Con 2048 el daño es menor. |
| Tarjetas y miniaturas (directorios, carruseles, zonas) | 1600 × 1067 | 3:2, sujeto al centro con aire alrededor | JPEG, calidad 82–85 | 150–400 KB | AVIF de 768/1024/1536: 20–80 KB | Las tarjetas miden 283–485 px de ancho; en iPhone eso pide 850–1455 px. Cada plantilla recorta distinto (2.5:1 en playas, 4:3 en el home, 1:1 en Instagram), por eso el sujeto va al centro. |
| Mosaico tipo Instagram | 1080 × 1080 o 1080 × 1350 | 1:1 o 4:5 | JPEG, calidad 85 | 150–400 KB | 30–110 KB | Los cuadros miden 207–425 px. Con 1080 alcanza para 2× y 3×. |
| Imagen para compartir (OG: WhatsApp, Facebook, X) | 1200 × 630 | 1.91:1 | JPEG, calidad 85 | < 300 KB | La descarga la red social, no el visitante | Es la medida estándar de las vistas previas. Hoy El Dorado comparte una foto de 1000×666, Nobu una de 2560 y Casa Dorada su logo. |
| Logos (cabecera, socios) | SVG; o PNG a 3× el tamaño en pantalla (cabecera 420 px, socios 480–600 px) | La del logo | SVG o PNG transparente (nunca JPEG) | SVG < 10 KB; PNG < 30 KB | Igual que lo subido | El logo de la cabecera se ve a 98–124 px y hoy es un PNG de 420 px y 25 KB que se precarga en todas las páginas. Un SVG pesa menos y siempre sale nítido. |
Para todas las fotos
Color: sRGB siempre
Exporta en sRGB IEC61966-2.1. Las fotos de iPhone vienen en Display P3 y las de cámaras profesionales muchas veces en Adobe RGB. WordPress y ShortPixel quitan el perfil de color de las copias, y una foto que no es sRGB se ve deslavada. Convertirla a sRGB al exportar evita el problema.
Metadatos: fuera GPS y datos de cámara
WordPress quita los metadatos de las copias, pero el archivo completo los conserva. ShortPixel tampoco los borra (su opción «Remove EXIF» está apagada). Al exportar, deja solo el copyright. Es importante en villas y casas privadas: el GPS delata la ubicación.
Nombre de archivo
- En inglés, como el resto del sitio:
el-dorado-golf-hole-7-ocean-view.jpg. - Minúsculas y guiones, sin acentos, ñ, espacios ni «IMG_4532».
- Lugar y qué se ve, en menos de 60 caracteres.
- Para una versión nueva, un nombre nuevo (
-v2). Si repites el nombre, la gente sigue viendo la foto vieja hasta 7 días.
Texto alternativo (alt)
- En inglés. Qué se ve y dónde, en 80–125 caracteres.
- Sin «image of» ni «photo of», sin repetir palabras clave.
- ShortPixel tiene configurada la generación de alt con IA, pero no está en automático: hay que escribirlo al subir.
Pesos: cuánto pesa al subir y cuánto baja el visitante
Dos números distintos. El primero depende de ti; el segundo, de que el sitio haga su trabajo.
| Original | Medida | JPEG 90 | JPEG 85 | JPEG 82 | WebP 82 | AVIF 60 |
|---|---|---|---|---|---|---|
| Paisaje abierto (5029×2982, original de 6.4 MB) | 2560 × 1518 | 501 | 305 | 266 | 136 | 109 |
| Platillo vertical con textura (4480×6272, 3.4 MB) | 1829 × 2560 | 1183 | 690 | 603 | 405 | 299 |
| Interior de restaurante (3840×2560, 2.2 MB) | 2560 × 1707 | 1173 | 771 | 702 | 485 | 338 |
| Los mismos 3, a 1600 px | 1600 lado largo | 207 / 455 / 527 | 129 / 267 / 340 | 115 / 239 / 310 | 60 / 152 / 224 | 50 / 115 / 153 |
Exportado con Pillow 12 (JPEG optimizado y progresivo). El peso depende sobre todo de la textura: arena, follaje, manteles y vajilla pesan el doble que un cielo liso. Por eso el rango de «peso al subir» es amplio. Si un JPEG de 2560 a calidad 85 pasa de 1.2 MB, baja a calidad 80 o revisa si la foto tiene ruido (ISO alto): el ruido pesa mucho y no aporta nada.
| Copia que crea WordPress | JPEG optimizado | WebP | AVIF | Sin optimizar (El Dorado, septiembre) |
|---|---|---|---|---|
| 768 px | 47 KB | 36 KB | 32 KB | 33 KB |
| 1024 px | 62 KB | 49 KB | 46 KB | 59 KB |
| 1536 px | 96 KB | 81 KB | 77 KB | 140 KB |
| 2048 px | 132 KB | 116 KB | 115 KB | 255 KB |
| 2560 (completo) | 174 KB | 157 KB | 165 KB | 395 KB |
Resumen: con ShortPixel funcionando, una portada llega al visitante en 80–230 KB, una tarjeta en 20–80 KB y una miniatura de galería en 10–60 KB. Sin ShortPixel, las copias grandes pesan casi el doble.
DPI (o PPP): por qué no importan en la web
El DPI es una etiqueta de impresión que le dice a una impresora cuántos píxeles poner por pulgada de papel. El navegador la ignora: pinta los píxeles que tiene la foto en la caja que le toca.
Por eso 2560 × 1440 a 72 ppp y 2560 × 1440 a 300 ppp son idénticos en pantalla y pesan lo mismo. Uno de los originales del sitio venía «a 300 ppp» con 5029 px de ancho. Lo que importa son esos 5029 px, no el 300.
Lo que decide si una foto se ve nítida es cuántos píxeles tiene el archivo comparado con los píxeles físicos de la caja. En un iPhone, una caja de 390 px de ancho tiene 1170 píxeles físicos (3×). Por eso las medidas de esta guía están en píxeles.
Si te lo piden
- Fotógrafo o diseñador: «Para web, en píxeles: 2560 de ancho, JPEG calidad 85, sRGB». El DPI da igual; si insiste, 72.
- Un formulario que exige DPI: pon 72 o 300, lo que acepte. No cambia nada.
- Para imprimir (flyers, lonas): ahí sí importa, 300 ppp al tamaño final. Es otro archivo.
Videos: formato, medida y peso por uso
Un video pesa decenas de veces más que una foto. El truco es que la página cargue primero una imagen (el póster) y el video después, solo si hace falta.
| Uso | Contenedor y códec | Resolución | fps | Calidad (ffmpeg) | Duración | Peso objetivo | Póster | Dónde alojarlo | Cómo se integra sin frenar la carga |
|---|---|---|---|---|---|---|---|---|---|
| Loop de portada (mudo, automático) | MP4 · H.264 High, 4:2:0, 8 bits · sin pista de audio · faststart. Opcional: primero una fuente H.265 (hvc1), 36 % más ligera en la prueba; siempre con la H.264 de respaldo. | 1920×1080 escritorio + 1280×720 teléfono (o recorte vertical 720×900 si la portada del teléfono es vertical) | 24–30 (el de la toma; nunca 60) | CRF 26, tope 3.5 Mbps (escritorio) · CRF 28, tope 1.8 Mbps (teléfono) | 8–12 s, con el último cuadro igual al primero | ≤ 4 MB escritorio · ≤ 1.5–2 MB teléfono | WebP del primer cuadro: 1920×1080 (~60–150 KB) y ≥ 1170 px de ancho para teléfono | Cloudflare R2 con dominio propio (como hoy, pero sin la dirección r2.dev) |
Como la portada actual del home: el póster se precarga como imagen principal; el video se conecta 1.5 s después de cargar la página; no se carga con «reducir movimiento», Ahorro de datos ni 2G; se pausa fuera de pantalla; tiene botón de pausa. |
| Loop de sección (tarjeta, mapa, reel) | MP4 · H.264 · sin audio · faststart | El doble de su caja: 1280×720 para cajas de hasta 640 px; 480×852 para reels angostos | 24 | CRF 28, tope 1.2 Mbps | 4–10 s | 0.3–1.5 MB (el loop del mapa del home: 636 KB en 20 s) | WebP obligatorio, a la medida de la caja ×2 | Biblioteca de medios (el servidor los guarda 1 año en caché) | preload="none"; arranca al entrar en pantalla y se pausa al salir; póster fijo con «reducir movimiento». |
| Video largo con sonido (tour, entrevista, socio) | Sube el máster: MP4 H.264 (o ProRes) + audio AAC 48 kHz. La plataforma genera el streaming adaptativo (HLS). | 1080p o 4K (el máster) | El de la edición (24, 25 o 30) | Alta: 1080p a 16–20 Mbps o 4K a 45–60 Mbps. Recomprime la plataforma. | La que pida la historia; 60–120 s en fichas | 0 KB al abrir la página; la calidad se ajusta a la conexión al dar play | Miniatura propia 1280×720 (o 1920×1080) | YouTube (alcance, gratis) · Vimeo (sin anuncios) · Bunny Stream o Cloudflare Stream (HLS con reproductor propio) | «Fachada»: la página muestra la miniatura con un botón de play y el reproductor solo carga al tocar. Con subtítulos .vtt (mucha gente ve sin sonido). |
Prueba de códecs con la portada actual (10 s del video de pesca, 1080p)
| Codificación | Peso en 10 s | Bitrate | Comentario |
|---|---|---|---|
| Hoy en vivo (H.264, 1080p, 30 fps) | 4.4 MB | 3.5 Mbps | Dura 29.8 s → 13.1 MB |
| H.264 CRF 23 | 5.2 MB | 4.3 Mbps | Más calidad de la necesaria para un fondo |
| H.264 CRF 26 (recomendado) | 4.1 MB | 3.4 Mbps | Con tope de 3.5 Mbps; en escenas tranquilas baja mucho más |
| H.264 CRF 28 | 3.4 MB | 2.8 Mbps | Aceptable detrás de un velo o de texto |
| H.264 CRF 26 a 24 fps | 4.0 MB | 3.3 Mbps | Bajar fps ahorra poco (−2 %) |
| H.264 720p CRF 28 (teléfono) | 1.7 MB | 1.4 Mbps | Hoy el de teléfono va a 1.87 Mbps y 30 s (7.0 MB) |
| H.265/HEVC CRF 28 | 2.6 MB | 2.2 Mbps | Aprox. la calidad de H.264 CRF 23 a la mitad del peso. Solo como primera fuente, con H.264 de respaldo |
| VP9 (WebM) CRF 36 | 3.2 MB | 2.6 Mbps | No compensa: Safari lo soporta a medias |
| AV1 CRF 34 (modo rápido) | 3.4 MB | 2.8 Mbps | Tardó 4.6 min en codificar 10 s; los iPhone viejos no lo decodifican por hardware. Todavía no conviene. |
La prueba se hizo recomprimiendo el video ya publicado (que ya estaba comprimido), así que los pesos son pesimistas. Un máster limpio comprime mejor. La pesca, con agua y espuma, es de lo más difícil de comprimir; una toma aérea tranquila pesa la mitad.
Dónde alojar cada video
| Opción | Para qué sirve | Ventajas | Cuidado con |
|---|---|---|---|
| Biblioteca de medios (servidor Hostinger) | Loops cortos de menos de 5 MB | Simple; caché de 1 año en el navegador | No hay streaming adaptativo: cada visitante baja el archivo entero. Si reemplazas un video con el mismo nombre, la gente sigue viendo el viejo hasta un año. |
| Cloudflare R2 (lo que usa hoy la portada) | Loops de portada y de sección, pósters | Almacenamiento barato y sin costo por descarga | Hoy se sirve desde pub-….r2.dev. Cloudflare indica que esa dirección es para desarrollo (tiene límite de peticiones), y se midió que no envía cabecera de caché. Conviene un dominio propio, p. ej. media.whatsincabo.com. |
| YouTube | Videos largos con sonido que además quieras que se descubran en YouTube | Gratis; alcance y búsqueda propia | Muestra su marca y recomienda videos ajenos al final. El reproductor pesa más de 1 MB: usar fachada. |
| Vimeo | Videos de socios y tours con reproductor limpio | Sin anuncios, reproductor sobrio; ya lo usan 2 fichas de tours | Planes de pago; también conviene la fachada |
| Bunny Stream o Cloudflare Stream | Video protagonista con sonido y reproductor propio | Streaming adaptativo HLS: la calidad se ajusta a la conexión; sin marca ajena | Cobro por uso (almacenamiento y minutos vistos). Requiere integrar el reproductor. |
Método paso a paso
Del archivo de la cámara a la página publicada, y cómo comprobar que quedó bien.
A. Exportar las fotos
Lightroom Classic (Archivo → Exportar)
- Configuración de archivo: JPEG · Calidad 85 · Espacio de color sRGB.
- Tamaño de imagen: Cambiar tamaño para encajar → Borde largo → 2560 px (portadas), 2048 (galerías y banners) o 1600 (tarjetas). Marca «No ampliar». Resolución: 72 ppp (da igual).
- Enfoque de salida: Pantalla, cantidad Estándar.
- Metadatos: Solo copyright; quitar información de persona y ubicación.
- Nombre: nombre personalizado con el lugar, en inglés y con guiones.
Consejo: guarda esto como preajuste («WIC portada 2560», «WIC galería 2048», «WIC tarjeta 1600»).
Photoshop (Archivo → Exportar → Exportar como)
- Formato JPG, calidad 85 %.
- Tamaño de imagen: ancho 2560 (o 2048 / 1600), remuestreo «Bicúbica más enfocada».
- Marca «Convertir a sRGB». En metadatos elige «Ninguno» o «Copyright».
Foto del teléfono (iPhone o Android)
- El iPhone guarda en HEIC y en color Display P3, de 12 o 48 MP. El servidor sabe leer HEIC (Imagick lo soporta), pero la subida es enorme y conserva el original y la ubicación GPS.
- Mejor pasarla antes por Lightroom Mobile, o por Squoosh en la computadora: JPEG, 2560 px, sRGB.
- En el iPhone, al compartir: «Opciones» → apagar «Ubicación».
Squoosh (gratis, en el navegador: squoosh.app)
- Arrastra la foto → Resize: ancho 2560 (Lanczos3) → Compress: MozJPEG, Quality 85.
- El peso final aparece abajo; compáralo con la tabla de pesos. Descarga y sube el JPEG.
- No elijas WebP ni AVIF en Squoosh para subir al sitio: el sitio los hace solo desde el JPEG.
Muchas fotos a la vez (ImageMagick, línea de comandos)
Una foto (portada 2560; cambia 2560 por 2048 o 1600 según la colocación)
magick entrada.jpg -auto-orient -resize "2560x2560>" -colorspace sRGB -strip -sampling-factor 4:2:0 -interlace JPEG -quality 85 salida.jpgToda una carpeta → carpeta «web» (no toca los originales)
mkdir -p web && magick mogrify -path web -auto-orient -resize "2560x2560>" -colorspace sRGB -strip -sampling-factor 4:2:0 -interlace JPEG -quality 85 *.jpg"2560x2560>" reduce solo si la foto es más grande: nunca amplía. -strip quita GPS y datos de cámara. Si la foto viene en Adobe RGB o Display P3 con perfil incrustado, conviértela antes con -profile sRGB.icc en lugar de -colorspace sRGB (o expórtala en sRGB desde Lightroom), para que no se vea deslavada.
B. Preparar los videos (ffmpeg)
Loop de portada, escritorio: 10 s desde el segundo 5, 1080p, sin audio, ≤ 3.5 Mbps
ffmpeg -ss 5 -t 10 -i master.mov -an -vf "scale=1920:-2:flags=lanczos,fps=30,format=yuv420p" -c:v libx264 -preset slow -profile:v high -crf 26 -maxrate 3500k -bufsize 7000k -movflags +faststart hero-desktop.mp4Loop de portada, teléfono: 720p, ≤ 1.8 Mbps
ffmpeg -ss 5 -t 10 -i master.mov -an -vf "scale=-2:720:flags=lanczos,fps=30,format=yuv420p" -c:v libx264 -preset slow -profile:v high -crf 28 -maxrate 1800k -bufsize 3600k -movflags +faststart hero-mobile.mp4Teléfono con recorte vertical 4:5 (si la portada del teléfono es vertical)
ffmpeg -ss 5 -t 10 -i master.mov -an -vf "crop=ih*4/5:ih,scale=720:900:flags=lanczos,fps=30,format=yuv420p" -c:v libx264 -preset slow -crf 28 -maxrate 1800k -bufsize 3600k -movflags +faststart hero-mobile-4x5.mp4Opcional: versión H.265 (más ligera) para poner como primera fuente
ffmpeg -i hero-desktop.mp4 -an -c:v libx265 -preset medium -crf 28 -tag:v hvc1 -movflags +faststart hero-desktop.hevc.mp4Póster WebP del primer cuadro (escritorio y teléfono)
ffmpeg -i hero-desktop.mp4 -frames:v 1 -c:v libwebp -quality 80 poster-desktop.webp
ffmpeg -i hero-desktop.mp4 -frames:v 1 -vf "scale=1280:-2" -c:v libwebp -quality 80 poster-mobile.webpLoop de sección (24 fps, 720p, ≤ 1.2 Mbps)
ffmpeg -i clip.mov -t 8 -an -vf "scale=-2:720:flags=lanczos,fps=24,format=yuv420p" -c:v libx264 -preset slow -crf 28 -maxrate 1200k -bufsize 2400k -movflags +faststart seccion.mp4Revisar qué salió: duración, peso, medida, códec, fps
ffprobe -v error -show_entries format=duration,size,bit_rate:stream=codec_name,width,height,r_frame_rate -of compact hero-desktop.mp4La caja de herramientas del estudio ya trae media-pipeline/scripts/video-loop.sh, que hace H.265 + H.264 en un paso (tope 1280 px de ancho por defecto). Para la portada se le pasa 1920 como tercer argumento.
C. Subir
- Fotos: WordPress → Medios → Añadir nuevo (o desde la ficha). Escribe el texto alternativo en inglés al subir.
- Loops cortos (< 5 MB): también a Medios. Loops de portada: a R2 en una carpeta nueva por versión (
hero/v6/); nunca se sobrescribe un archivo. - Videos largos: a YouTube, Vimeo o Bunny/Cloudflare Stream. En el sitio va la dirección del video con su miniatura.
- Para reemplazar una foto o video ya publicado: sube el archivo con un nombre nuevo (
-v2) y cambia la referencia. No sobrescribas el archivo.
D. Comprobar que quedó bien
- En Medios: abre la foto y revisa que el tamaño completo sea ≤ 2560 px y su peso esté dentro del rango. La columna de ShortPixel debe decir «Optimized» con WebP y AVIF. Si dice «pending» o está en blanco, ShortPixel no ha pasado.
- En la página publicada (Chrome en computadora): clic derecho → Inspeccionar → pestaña Red → filtro Img → recarga. Busca tu foto: la columna Tipo debe decir avif (o webp), aunque el nombre termine en
.jpg. Eso es lo correcto. - Nitidez en teléfono: mírala en un iPhone real, no solo en la computadora. Si se ve suave en la portada, no es falta de tamaño: es el recorte (ver propuesta 4).
- Velocidad: PageSpeed Insights, pestaña Móvil. La carga del elemento principal (LCP) debe quedar por debajo de 2.5 s.
- Vista al compartir: pega el enlace en WhatsApp (o en opengraph.xyz) y revisa que salga la foto de 1200×630.
- Video: en la pestaña Red, filtro Media, revisa que el MP4 pese lo esperado y que no se descargue antes de que la página termine de cargar.
Qué NO hacer
Cada punto ya pasó en el sitio. Entre paréntesis, el ejemplo medido.
Subir la foto de 8000 px o de 30 MB. WordPress la reduce a 2560, pero guarda el original y ShortPixel otra copia de respaldo (hay una panorámica de 32.5 MB y una foto de 6.4 MB en respaldos; los respaldos ya ocupan 4.0 GB).
Subir fotos en PNG. Un PNG de foto pesa de 3 a 5 veces más que un JPEG. PNG solo para logos e ilustraciones con transparencia (una tarjeta de San José usa
Cover-photo-.png).Subir WebP o AVIF ya convertidos. El sitio solo crea AVIF a partir de JPEG y PNG, y la foto queda recomprimida dos veces (383 WebP subidos desde mayo).
Agrandar una foto chica. Ampliar no agrega detalle, solo peso. Si no hay una más grande, úsala donde se pinte chica (la portada de San José es de 2000 px y en retina queda al 69 %).
Videos de 100–200 MB en la biblioteca. El servidor lo permite, pero cada visitante baja el archivo completo, sin calidades adaptativas. Los videos largos van a una plataforma.
Loops largos en la portada. Un loop de 30 s pesa tres veces uno de 10 y nadie lo ve completo (el de hoy: 13.1 MB, y el navegador lo descargó entero en los 3.5 s siguientes a la carga).
Sobrescribir un archivo con el mismo nombre. Las fotos se guardan 7 días en el navegador y los videos 1 año: la gente sigue viendo el viejo. Siempre nombre nuevo.
Subir sin quitar el GPS. ShortPixel no lo quita (opción «Remove EXIF» apagada) y el archivo completo es público.
Texto escrito dentro de la foto. Cada plantilla recorta distinto, el texto queda cortado o ilegible en teléfono, y Google no lo lee. El texto va en la página.
Exportar en Adobe RGB o Display P3 sin convertir. Al perder el perfil, los colores salen apagados. Siempre sRGB.
Calidad 100 «para que se vea mejor». Pesa 2 a 3 veces más que 85 y no se nota: el sitio recomprime todas las copias de todos modos.
Insertar YouTube o Vimeo directo en la parte de arriba. El reproductor carga más de 1 MB antes de que alguien le dé play. Usar miniatura con botón.
Lo medido en el sitio
23 y 24 de septiembre de 2026. Configuración leída por SSH en solo lectura. Páginas cargadas con Chromium sin caché, con Google Analytics bloqueado, en 390 px (3×), 768, 1440 y 1920 px (1× y 2×).
9
copias que crea WordPress de cada foto (+ «-scaled» si pasa de 2560)
2560 px
tope del archivo completo · 2048 px tope del
srcset0 de 171
fotos de septiembre con AVIF/WebP (ShortPixel detenido)
13.1 MB
loop de portada del home en escritorio (7.0 MB en teléfono)
Configuración de fotos del servidor
| Pieza | Valor medido | Qué significa |
|---|---|---|
| WordPress / PHP | 7.0.5 / 8.2.30 | Versiones actuales |
| Editor de imágenes | Imagick (ImageMagick 7.1.2-19): JPEG, WebP, AVIF y HEIC. GD 2.3.3 de respaldo (WebP y AVIF) | El servidor puede leer y generar los formatos modernos |
| Tamaños registrados | 150×150 recortada · 300 · 768 · 1024 · 1536 · 2048 · Woo 100×100 y 300×300 recortadas · Woo 600 | 9 copias por foto |
| Tope de foto grande | big_image_size_threshold = 2560 (sin filtros) | Todo lo que pase de 2560 se reduce y el original se guarda aparte |
Tope del srcset | max_srcset_image_width = 2048 | WordPress no ofrece más de 2048 (las plantillas propias de golf sí incluyen el 2560) |
| Calidad de las copias | JPEG 82 (medido con el editor real) · WebP 86 (valor por defecto) · sin filtros que la cambien | Subir a más de 85 no sirve: las copias salen a 82 |
| Conversión de formato en WordPress | Ninguna (image_editor_output_format vacío) | WordPress guarda las copias en el mismo formato que se subió |
| Metadatos | image_strip_meta = sí (copias) · ShortPixel «Remove EXIF» apagado | El archivo completo conserva el EXIF y el GPS |
| Límite de subida | 1536 MB (upload_max_filesize y post_max_size, leídos desde la línea de comandos) | El servidor aceptaría videos enormes, lo cual no conviene |
| ShortPixel 6.5.6 | Con pérdida · crea WebP y AVIF · optimiza copias · respaldo de originales sí · redimensionar no · «Background mode» apagado · plan Unlimited desde el 28-ago | Solo trabaja con el panel de WordPress abierto en un navegador |
| Cola de ShortPixel | 202 pendientes, creadas entre el 28-ago y el 24-sep, 0 intentos · última optimización: 27-ago | Todo lo subido desde el 28-ago va sin optimizar |
| Entrega de AVIF/WebP | Regla propia «WIC WebP/AVIF Delivery» en .htaccess: si existe foto.avif y el navegador lo acepta, lo sirve con la misma URL .jpg (si no, WebP; si no, JPEG). Solo .jpg/.jpeg/.png | Por eso se sube JPEG |
| LiteSpeed Cache 7.9.1 | Carga diferida de imágenes sí (excepto clases wic-cover-full-image y wic-passport-phone) · de iframes no · optimización de imágenes propia no · WebP de LiteSpeed no · CDN / QUIC.cloud no · marcador de baja resolución (LQIP) no · VPI no | LiteSpeed no convierte fotos; solo retrasa su carga |
| Caché del navegador (cabeceras reales) | JPEG y WebP 7 días · AVIF sin cabecera (solo fecha de modificación) · MP4/WebM 1 año, immutable | Nombre nuevo al reemplazar; al AVIF le falta su regla de caché |
| Archivos en uploads | 44,648 JPG · 29,810 WebP · 18,875 AVIF · 5,813 PNG · 7.7 GB en total (4.0 GB son respaldos de ShortPixel) | Cuentan todas las copias |
Fotos subidas por mes y cuántas tienen AVIF
| Mes | Subidas | JPEG | PNG | WebP subido | JPEG/PNG con AVIF | Cobertura |
|---|---|---|---|---|---|---|
| Mayo 2026 | 1,346 | 999 | 185 | 35 | 1,084 de 1,184 | 92 % |
| Junio | 2,135 | 1,553 | 247 | 317 | 1,310 de 1,800 | 73 % |
| Julio | 188 | 148 | 30 | 10 | 131 de 178 | 74 % |
| Agosto | 193 | 161 | 20 | 12 | 114 de 181 | 63 % |
| Septiembre | 180 | 138 | 33 | 9 | 0 de 171 | 0 % |
ShortPixel no guarda el AVIF cuando sale más pesado que el JPEG; por eso ni los meses buenos llegan al 100 %.
Imagen principal (LCP) de cada página
| Página | Elemento principal | Formato y peso entregados | Tiempo en escritorio | Observación |
|---|---|---|---|---|
| Home | Póster del video (R2) | WebP 1920×1080 · 21.6 KB (teléfono: 768×432 · 7.2 KB) | 0.8–2.1 s | A 768 px el video (7.0 MB) pasa a ser el elemento principal a los 3.7–4.1 s, porque el póster de teléfono es más chico que su caja. En teléfono (390 px) la foto se ve al 49 % de la nitidez posible. |
| Golf El Dorado | Portada | JPEG (sin AVIF): 140 KB (1536) · 255 KB (2048) · 394 KB (2560) | 0.4–0.8 s | Buena prioridad de carga. Falta el AVIF por ShortPixel. |
| Zona San José | Portada | WebP 2000 px · 227 KB en todas las pantallas | 0.6–1.4 s | La precarga no ofrece tamaños, así que todos bajan el de 2000, también la tablet de 768. |
| Ficha de restaurante (Nobu) | Portada | AVIF: 27 KB (768) · 82 KB (1536) · 128 KB (2048) | 0.4–1.2 s | El modelo a seguir: tamaño por pantalla y AVIF. |
| Ficha de hotel (Casa Dorada) | Logo de la cabecera o carrusel | Carrusel: AVIF/WebP de 1024 px, 66–92 KB cada foto | 0.6–2.5 s | Al cargar baja 0.9–2.0 MB de fotos; la galería usa archivos de 1200–2560 px como miniaturas. |
| Playas (/beaches/) | Portada | AVIF: 126 KB (1536) · 224 KB (1920) | 2.5–3.2 s | LiteSpeed retrasa la carga de la portada como si fuera una foto de abajo (en teléfono emulado tardó 10.5 s). |
| Explorar (/explore/) | Primera tarjeta (Ruba's) | JPEG 768 px · 79 KB (subida en septiembre, sin AVIF) | 1.4–2.7 s | Las tarjetas de 768 px quedan al 44–69 % de la nitidez posible en iPhone. |
Tiempos de laboratorio desde un servidor en Phoenix, sin simular una red lenta. Sirven para comparar páginas entre sí; no son los datos de visitantes reales (Core Web Vitals).
Anchos pintados: ¿el archivo alcanza para la caja?
«Necesita» es el ancho de la caja × la densidad de pantalla, ajustado cuando la foto se recorta para llenar la caja. Una cobertura de 1.0 es exacta; por debajo de 0.85 se ve suave; por encima de 2 se desperdicia peso.
| Colocación | Caja en teléfono 390 (3×) | Cobertura en teléfono | Caja en 1440 (2×) | Cobertura 1440 retina | Caja en 1920 (1×) | Cobertura 1920 |
|---|---|---|---|---|---|---|
| Portada golf | 390×542 | 0.53 (1536) | 1440×609 | 0.89 (2560) | 1920×609 | 1.07 (2048) |
| Portada zona San José | 390×680 | 0.65 (2000) | 1440×749 | 0.69 (2000) | 1920×780 | 1.04 (2000) |
| Portada playas | 390×360 | 0.80 (1536) | 1440×560 | ~0.67 (1920) | 1920×560 | 1.00 (1920) |
| Portada ficha Nobu | 390×235 | 0.78 (1536) | 1440×320 | 0.71 (2048) | 1920×320 | 1.07 (2048) |
| Póster del home | 390×293 | 0.49 (768) | 1440×720 | 0.67 (1920) | 1920×864 | 1.00 (1920) |
| Tarjetas de /explore/ | 370×230 | 0.44–0.69 (768) | 485×230 | 0.79 (768) | 415×230 | ≥ 1 |
| Tarjetas de fichas (zona) | 348×236 | 0.98–1.45 | 381×248 | 0.87–1.01 | 381×248 | 1.35–1.58 |
| Galería golf (miniaturas) | 173×148 | 1.5–2.5 (sobra) | 287×230 | 1.45–2.43 | 287×230 | 2.9–4.9 (sobra), 114–206 KB c/u |
| Galería hotel (miniaturas) | 105×79 | 3.0–4.6 (sobra) | 202×151 | 2.4–6.0, 289–383 KB c/u | — | — |
| Galería restaurante Nobu (miniaturas) | 105×79 | 0.45–0.84 (300 px) | 202×151 | 0.35–0.66 (300 px) | — | — |
| Tarjetas del home (fondo CSS) | 302×192 | 1.3–5.2 (sobra), hasta 466 KB | — | — | 387×290 | 2.0–5.0 (sobra) |
| Fotos de playas (54 fichas) | 356×142 | 0.84 mediana (0.28 la peor) | — | — | 375×150 | 1.6 |
| Muro de Instagram (San José) | 207×207 | 0.88–1.54, JPEG 107 KB | 316×316 | 0.7–1.32 | 425×425 | 1.05–1.96 |
| Logo de la cabecera | 98–103 px | 1.36 | 124 px | 1.7 | 124 px | 3.4 |
Lectura: en escritorio normal todo alcanza. Los problemas están en dos extremos: portadas en teléfono y retina (les falta resolución por el recorte) y galerías y tarjetas del home (bajan el archivo completo para cajas pequeñas). El home descarga 13.2–13.5 MB de fotos al recorrerlo completo; 25 de esas fotos pesan más de 150 KB (6.2 MB en total) y 19 de ellas son el archivo completo sin reducir, casi todas usadas como fondo de tarjeta.
Videos que usa hoy el sitio
| Video | Dónde | Formato | Medida · fps | Duración | Bitrate | Peso | Cómo carga |
|---|---|---|---|---|---|---|---|
| Portada home, escritorio (v5, pesca) | Cloudflare R2 (r2.dev) | MP4 H.264 High, sin audio, faststart | 1920×1080 · 30 | 29.8 s | 3.5 Mbps | 13.1 MB | Se conecta 1.5 s después de cargar o al primer toque; se omite con «reducir movimiento», Ahorro de datos o 2G; se pausa fuera de pantalla; tiene botón de pausa. Medido: se descargó entero a los 3.5 s. |
| Portada home, teléfono | R2 | MP4 H.264 | 1280×720 · 30 | 29.8 s | 1.87 Mbps | 7.0 MB | Igual |
| Pósters de la portada | R2 | WebP | 1920×1080 y 768×432 | — | — | 21.6 KB y 7.2 KB | Precargados con prioridad alta |
| Loop del mapa (home) | /partners-deck/mapa3d/ | MP4 H.264 | 1152×720 · 24 | 20.1 s | 0.25 Mbps | 636 KB | preload="none", con póster WebP |
| Reels del home (3) | Biblioteca | MP4 H.264 | 480×852 y 640×640 · 24 | 4.8–6 s | 0.27–0.35 Mbps | 160–320 KB | preload="none", con póster WebP |
| Copias en la biblioteca | uploads/2026/08 | MP4 | 1080p y 720p | — | — | 13.1 MB y 7.0 MB | Duplicados del R2; no se usan en las páginas medidas |
| Videos en fichas | 2 tours (Vimeo) · 1 evento (MP4 enlazado de bisbees.com) | — | — | — | — | — | Campo de video de la ficha. No hay YouTube insertado en contenidos. |
Qué conviene cambiar en el sitio para el proyecto de fotos y videos
Solo son propuestas: no se tocó nada. En orden de impacto contra esfuerzo. Cada una necesita el OK de Iván.
| # | Propuesta | Por qué (medido) | Efecto esperado | Esfuerzo |
|---|---|---|---|---|
| 1 Urgente | Destrabar ShortPixel: encender «Background mode» (procesa con tareas programadas, sin navegador abierto) y vaciar la cola. | 202 fotos en cola desde el 28-ago con 0 intentos; 0 de 171 fotos de septiembre con AVIF. Coincide con el cambio a plan Unlimited del 28-ago y con que las fotos ahora se suben por línea de comandos, sin nadie en el panel. | Portadas y tarjetas nuevas ~45–55 % más ligeras (El Dorado 2048: de 255 KB a ~115 KB). Es automático para todo lo que se suba después. | Un ajuste + verificar que se creen los .avif |
| 2 Urgente | Portada de /beaches/ fuera de la carga diferida de LiteSpeed (agregar wic-bch__hero-img a las exclusiones, o data-no-lazy). | La portada sale con data-lazyloaded y un GIF de relleno: espera al JS aunque pida prioridad alta. LCP de 2.5–3.2 s en escritorio y 10.5 s en teléfono emulado. | La portada llega con el HTML, como en Nobu y golf (0.4–1.2 s). | Una línea |
| 3 Alta | Loop de portada del home: 10 s, CRF 26 y tope de 3.5 Mbps (y 720p a 1.8 Mbps); opcional H.265 como primera fuente. Póster de teléfono de ≥ 1170 px. | Hoy 13.1 MB + 7.0 MB por 29.8 s, descargados enteros a los segundos de cargar. A 768 px el video se vuelve el elemento principal porque el póster (768×432) es más chico que su caja. | De 13.1 a ~4 MB en escritorio y de 7.0 a ~1.5–2 MB en teléfono por visita. Portada nítida en teléfono. | Recodificar con los comandos de esta guía y subir a hero/v6/ |
| 4 Alta | Portadas con recorte vertical para teléfono (<picture> con una fuente 3:4 para menos de 768 px) en golf, zonas, playas y fichas; la foto vertical se sube como segunda imagen. | En teléfono las portadas miden 390×360 a 390×680. Con fotos 16:9 la cobertura es de 0.49–0.80. Subir más grande no ayuda (WordPress corta en 2560). | Portadas nítidas en iPhone con el mismo peso o menos; además se controla qué parte de la foto se ve. | Cambio de plantillas (una por tipo) |
| 5 Alta | Miniaturas de galería y tarjetas del home con el tamaño correcto (usar 300/768/1024 con srcset y sizes reales, no el archivo completo ni el sizes por defecto «1200px»). | Galería de golf: 114–206 KB por miniatura de 287 px. Galería de hotel: 289–383 KB por miniatura de 202 px. Home: 19 fondos de tarjeta a tamaño completo (hasta 4743 px y 466 KB) y 13.4 MB de fotos al recorrerlo. Al revés, la galería de Nobu usa 300 px y se ve suave (0.35–0.66). | Varios MB menos por página en home y hoteles; miniaturas nítidas en restaurantes. | Medio (plantillas de galería y tarjeta) |
| 6 Alta | Precarga de la portada de San José con imagesrcset/imagesizes (y revisar las otras zonas). | La precarga apunta al archivo completo de 2000 px, así que todas las pantallas bajan 227 KB, también la tablet (ya se había visto en /hotels/). | Tablets y teléfonos bajan la copia que les toca. | Pequeño |
| 7 Media | Servir R2 desde un dominio propio (p. ej. media.whatsincabo.com) con caché larga. | La portada se sirve desde pub-….r2.dev, que Cloudflare recomienda solo para desarrollo (tiene límite de peticiones), y no envía cabecera de caché (medido). | Video y pósters cacheados en la red de Cloudflare y en el navegador; sin riesgo de límite. | Configuración en Cloudflare + cambiar la constante de la portada |
| 8 Media | Regla de caché para AVIF en el .htaccess (1 año, como los videos, o al menos 7 días como JPEG/WebP). | El JPEG y el WebP salen con max-age de 7 días; el AVIF, que es lo que recibe la mayoría, sale sin Cache-Control. | Visitas repetidas sin volver a pedir las fotos. | Una línea |
| 9 Media | Imagen para compartir de 1200×630 por página (campo propio o recorte automático de la portada). | El Dorado comparte una foto de 1000×666; Nobu, una de 2560; Casa Dorada, su logo en PNG. | Vistas previas correctas en WhatsApp y redes, que es por donde se reparte el contenido protagonista. | Pequeño a medio |
| 10 Media | Fachada para YouTube/Vimeo (miniatura + play) en el campo de video de las fichas. | 2 fichas de tours ya usan Vimeo; el proyecto de video protagonista va a multiplicarlo. El reproductor pesa más de 1 MB. | 0 KB de video hasta que alguien da play. | Medio |
| 11 Baja | Encender «Remove EXIF» en ShortPixel (o exigir GPS fuera al exportar). | El archivo completo conserva EXIF y GPS. | Privacidad y algunos KB menos. | Un ajuste |
| 12 Baja | Limpieza de respaldos y duplicados: política para los respaldos de ShortPixel (4.0 GB), los MP4 duplicados en la biblioteca (20 MB) y revisar si los 3 tamaños de WooCommerce se usan. | 7.7 GB en uploads, más de la mitad respaldos. Cada foto genera 3 copias de WooCommerce. | Menos disco y menos trabajo para ShortPixel. Los originales, mejor en Drive. | Decisión + limpieza |
| 13 Baja | Logo de la cabecera en SVG. | PNG de 420 px y 25 KB precargado con prioridad alta en todas las páginas (ya estaba pendiente pedírselo a Iván). | Nítido a cualquier tamaño y más ligero. | Pequeño, si existe el vectorial |
Lo que no se pudo medir y cómo se midió
- Visitantes reales: los tiempos son de laboratorio (Chromium sin caché desde Phoenix, sin simular una red lenta), no los Core Web Vitals de Google. En teléfono emulado los tiempos salieron más altos por razones que no se aislaron. Para comparar se usaron bytes y píxeles, que no dependen de la red.
- La causa exacta de que ShortPixel se detuviera: se midió la cola parada, el modo en segundo plano apagado y el cambio de plan del 28-ago. Que sea por eso es la explicación más probable, no algo comprobado.
- Límite de subida en la web: 1536 MB es el valor que da PHP en la línea de comandos. El límite real del panel aparece en Medios → Añadir nuevo («Tamaño máximo de archivo»).
- Calidad visual: se midieron pesos y cobertura de píxeles, no se hizo una comparación visual con métricas tipo SSIM. Las calidades recomendadas (JPEG 85, CRF 26/28) son las habituales para web.
- Lightbox y explorador 3D: no se abrió el lightbox de las galerías ni se activó el explorador 3D de El Dorado. Se sabe que el 3D es geometría (1.1 MB de JS y JSON, sin texturas de foto) y que su fondo es una foto WebP de 1680 px (206 KB).
- AV1 bien configurado: solo se probó en modo rápido. Con modos lentos comprime más, pero tarda mucho más en codificar.
- Límites de WhatsApp para la vista previa: el «menos de 300 KB» es la práctica habitual, no se verificó con WhatsApp.
- Medición: 49 cargas (home, golf El Dorado, zona San José, /explore/, Nobu, Casa Dorada, /beaches/ × 390@3, 768@1/2, 1440@1/2, 1920@1/2), con desplazamiento completo para activar la carga diferida. El ancho real de cada archivo se leyó del descriptor del
srcset, no denaturalWidth, que da valores engañosos. Pruebas de exportación con 3 originales de los respaldos del sitio y 10 s del video de portada, todo en el contenedor, sin subir nada.