Home >> Problema >> Cámara digital >> Fotografía

Miniaturas nítidas en web: flujo de trabajo Photoshop, calidad JPEG 90+, miniaturas separadas

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

  1. Edita en RAW → ajusta color/contraste → no afines aún.
  2. 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.
  3. En Photoshop: Imagen > Tamaño de imagen, Re-muestreo: Bicúbica más nítida (Reducción).
  4. Aplica enfoque suave (Unsharp Mask: 50–80 %, 0.3–0.5 px, 0 umbral) SOLO a la miniatura tras reducir.
  5. 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).