As imagens de varredura podem ser consideradas um conjunto de instruções pixel a pixel para renderizar uma grade bidimensional. Os formatos de imagem rasterizados comuns incluem GIF (.gif), JPEG (.jpg), PNG (.png) e WebP (.webp). A maneira como cada formato de imagem compacta e codifica essas instruções é diferente, resultando em uma grande variação entre os tamanhos de arquivo: uma imagem fotográfica codificada como JPEG pode ter apenas algumas centenas de kilobytes, enquanto a mesma imagem codificada como PNG pode ter vários megabytes, sem qualquer diferença perceptível na qualidade para o usuário final.
Uma origem de imagem de rasterização dimensionada além de suas dimensões inerentes aparecerá distorcida, quadriculada ou desfocada:
Para obras de arte com níveis reais de detalhes, imagens rasterizadas são a ferramenta ideal para isso.
Assim como a escolha entre imagens rasterizadas e vetoriais, a escolha do tipo adequado de imagem rasterizada depende do caso de uso. Quando dividimos imagens rasterizadas em codificações, estamos falando sobre os métodos usados para descrever o conteúdo e os métodos de compactação (ou a falta deles) que estamos aplicando. Lembre-se de que um servidor não envia uma imagem para um navegador, mas um stream de bytes descrevendo a grade de pixels que compõe essa imagem para a recomposição pelo cliente.
Então, para visualizar melhor o processo de codificação de uma grade de pixels como dados de bytestream, quero que você imagine que está agindo como o navegador da web. Você tem uma folha de papel milímetro e uma embalagem específica de giz de cera da marca. Eu, como servidor da Web, tenho exatamente as mesmas coisas, mas já usei meus lápis de cera para preencher o papel milimetrado com uma imagem de origem. Se eu enviasse uma mensagem de texto simples, não seria possível enviar a imagem em si, mas eu poderia transmitir informações sobre uma fonte de imagem em um idioma que ambos entendemos usando nosso padrão compartilhado para a grade e cores de “pixel”:
Comece no canto superior esquerdo. A primeira linha, a coluna um é azul. A primeira linha, a coluna dois é azul. A primeira linha, a coluna três é azul. A linha um, a coluna quatro é vermelha.
Usando essas informações textuais, você poderia recriar perfeitamente a imagem que tenho na minha folha de papel milimetrado.
As diferenças nos formatos de imagem e no modo como são codificados como dados podem ser consideradas vagamente como essas informações foram formatadas. Por exemplo, as informações que enviei podem ser expressas com facilidade como:
Comece no canto superior esquerdo. Linha um, as colunas de um a três são azuis. A linha um, a coluna quatro é vermelha.
Qualquer uma dessas descrições resultará na mesma imagem, mas a segunda consegue descrever a mesma imagem com menos caracteres. Esse é um método sem perdas de compressão de dados de imagem: todas as mesmas informações e, portanto, sem redução de fidelidade visual, mas menos bytes transferidos da transmissão, do servidor para o mecanismo de renderização. Essa é a linguagem simples equivalente à "codificação de comprimento de execução" para dados de imagem, em que os dados são codificados como o valor a ser repetido e uma contagem, em vez de repetir o valor total várias vezes.
A compactação inversa, com perda, pode parecer insatisfatória. Por que você iria querer que suas imagens tivessem uma aparência pior? No entanto, isso não é estritamente o caso, e vale a pena ter em mente que nossos olhos também não têm fidelidade perfeita. Escolher o formato e as configurações corretos de compactação de imagens é um exercício para encontrar o equilíbrio entre o nível de detalhes visuais que podemos perceber e a quantidade de dados enviados ao navegador. Ambos os fatores são determinados pelo conteúdo da nossa imagem de origem.
Os formatos de imagem rasterizada são os que você provavelmente já conhece como desenvolvedor: GIF, JPEG, PNG, WebP e muito mais. Você vai aprender sobre os recursos de cada um nos próximos módulos.