Calcule tamanhos de imagem responsiva por breakpoints

Esta calculadora converte cada largura renderizada na largura de origem necessária usando um multiplicador de densidade e devolve uma lista ordenada e sem duplicatas. Assim, você torna explícita e reproduzível a relação entre CSS, densidade da tela e arquivos de imagem.

Converta regras de layout em pixels de origem

Comece pelos breakpoints já definidos no design ou na folha de estilos. Para cada um, informe a largura mínima da viewport em que a regra passa a valer e a largura real de exibição da imagem. Os dois valores usam pixels CSS e podem ser copiados diretamente da especificação. A calculadora ordena as linhas pelo breakpoint, mesmo que você as envie em outra ordem. Cada largura exibida é multiplicada pela densidade escolhida e o resultado é arredondado para cima até um pixel inteiro. Esse arredondamento evita que um produto fracionário gere um recurso ligeiramente menor que o necessário. A resposta mantém o mapeamento de cada regra para revisão e também apresenta uma lista separada de larguras de origem sem duplicatas. Essa lista é o conjunto prático de variantes que você deve gerar, armazenar em cache e referenciar no fluxo de imagens responsivas.

Escolha o multiplicador de densidade com critério

O multiplicador padrão é 2, uma referência útil para manter nitidez em telas comuns de alta densidade. Assim, uma imagem exibida com 480 pixels CSS precisa de uma origem com 960 pixels. Você pode selecionar outro valor entre 0.1 e 8 quando sua política de entrega tiver prioridades diferentes. O valor 1 reduz as dimensões para telas de densidade normal, enquanto 3 prepara arquivos para painéis mais densos, com maior custo de armazenamento e transferência. O mesmo multiplicador é aplicado a todos os breakpoints, preservando uma política consistente. A ferramenta não decide qual arquivo cada visitante baixa nem estima compressão ou tamanho do arquivo: ela calcula somente larguras. Use a lista resultante em um otimizador ou serviço de transformação e permita que o navegador escolha o recurso adequado por meio da marcação e das regras de mídia do componente.

Use o resultado no pipeline responsivo

A resposta contém o multiplicador aplicado, uma linha ordenada para cada breakpoint e uma lista numérica de larguras de origem únicas. As linhas ajudam você a conferir a implementação em relação ao design, pois exibem lado a lado a largura original e a calculada. A lista única facilita a automação quando duas regras exigem o mesmo arquivo. Por exemplo, duas condições podem exibir a imagem com 600 pixels CSS; usando densidade 2, você só precisa gerar uma variante de 1200 pixels. Envie cada largura única para a etapa de redimensionamento, preserve ali a proporção e utilize as URL geradas no componente. Recorte, formato, qualidade e altura devem permanecer nessa etapa posterior, pois dependem da imagem e da direção de arte. Listas vazias e breakpoints duplicados são rejeitados porque não formam uma especificação responsiva inequívoca.