Otimizador de imagens Retina para @2x e telas de alta densidade

Telas Retina e outras de alta densidade colocam dois ou três pixels físicos em cada pixel CSS. Uma imagem exibida com 600 pixels de largura numa tela dessas precisa de 1200 pixels (@2x) ou 1800 pixels (@3x) de detalhe real para parecer nítida; com menos, textos e bordas ficam suaves. Dobrar as dimensões quadruplica o número de pixels, porém, então imagens de alta densidade precisam ser comprimidas com cuidado ou viram o item mais lento da página.

O otimizador Retina permite imagens de até 3840 × 2160 pixels, a resolução de uma tela 4K, e as comprime com qualidade 85. Essa configuração mais alta importa porque o detalhe é o motivo de servir imagens de alta resolução. Imagens menores não são ampliadas por padrão: ampliar não adiciona detalhe real, então comece de uma origem pelo menos do tamanho @2x de que você precisa.

Como usar o Otimizador de imagens Retina (@2x, @3x)

1. Arraste suas imagens para a área de envio, clique nela para escolher arquivos ou cole uma imagem com Ctrl+V. Esta página aceita arquivos JPG, PNG, WebP, GIF e BMP, vários de uma vez e com até 80 MB cada.
2. Calcule a largura-alvo: largura de exibição × 2 para @2x ou × 3 para @3x. Abra Resize, mantenha Max e digite essa largura, por exemplo 1200 para um espaço de 600 pixels.
3. Em More options defina o nome do arquivo como {name}@2x ou {name}-{w}w para que cada densidade tenha um nome claro, e processe as mesmas imagens de novo com a largura @1x se também quiser versões padrão.
4. Confira o resultado com o controle antes/depois: arraste o divisor sobre a prévia e veja abaixo as novas dimensões, o tamanho do arquivo, a qualidade e a porcentagem economizada. Qualquer mudança nas configurações reprocessa todas as imagens automaticamente.
5. Baixe uma imagem avulsa ou use Download all (ZIP) para o lote inteiro. Em More options você também pode definir um valor de DPI e um padrão de nome de arquivo com {name}, {w} e {h}.

Como usar bem imagens de alta densidade

• Sirva as duas densidades. No HTML, liste os arquivos no srcset com descritores 1x e 2x (ou de largura) para que telas comuns baixem o arquivo menor.
• A compressão se esconde bem em @2x. Como cada pixel é minúsculo numa tela Retina, qualidade 75 a 80 muitas vezes parece idêntica; use o controle antes/depois para ver se 85 é mesmo necessário.
• Escolha formatos modernos. WebP ou AVIF mantêm administráveis os arquivos @2x grandes; o otimizador WebP já vem configurado para isso.
• Saiba quando não usar 2x. Para celulares, o otimizador para celular já considera telas densas, e imagens comuns de páginas ficam com o otimizador para sites.

Se uma imagem de origem for menor que o tamanho @2x calculado, o resultado simplesmente mantém o tamanho da origem. Nesse caso, sirva-a só como imagem padrão ou crie antes uma origem maior.

Privado, grátis e rápido

Todo o trabalho acontece no seu navegador: as imagens são decodificadas, redimensionadas e recodificadas no seu próprio dispositivo, então nada é enviado a um servidor. Não há cadastro, marca d'água nem limite diário, e os dados de localização e da câmera (EXIF) são removidos de cada resultado.