Tamanhos de imagem para sites: ajuste ao espaço renderizado, não ao monitor
Não existe um único tamanho ideal de imagem para sites. O conjunto de origem correto depende da largura máxima renderizada da imagem, dos breakpoints do layout, da densidade de pixels do dispositivo, do comportamento de corte e do orçamento de desempenho.
Por PixoPublicado
Comece pelo espaço renderizado
Meça o espaço de layout CSS mais largo da imagem, não o monitor. Um hero de largura total e um card de 320 pixels precisam de conjuntos de origem diferentes. Se um hero é renderizado a 1280 pixels CSS em telas grandes, uma candidata de 1280 e talvez de 2560 pixels pode ser útil; o card deve permanecer muito menor.
Gerador de imagens responsivas Crie variantes de largura, marcação e um ZIP localmente.
Crie um conjunto pequeno de candidatas úteis
Os conjuntos de largura devem seguir o layout: por exemplo 320, 640, 960, 1280 e 1920 pixels. Não gere todos os tamanhos possíveis. O navegador escolhe entre as candidatas, então cada arquivo deve representar um passo significativo em bytes transferidos.
Informe o layout ao navegador com sizes
O atributo srcset lista as larguras candidatas; sizes descreve com que largura a imagem vai ser renderizada nas condições da viewport. Se o sizes estiver ausente ou impreciso, o navegador pode baixar uma candidata maior do que o necessário.
Escolha formato e qualidade por classe de imagem
Use formatos modernos com perdas para fotografias e saída sem perdas para os gráficos que precisam disso. Logos podem ficar melhores como SVG. Compare texto, rostos, gradientes e bordas nítidas no tamanho renderizado, em vez de aplicar um único número de qualidade a todos os recursos.
Proteja o layout e a prioridade de carregamento
Defina width e height intrínsecos ou uma proporção para reservar o espaço. Dê prioridade à imagem principal acima da dobra quando o framework oferecer suporte e use carregamento adiado (lazy loading) nas imagens abaixo da dobra. Evite tornar todas as imagens de alta prioridade.