Por Nicho Agencia Digital · Publicado el
Parte del uso, no del archivo original
Separa fotografías de portada, tarjetas, detalles de producto e ilustraciones. Para cada uso, registra proporción, anchura máxima visible y elementos que no deben cortarse. Conserva el original como fuente de edición, fuera de la entrega habitual al visitante.
Como práctica editorial, acuerda un nombre legible y una persona responsable de aprobar el recorte. Una foto de equipo necesita preservar rostros; una de producto puede requerir mostrar conectores o textura. La versión más liviana deja de ser útil si oculta precisamente el detalle que ayuda a decidir.
Genera tamaños que respondan al diseño
La guía de imágenes adaptables de web.dev explica cómo srcset ofrece candidatos y sizes describe el espacio previsto para que el navegador elija. Las dimensiones declaradas también ayudan a reservar la proporción de la imagen.
En una tarjeta que ocupa una columna pequeña en escritorio y casi toda la pantalla en móvil, exporta candidatos para ambos contextos. No copies una lista de anchuras sin mirar la plantilla. Revisa pantallas de distinta densidad: la anchura visual y los píxeles del archivo no representan necesariamente la misma cantidad.
Compara formatos con la imagen real
web.dev describe el uso de picture para ofrecer formatos como AVIF y WebP con un archivo de respaldo. El navegador selecciona una opción compatible según las fuentes definidas. El formato, por sí solo, no decide la calidad de tu fotografía.
Exporta versiones de prueba y compáralas al tamaño de lectura. Observa bordes, letras incorporadas, degradados y zonas oscuras. Registra peso y defectos visibles, y elige según ese balance. Evita imponer el mismo ajuste de compresión a una foto de paisaje y a una captura con texto pequeño. Si la imagen contiene información textual esencial, considera presentarla también como texto de la página.
Reserva espacio y ordena la carga
Comprueba que la caja visual tiene una proporción coherente antes de recibir el archivo. Recorre la página mientras carga: un botón que se desplaza cuando aparece una foto necesita revisión. Si móvil y escritorio usan recortes de proporción diferente, prueba ambos diseños expresamente.
La documentación de imágenes adaptables desaconseja retrasar con carga diferida una imagen visible desde el inicio. En la práctica, clasifica cada recurso por su posición real. Una galería inferior puede esperar; la fotografía principal merece otra revisión. No marques todas las imágenes como prioritarias sin medir qué compite por la descarga.
Ejemplo: una ficha con fotografía de detalle
Una tienda hipotética muestra una lámpara en tarjetas y en una ficha ampliada. El equipo prepara un recorte general para el listado y otro que permite examinar el interruptor en la ficha. Mantiene nombres relacionados para poder actualizar ambas piezas cuando cambia el producto.
En móvil verifica que la tarjeta recibe un candidato razonable y que el detalle se distingue al abrir la ficha. Si el recorte pequeño elimina el interruptor, no aumenta su resolución sin más: cambia el encuadre. Después revisa el texto alternativo según lo que la imagen aporta en cada contexto.
Verifica la entrega y deja una regla de mantenimiento
Usa las herramientas del navegador para observar URL, tamaño transferido y candidato elegido con caché desactivada durante la prueba. Comprueba que no faltan archivos y que la versión de respaldo funciona. Guarda una pauta para futuras cargas del equipo: usos, proporciones y revisión visual. No prometas una puntuación fija de rendimiento; fuentes, scripts, servidor y otros recursos también influyen en la experiencia.
Para interpretar el efecto sobre la experiencia, separa mediciones de laboratorio y datos reales de usuarios.
El siguiente paso
Revisemos qué imágenes descarga tu web y preparemos variantes que respeten tanto el diseño como la información que muestran.
Desarrollo web y plataformas empresariales · Conversar sobre tu proyecto ↗
Fuentes y alcance
Fuentes consultadas el 12 de octubre de 2026. Las recomendaciones de proceso son propuestas editoriales de Nicho; los ejemplos identificados como hipotéticos no representan resultados de clientes.
Contenido preparado con asistencia de IA y comprobaciones automáticas. No sustituye una evaluación de tu implementación ni garantiza resultados. Escríbenos si encuentras algo que debamos corregir.