Analisador de srcset (pixel density)

O atributo que lista várias versões de uma imagem tem duas gramáticas diferentes, e misturá-las é o erro que faz a otimização não funcionar. Com descritor de densidade, você diz quantos pixels físicos cada arquivo tem por pixel de CSS — serve quando a imagem tem tamanho fixo. Com descritor de largura, você diz a largura real de cada arquivo em pixels, e o navegador escolhe conforme o espaço disponível.

Cole o conteúdo do atributo e a página separa cada entrada, mostrando URL, descritor e qual das duas gramáticas está em uso. Ela também avisa quando as duas aparecem juntas, o que é inválido: o navegador ignora o atributo inteiro nesse caso e cai de volta na origem simples, desfazendo silenciosamente todo o trabalho de gerar as variantes.

Um detalhe que quase todo mundo esquece: com descritor de largura, o atributo que informa os tamanhos é obrigatório. Sem ele, o navegador assume que a imagem ocupa a largura toda da janela e costuma baixar um arquivo maior do que o necessário. É a explicação mais comum para uma página que gerou seis variantes e continua baixando a maior delas no celular.