Tutoriales
Claude Opus 5.5: auditar imágenes responsive de producto
Usa Claude Opus 5.5 para comparar el espacio de la imagen, los archivos candidatos y la solicitud del navegador antes de exportar una foto mayor.
Usa Claude Opus 5.5 para comparar el espacio de la imagen, los archivos candidatos y la solicitud del navegador antes de exportar una foto mayor. Una imagen borrosa puede deberse al recurso elegido; una descarga móvil pesada, a un espacio declarado demasiado grande. Entrega mediciones, además de una captura.
Elegir la reparación según las pruebas
| Observación | Revisar primero | Cambio mínimo útil |
|---|---|---|
| Original nítido, página borrosa | Ancho mostrado, DPR y archivo solicitado | Corregir candidatos o declaración del espacio |
| El móvil descarga el mayor archivo | `sizes`, diseño CSS y `currentSrc` | Ajustar la declaración al diseño real |
| El producto queda cortado | Recorte y `object-fit` | Corregir composición o dirección artística |
| El archivo correcto conserva defectos | Píxeles originales y codificación | Volver a exportar desde el original |
MDN explica las imágenes responsive y distingue entre cambiar resolución y cambiar composición. `sizes` describe el espacio; no establece el ancho CSS. Usa `picture` cuando necesites recortes diferentes. No pidas a Opus arreglar un asa cortada aumentando la calidad JPEG.
Un cálculo de anchura
Imagina una página de una taza con un viewport de 390 píxeles CSS y 24 píxeles de margen interior a cada lado. El espacio es 390 − 48 = 342 píxeles CSS. Con DPR 2, una referencia inicial es 342 × 2 = 684 píxeles. Entre candidatos de 480, 800 y 1200 píxeles, 800 es una elección plausible, no una decisión garantizada del navegador. Son valores calculados de un ejemplo hipotético, no resultados de una prueba de Opus.
Si el código declara `sizes="100vw"`, describe 390 en lugar de 342 píxeles: aproximadamente un 14% por encima del espacio real. Quizá no cambie inmediatamente el archivo elegido, pero importa cerca de los límites entre candidatos. Una tarjeta de media anchura en escritorio no debería heredar la declaración de pantalla completa del hero móvil.
Registra viewport, zoom, `devicePixelRatio`, rectángulo del elemento, `currentSrc`, dimensiones de la respuesta y bytes transferidos. Revisa la solicitud real en la pestaña de red y anota las condiciones de caché. Un recurso grande puede seguir almacenado al reducir la ventana; un solo cambio de tamaño no demuestra un error. La guía de web.dev explica cómo dejar que el navegador elija un recurso adecuado.
Un prompt de revisión completo
Revisa la selección de recursos de esta imagen de producto. Entradas: HTML o código del componente, CSS relacionado, nombres de candidatos con dimensiones reales en píxeles, viewport y DPR, rectángulo mostrado, currentSrc y tamaño transferido. Trata las mediciones ausentes como desconocidas.
Separa selección de resolución, recorte artístico y daños de compresión. Calcula ancho del espacio × DPR para las condiciones aportadas y compáralo con el archivo solicitado. Comprueba que cada descriptor de anchura coincide con el archivo real. Explica si sizes coincide con el diseño CSS en cada punto de ruptura. No garantices una elección del navegador solo por el código.
Devuelve una tabla de pruebas, la causa más probable con su incertidumbre, el cambio mínimo y una matriz de verificación para pantallas estrechas y anchas con DPR 1 y 2. Conserva encuadre, texto alternativo y API del componente. Si faltan pruebas, identifica la siguiente medición en vez de reescribir todo el sistema de imágenes.El prompt sigue la idea de aportar contexto y requisitos de salida explícitos de la guía oficial de Opus. El flujo es ilustrativo; no se afirma haber ejecutado el modelo.
Verificar lo que recibe el cliente
Repite la revisión del mismo producto a las anchuras registradas e inspecciona bordes finos a tamaño normal. Comprueba archivo y bytes, además del aspecto. Conserva dimensiones o una reserva fiable de proporción para evitar saltos durante la carga. Acepta el cambio cuando el encuadre siga correcto y haya candidatos adecuados sin imponer el original más grande en todas las pantallas.
Preguntas habituales
**¿Hay que exportar siempre al doble del ancho mostrado?** DPR 2 es una condición de prueba, no una regla universal. También importan el diseño, los saltos entre candidatos y el navegador.
**¿Comprimir más corrige un `sizes` incorrecto?** Puede reducir bytes y mantener el error de selección. Primero verifica el espacio real.
**¿Una captura demuestra qué archivo se cargó?** No. Combínala con `currentSrc` y la respuesta de red: dos recursos distintos pueden parecer iguales en una captura pequeña.
Llevar el recurso revisado a la campaña
Agrupa la imagen aprobada y su recorte antes de crear variantes en Panelly Studio. Si el objeto parece incorrecto, consulta las comprobaciones de reflejos y perspectiva. Panelly es aquí el destino del trabajo creativo; no se describe una integración con Opus.
