Optimizador de imágenes Retina para pantallas @2x

Las pantallas Retina y otras de alta densidad meten dos o tres píxeles físicos en cada píxel CSS. Una imagen mostrada a 600 píxeles de ancho en una de ellas necesita 1200 píxeles (@2x) o 1800 píxeles (@3x) de detalle real para verse nítida; con menos, el texto y los bordes se ven blandos. Sin embargo, duplicar las dimensiones cuadruplica el número de píxeles, así que las imágenes de alta densidad deben comprimirse con cuidado o se convierten en lo más lento de la página.

El optimizador Retina admite imágenes de hasta 3840 × 2160 píxeles, la resolución de una pantalla 4K, y las comprime con calidad 85. Ese ajuste más alto importa, porque el detalle es precisamente la razón de servir imágenes de alta resolución. Las imágenes pequeñas no se amplían por defecto: ampliar no añade detalle real, así que parte de un original al menos tan grande como el tamaño @2x que necesitas.

Cómo usar el Optimizador de imágenes Retina (@2x, @3x)

1. Arrastra tus imágenes a la zona de carga, haz clic para elegir archivos o pega una imagen con Ctrl+V. Esta página acepta archivos JPG, PNG, WebP, GIF y BMP, varios a la vez y de hasta 80 MB cada uno.
2. Calcula el ancho objetivo: ancho de visualización × 2 para @2x o × 3 para @3x. Abre Resize, mantén Max y escribe ese ancho, por ejemplo 1200 para un hueco de 600 píxeles.
3. En More options pon como nombre {name}@2x o {name}-{w}w para identificar cada densidad, y vuelve a procesar las mismas imágenes con el ancho @1x si también quieres las versiones estándar.
4. Revisa el resultado con el deslizador antes/después: arrastra el divisor sobre la vista previa y consulta debajo las nuevas dimensiones, el peso, la calidad y el porcentaje ahorrado. Cada cambio en los ajustes vuelve a procesar todas las imágenes automáticamente.
5. Descarga una imagen suelta o usa «Download all (ZIP)» para todo el lote. En «More options» también puedes fijar un valor de DPI y un patrón de nombre de archivo con {name}, {w} y {h}.

Cómo usar bien las imágenes de alta densidad

• Sirve ambas densidades. En HTML, enumera los archivos en srcset con descriptores 1x y 2x (o de ancho) para que las pantallas normales descarguen el archivo más ligero.
• La compresión se disimula bien en @2x. Como cada píxel es diminuto en una pantalla Retina, una calidad de 75 a 80 suele verse igual; el deslizador antes/después te dice si de verdad hace falta 85.
• Elige formatos modernos. WebP o AVIF mantienen manejables los archivos @2x grandes; el optimizador WebP viene preparado para ello.
• Sabe cuándo no usar 2x. Para teléfonos, el optimizador para móvil ya tiene en cuenta las pantallas densas, y las imágenes normales de una página se cubren con el optimizador para web.

Si una imagen de origen es más pequeña que el tamaño @2x calculado, el resultado mantiene el tamaño del original. En ese caso sírvela solo como imagen estándar o consigue antes un original más grande.

Privado, gratis y rápido

Todo el trabajo se hace en tu navegador: las imágenes se decodifican, redimensionan y vuelven a codificar en tu propio dispositivo, así que nada se sube a un servidor. No hay registro, marca de agua ni límite diario, y los datos de ubicación y de cámara (EXIF) se eliminan de cada resultado.