crop_original Gerador de Imagens de Espaço Reservado star

Por Que Designers e Programadores Usam Imagens de Espaço Reservado

Muito antes de a fotografia real, as ilustrações ou as fotos de produto de um site estarem prontas, alguém já precisa de ver como a página fica com imagens no lugar. Um layout construído inteiramente com caixas cinzentas vazias ou ícones de imagem em falta é enganador — as margens, as proporções e a forma como o texto envolve uma imagem comportam-se de maneira diferente assim que algo realmente ocupa esse espaço. Uma imagem de espaço reservado resolve isto substituindo temporariamente o recurso definitivo: tem a largura e a altura corretas, ocupa o lugar certo na grelha e permite a um designer ou programador avaliar se o layout funciona, sem que o conteúdo final precise de existir ainda. O conteúdo do espaço reservado em si — a sua cor, a sua etiqueta — é deliberadamente irrelevante; o que importa é que as suas dimensões e proporção correspondam ao que a imagem real virá a ter.

É por isso que os serviços populares de imagens de espaço reservado tradicionalmente funcionam codificando o tamanho diretamente numa URL, por exemplo pedindo uma imagem de 800×600 e recebendo de volta um retângulo cinzento com "800 × 600" impresso sobre ele. Esse tamanho impresso é, por si só, útil: permite que qualquer pessoa que olhe para o protótipo confirme instantaneamente que o espaço da imagem tem a dimensão prevista, sem precisar de inspecionar o HTML. Esta ferramenta segue a mesma convenção — deixe o campo de texto em branco e ela etiqueta automaticamente o retângulo com a sua própria largura e altura, ou introduza texto personalizado para pré-visualizar uma legenda, um nome de marca fictício, ou qualquer outra coisa que deva caber dentro dessa caixa.

Por Que o SVG Pode Ser um Formato de Espaço Reservado Melhor do que o PNG

Um espaço reservado em PNG é uma grelha de píxeis: um retângulo de 800×600 de cor lisa com texto tem, ainda assim, de armazenar informação de cor para todos os 480 000 píxeis, mesmo que a grande maioria seja uma única cor uniforme. Um espaço reservado em SVG, pelo contrário, não é feito de píxeis de todo — é um pequeno bloco de texto que descreve formas: "desenha um retângulo com esta largura e esta altura, preenchido com esta cor, e depois desenha este texto centrado lá dentro." Para um espaço reservado simples de cor lisa com texto, como os que esta ferramenta cria, essa descrição ocupa tipicamente apenas algumas centenas de bytes, muito menos do que o PNG equivalente. O SVG tem uma segunda vantagem que importa ainda mais para espaços reservados usados num layout responsivo: por ser definido por instruções matemáticas de forma, e não por uma grelha fixa de píxeis, pode ser ampliado ou reduzido para qualquer tamanho sem perda de qualidade nem pixelização, enquanto um PNG esticado além da sua resolução nativa fica visivelmente desfocado.

Ambos os formatos são gerados aqui da mesma forma: desenha-se um retângulo preenchido com a cor de fundo escolhida, e o texto da etiqueta é centrado dentro dele tanto na horizontal como na vertical, com o seu tamanho escalado proporcionalmente às dimensões da caixa, para que um espaço reservado pequeno não fique sufocado por texto demasiado grande. A versão PNG é desenhada num elemento canvas do HTML5 e exportada com canvas.toDataURL(); a versão SVG é construída diretamente como uma cadeia XML contendo um elemento <rect> e um elemento <text>, e transferida como ficheiro. Ao contrário dos serviços de espaço reservado que vão buscar uma imagem a uma URL remota — um pedido de rede real sempre que a página carrega —, aqui tudo corre localmente: nenhum pedido sai alguma vez do navegador, por isso não há nada que falhe se esse serviço externo ficar em baixo, nem qualquer limite de tamanho imposto pelo servidor de outra pessoa.