Diseño web
Cómo preparar las imágenes de tu web para que carguen mejor
Organiza tamaños, recortes, formatos y carga de las imágenes de tu web con una guía práctica para empresas y una lista de revisión antes de publicar.
Abres la web de tu empresa desde el móvil: el título aparece, pero la fotografía principal tarda en llegar. Después bajas hasta los proyectos y las imágenes desplazan lo que estabas leyendo. Antes de cambiar todo el diseño, merece la pena revisar cómo se preparan y se sirven esos archivos. Esta guía te ayuda a organizar el trabajo con quien desarrolla la web: elegir imágenes útiles, adaptar sus versiones y comprobar el resultado publicado. El objetivo es conservar la información visual con una carga mejor resuelta.
1. Decide qué función cumple cada imagen
Empieza por una página de servicio y un proyecto representativo. Anota qué imágenes aparecen, dónde se utilizan y qué ayudan a entender. Una vista general puede situar el trabajo; un detalle puede explicar un acabado. Si varias fotografías cuentan lo mismo, revisa si necesitas mostrarlas todas.
Reúne los originales aprobados en una carpeta y distingue las copias destinadas a la web. Conserva una referencia que permita relacionar cada versión con su origen. Así podrás preparar otro recorte sin depender de una imagen descargada de la página o enviada por mensajería.
Entrega una relación sencilla: archivo, página, función y persona que lo aprueba. Marca también las imágenes pendientes de sustituir. Esa selección evita optimizar material que después se va a descartar.
2. Acuerda el encuadre antes de exportar
Una fotografía puede ocupar una franja ancha en ordenador y un espacio más vertical en móvil. Revisa dónde queda el motivo importante en ambos casos. Si al recortar desaparece el producto o el detalle que explica el servicio, prepara otra composición o selecciona una toma más adecuada.
La guía de imágenes adaptables de web.dev distingue entre ofrecer distintas resoluciones y elegir versiones con otra proporción o composición mediante el elemento picture: https://web.dev/learn/images/responsive-images. Son decisiones relacionadas, pero requieren una revisión diferente.
La ilustración interior muestra un jarrón que permanece completo en dos encuadres. Aplica ese criterio a tu material: señala qué debe conservarse y qué espacio puede recortarse. Pide ver la imagen dentro del diseño antes de aprobarla.
3. Sirve una versión adecuada al espacio disponible
Pregunta qué archivo descarga realmente un teléfono. Que una imagen se vea pequeña no demuestra que se haya descargado una copia pequeña. Pide al equipo técnico que compruebe las dimensiones del recurso recibido y las compare con su tamaño de presentación y la densidad de la pantalla.
Los atributos srcset y sizes permiten ofrecer variantes e informar al navegador del espacio previsto para la imagen. El navegador elige entre esas opciones; web.dev explica el mecanismo en su guía de sintaxis descriptiva: https://web.dev/learn/images/descriptive.
No necesitas decidir cada ancho por tu cuenta. Acuerda las familias de uso —cabecera, tarjeta y galería, por ejemplo— y pide que las variantes se generen de forma coherente. Comprueba también qué ocurre cuando alguien incorpora una fotografía nueva al gestor.
4. Compara formato, peso y detalle visible
Prepara varias exportaciones de una imagen representativa y compáralas dentro de la página. La guía de formatos de web.dev recomienda valorar WebP y AVIF frente a formatos anteriores según las necesidades de cada archivo: https://web.dev/articles/choose-the-right-image-format. Evita elegir solo por la extensión.
Después ajusta la compresión observando contornos, texturas y degradados. web.dev aconseja experimentar con la calidad sin comprimir en exceso: https://web.dev/articles/compress-images. Revisa el detalle que permite valorar tu trabajo, especialmente en fotografías de productos o acabados.
Registra el peso de las versiones elegidas y acuerda un criterio para nuevas incorporaciones. No hace falta imponer el mismo límite a una miniatura y a una vista ampliada. Pide que el sistema avise o adapte los archivos que excedan lo previsto.
5. Distingue la imagen inicial de las que aparecen después
La fotografía que presenta el servicio necesita un tratamiento distinto de las imágenes situadas al final de una galería. Entrega al equipo una indicación de cuáles se ven al abrir la página y cuáles quedan más abajo. Revisa esta decisión tanto en móvil como en ordenador.
La carga diferida permite posponer la descarga de imágenes alejadas de la zona visible hasta que el visitante se aproxima. La documentación de web.dev recomienda evitarla en las imágenes visibles al inicio, especialmente en la principal: https://web.dev/articles/browser-level-image-lazy-loading.
Comprueba el recorrido completo: abre la página, observa la cabecera y baja por el contenido. Si las imágenes aparecen tarde durante la lectura, pide revisar la configuración. Aplicar carga diferida a todo por defecto no resuelve cada situación.
6. Reserva el espacio para evitar saltos
Observa si un párrafo o un botón cambia de posición cuando llega una fotografía. Anota en qué página sucede y con qué imagen. Es una incidencia distinta del peso del archivo: también hay que revisar cómo se ha definido su espacio dentro del diseño.
web.dev explica que indicar anchura y altura permite al navegador conocer la proporción y reservar espacio antes de recibir la imagen: https://web.dev/learn/images/performance-issues. Pide que las dimensiones y los estilos sean coherentes con cada presentación.
Si utilizas recortes diferentes según la pantalla, comprueba también la proporción reservada en cada caso. Repite la revisión en tarjetas, cabeceras y galerías; una corrección en una plantilla puede dejar otros usos pendientes.
7. Comprueba la página y deja preparado el mantenimiento
Guarda una referencia antes del cambio y vuelve a revisar las mismas páginas después, procurando mantener condiciones comparables. PageSpeed Insights ofrece diagnósticos de laboratorio y, cuando hay datos suficientes, información de usuarios reales. Google explica sus diferencias y limitaciones aquí: https://developers.google.com/speed/docs/insights/v5/about.
Utiliza el informe para localizar problemas concretos y acompáñalo de una revisión visual. Confirma que siguen viéndose los detalles importantes, que los recortes funcionan y que puedes llegar al contacto. Una puntuación aislada no sustituye esa comprobación.
Deja por escrito cómo subir nuevas imágenes y quién revisa las excepciones. En Crecimiento Digital diseñamos y desarrollamos webs para empresas de toda España. Para plantear esta mejora, reúne páginas representativas, originales aprobados y las incidencias que habéis observado.
Lista de revisión de las imágenes de tu web
- Cada imagen tiene una función y un original aprobado localizable.
- Los recortes conservan el motivo importante en móvil y ordenador.
- El navegador recibe variantes adecuadas al espacio y la pantalla.
- Formato y compresión se han comparado sin perder detalle útil.
- Las imágenes iniciales y las de carga diferida están diferenciadas.
- Cada presentación reserva espacio con una proporción coherente.
- La versión publicada se ha revisado visualmente y con diagnósticos.
- El equipo sabe preparar y comprobar las próximas incorporaciones.
Si estás preparando una nueva web, puedes conocer cómo planteamos el diseño y desarrollo web para empresas o explorar nuestros proyectos.
Volver al blog