Por que usar SVG em vez de PNG no placeholder
O placeholder aqui é gerado em SVG, um formato de imagem vetorial descrito em texto (XML), e isso traz vantagens para protótipos. Por ser vetor, a imagem fica nítida em qualquer tamanho, sem borrar ao ampliar, e o arquivo costuma ser minúsculo, já que guarda instruções de desenho em vez de uma grade de pixels. O SVG também pode ser embutido direto no HTML ou no CSS, dispensando um arquivo separado e uma requisição de rede. Para uma imagem de preenchimento simples, com um retângulo colorido e um texto centralizado, o SVG é mais leve e flexível que um PNG.
O que é um data URI
Uma data URI é uma forma de embutir o conteúdo de um arquivo dentro do próprio código, sem apontar para um arquivo externo. Em vez de o atributo src referenciar um arquivo, ele recebe uma string que começa com data:image/svg+xml seguida do desenho inteiro. A vantagem é que a imagem não depende de servidor nem de conexão: ela viaja junto do HTML e aparece na hora, ideal para mockups e e-mails. A desvantagem é que embutir arquivos grandes deixa o HTML pesado, então a técnica combina justamente com placeholders leves e ícones simples, não com fotos.
Placeholder de imagem e o deslocamento de layout
Um placeholder de imagem cumpre para o visual o mesmo papel que o Lorem Ipsum cumpre para o texto: reservar o espaço do conteúdo real enquanto o layout é montado. Definir a largura e a altura corretas desde o início evita que a página pule ou se reorganize quando a foto definitiva entrar, um problema que o Google mede como deslocamento de layout (CLS, Cumulative Layout Shift). Por isso, usar dimensões iguais às da imagem final ajuda a validar o design e a responsividade antes de ter os arquivos prontos, mantendo proporções e quebras de linha fiéis ao resultado.
Como usar esta ferramenta
- Defina a largura, a altura e as cores.
- Opcionalmente, escreva um texto para a imagem.
- Copie a tag pronta e use no seu projeto.
Perguntas Frequentes (FAQ)
- Para que serve uma imagem placeholder?
- Para ocupar o lugar de uma imagem final que ainda não existe, mantendo o layout com as dimensões corretas durante a criação de protótipos e telas.
- A imagem depende de internet?
- Não. O placeholder é um SVG gerado no seu navegador e embutido no próprio código (data URI), então funciona sem depender de nenhum serviço externo.
