Ilustrações ao invés de imagens

Com o aumento do suporte dos browsers às ilustrações, o monopólio das imagens chapadas em todas as aplicações será um pouquinho abalado. A tendência é que seja cada vez mais comum a aplicação de ilustrações em logomarcas e outros tipos de gráficos com capacidade de escalar com perfeição, desde telas de pequenos dispositivos até telões Full HD 1080p ou ainda maiores.

O padrão aberto para esse formato de arquivo é o SVG (Scalable Vector Graphics ou Gráficos Vetoriais Escaláveis). Dos browsers atualmente em uso, Internet Explorer 8 (e anteriores) e Android 2.3 (e anteriores, incluindo meu telefone) não dão suporte. Eu sempre uso o excelente site caniuse.com para ver como está a adoção de uma tecnologia pelos principais navegadores antes de me aventurar: http://caniuse.com/#feat=svg

Vejam dois exemplos com a nova logomarca da Microsoft que funcionam perfeitamente em todos os browsers modernos.

http://cdn2.crucial.com.br/images/brands/microsoft.jpg (3.990 bytes)
http://cdn2.crucial.com.br/images/brands/microsoft.svg (6.860 bytes)

Notem que o primeiro arquivo contém uma imagem no formato JPEG. É pequena, de apenas 180x40 pixels e a informação está bem compactada, inclusive com perda de qualidade que pode ser notada ao escalar a imagem para maior.

O segundo arquivo é 70% maior, mas com duas vantagens fundamentais:

  1. não importa o tamanho em que venhamos a utilizá-lo, a qualidade será mantida;
  2. ele é nada mais que um XML com comandos para o browser dentro dele. Sendo basicamente um arquivo texto, compacta muito bem para transmissão rápida. (compactado em um arquivo .ZIP ele fica com 2.789 bytes).

Como desvantagem: (e ao mesmo tempo mais uma força sob outros pontos de vista) o arquivo SVG está num formato totalmente aberto. Note que mesmo que a imagem seja open source , podendo ser facilmente reutilizada ou modificada, não quer dizer que o detentor dos direitos autorais sobre ela permitiu que isso fosse feito indiscriminadamente.

O MIME TYPE que o servidor está enviando no caso é image/svg+xml, embora já tenhamos visto o Google tratar como application/svg+xml. Vejam como estas imagens escalam em seu browser:

Imagem JPEG de baixa resolução:

Ilustração SVG:

blog comments powered by Disqus