Imagens

Visuais como foto e gráfico que comunicam informação, dão contexto e reforçam a marca.

Hard

O que é

Imagens são os elementos visuais embutidos no produto, da foto ao gráfico, usados pra comunicar ideia, dar contexto e criar identidade. Além de decorar, elas comunicam mensagem, definem tom e dão pista que o texto sozinho não entrega, porque uma foto pode estabelecer contexto ou guiar a atenção pra uma ação.

Vale entender como cada visual se diferencia: o ícone é o símbolo mínimo de ação, a ilustração é o visual autoral com narrativa, e a imagem inclui foto e gráfico que representam a realidade ou dão contexto. Cada um tem o seu papel, e juntos eles formam um sistema visual equilibrado.

A otimização importa muito aqui. Uma imagem mal gerenciada trava a performance, sobretudo no mobile, então a saída é comprimir, usar formato moderno como WebP ou AVIF e carregar só o necessário, com carregamento sob demanda conforme a pessoa rola. A acessibilidade pede alt descritivo, e a imagem que é só decorativa deve ser marcada como tal, pra não poluir a tecnologia assistiva.

Em uma frase

Essas fotos tão pesadas, vamos comprimir e trocar pra WebP antes de subir.

A pergunta que ele responde

Como eu uso imagem no produto sem travar a performance no celular?

Quando usar

Ajuda pra dar contexto, reforçar marca e comunicar aquilo que o texto sozinho não alcança.

Como não usar

O cuidado é não subir imagem pesada sem otimizar e sem alt, porque isso trava a performance no mobile e ainda exclui quem usa leitor de tela.

Na prática

Pense numa página pesada de foto. O time comprime tudo, troca pra WebP e ativa o carregamento sob demanda. Aí a página abre rápido no celular sem perder o visual.

Não confunda com

Vale separar imagem de ilustração. A imagem costuma ser foto ou gráfico que representa a realidade, enquanto a ilustração é um visual desenhado e autoral. São papéis diferentes dentro do mesmo sistema visual.

D

Em inglês

Images

Pronúncia

n/a

Também chamado de

imagens, fotos, gráficos

Origem

n/a

Fonte

Saiba mais

web.dev, guia de otimização de imagens