Problema
Derek sube fotos de moda (600×900 px, JPEG 26 kB, calidad 50). Miniaturas generadas por HTML (redimensionado en navegador) salen borrosas. Sitio de referencia (ASOS) muestra miniaturas nítidas.
Errores detectados
- Compresión JPEG excesiva (calidad 50 → artefactos, pérdida detalle).
- Redimensionado en navegador (etiqueta
IMG width/height) interpola mal.
- Algoritmo de reescalado en Photoshop no óptimo.
Solución completa
- Edita en RAW → ajusta color/contraste → no afines aún.
- Crea dos versiones:
- Grande: 600×900 px (o 1200×1800 para retina), JPEG calidad 90–100.
- Miniatura: 200×300 px (proporción exacta), JPEG calidad 85–90.
- En Photoshop: Imagen > Tamaño de imagen, Re-muestreo: Bicúbica más nítida (Reducción).
- Aplica enfoque suave (Unsharp Mask: 50–80 %, 0.3–0.5 px, 0 umbral) SOLO a la miniatura tras reducir.
- Sube ambos archivos; HTML referencia cada uno según contexto (miniatura o grande).
Resultado
Miniaturas nítidas, carga rápida, control total. ASOS y similares usan este método (archivos separados + CDN).