Podem se modificar automaticamente dependendo do tamanho da tela.


Geralmente são usadas de duas formas: 

  • Imagens em padrão de background, de forma que sejam cortadas automaticamente de acordo com o espaço útil.

Image Placeholder

  • Imagem com tamanhos fixados na proporção:

Image Placeholder


Podem sofrer diferenças de qualidade.


Dependendo do projeto pode-se aplicar recursos de otimização nos códigos.

As imagens grandes reduzem a velocidade das suas páginas da Web, o que cria uma experiência de usuário que não é ideal. Otimizar imagens é o processo de diminuir o tamanho do arquivo, usando um plugin ou script, o que, por sua vez, acelera o tempo de carregamento da página. Compactação com perdas e sem perdas são os dois métodos comumente usados.


Priorizar o uso de SVGs para logos e imagens vetoriais.


Imagens SVG não perdem a qualidade em zoom ou quando redimensionadas. Elas podem ser criadas e editadas com uma IDE ou um editor de texto. São acessíveis e animáveis. São arquivos de tamanho pequeno e altamente escaláveis.


Como escolher imagens adequadas?


Priorize a qualidade das imagens. Geralmente pedimos que o cliente nos envie no maior tamanho possível, a fim de darmos atenção ao tratamento de forma que encaixe no layout da diagramação de conteúdo.

Imagens Web tem padrão de resolução 72dpi em RGB e em formatos JPG, WEBP, PNG, GIF e SVG.