Cómo optimizar las imágenes de una web de arquitectura

1. Empieza por saber qué está cargando

Antes de comprimir todo el portfolio, identifica los tipos de imágenes de la web: portada, miniaturas, fichas, galerías y planos. Cada uno tiene una función y una necesidad de detalle distinta. Una misma fotografía original puede necesitar varias versiones.

Revisa páginas representativas en móvil y escritorio. Anota si tardan en aparecer las imágenes principales, si el contenido salta mientras carga o si una galería dificulta llegar al texto y al contacto. Estas observaciones permiten enfocar la revisión técnica.

Si necesitas ampliar una imagen para valorar un detalle, comprueba que la solución lo permite de manera cómoda. El objetivo es mantener la información que necesita el visitante y evitar descargar archivos enormes para vistas pequeñas.

2. Ajusta las dimensiones al diseño

Exporta versiones acordes con el tamaño al que se van a mostrar. Una miniatura de proyecto y una fotografía a pantalla completa no necesitan el mismo archivo. Considera también pantallas de mayor densidad, sin asumir que toda imagen requiere su máxima resolución disponible.

Las imágenes adaptativas permiten que el navegador elija entre versiones según el espacio y el dispositivo. En WordPress, revisa qué tamaños genera la biblioteca y cómo los utiliza la plantilla. Una imagen insertada manualmente puede necesitar una configuración distinta de un bloque nativo.

Reserva desde el inicio la proporción de cada imagen. Declarar sus dimensiones o un espacio equivalente ayuda a mantener estable la composición mientras se descargan los archivos. Es especialmente relevante cuando hay texto y botones alrededor.

3. Compara formato y compresión

Prueba formatos compatibles con tu sistema de publicación, como WebP o AVIF, y compara peso y resultado visual. El mejor ajuste depende de la imagen: vegetación, texturas finas, sombras suaves y dibujos de línea pueden reaccionar de forma distinta a la compresión.

Valora el resultado al tamaño real de uso. Observa bordes, degradados, materiales y líneas de los planos. Una reducción de peso que haga ilegible un dibujo o degrade una fotografía clave puede perjudicar la presentación del proyecto.

Conserva los originales fuera del flujo público de la web para poder preparar nuevas versiones. La biblioteca de publicación debe contener los archivos necesarios para mostrar el trabajo; el archivo fotográfico completo del estudio puede tener otra organización.

4. Prioriza la primera pantalla

La imagen principal necesita estar disponible pronto. Las imágenes que se encuentran más abajo pueden utilizar carga diferida cuando resulte adecuada. Aplicar el mismo criterio a todas puede retrasar precisamente la fotografía que abre la página.

Revisa también carruseles y fondos. Algunos diseños descargan varias imágenes grandes al inicio aunque solo una sea visible. Antes de añadir precargas o ajustes avanzados, identifica qué recurso necesita realmente la primera pantalla y cómo lo descubre el navegador.

Las guías de web.dev explican que la imagen que determina el LCP debe poder descubrirse y cargarse con prioridad adecuada. La configuración se comprueba sobre la página real: plantilla, plugins y scripts pueden cambiar el comportamiento.

5. Cuida contexto, accesibilidad y comprobación

Redacta textos alternativos para las imágenes que transmiten información. Describe lo relevante para el contexto de la página con lenguaje natural. Una imagen puramente decorativa puede tener un tratamiento distinto; rellenar todos los campos con la misma frase no mejora la explicación del proyecto.

Relaciona las fotografías con un texto que explique el encargo y las decisiones. Un nombre de archivo descriptivo ayuda a organizar el material, mientras que los créditos y permisos deben revisarse antes de publicar. La portada de este artículo se ha generado con IA y no representa una obra del estudio.

Después de optimizar, prueba la página en móvil y escritorio: carga inicial, estabilidad, navegación de galería y contacto. Utiliza herramientas de rendimiento para localizar problemas y contrasta las pruebas de laboratorio con datos de uso real cuando estén disponibles. Evita valorar toda la experiencia con una sola puntuación.

Si la web necesita una revisión más amplia, podemos trabajar su base técnica y velocidad. Si el problema está en cómo se muestran las obras, conviene revisar también la estructura del portfolio.