O que são arquivos SVG e WebP?

#Informática Básica

Olá, dev!

Este artigo trata de dois formatos de arquivos de imagens (SVG e WebP) que a gente está acostumado a ver na Internet, mas seu uso ainda não é muito popular, portanto, vamos aprender mais sobre eles.

O que você vai ler aqui:

1. Introdução

2. Arquivos de Imagem

3. O arquivo SVG

4. O arquivo WebP

5. Core Web Vitals

6. Considerações finais

7. Fontes de consulta

1 – Introdução

Este artigo trata de dois arquivos de imagem que a gente está começando a ver mais na Internet, SVG e WebP. O uso deles ainda não está muito popularizado, mas eles começam a aparecer aqui e acolá.

Tem sido comum a gente ver umas figurinhas animadas e, ao baixá-las, descobrir que elas não são abertas por nenhum programa de edição de imagens. Pode até ser que você desista de usá-las como o arquivo baixado e dê um print na tela para recortá-las e salvá-las em um formato mais popular, como JPG ou PNG.

O mesmo acontece com outro tipo de figuras, no formato SVG, que também não podem ser visualizadas nem editadas por programas simples de edição de imagens. Programas mais sofisticados já permitem a visualização e edição destes tipos de imagens.

Estes formatos foram criados com o objetivo de tornar as imagens com tamanho menor, embora a mesma qualidade ou melhor, fazendo com que as páginas dos sites carregassem mais rapidamente.

Com o tempo, suas vantagens deverão ser verificadas e o seu uso deverá ser mais popularizado.

Este artigo tratará dos formatos de arquivos de imagem SVG e WebP, dando uma visão geral deles, de sua aplicação e apontando vantagens para seu uso e troca em relação a formatos mais comuns na Internet, como JPG, GIF e PNG.

2 – Arquivos de Imagem

Os arquivos de imagem existem desde antes da Internet, quando a gente usava programas de edição eletrônica (como o Wordstar, Word e Worperfect) ou programas de desenho (PaintBrush, AutoCAD, CorelDraw e Corel PhotoPaint).

Em geral, o formato de um arquivo de imagem é binário e existem vários formatos diferentes, cada um com uma estrutura interna diferente, usando diferentes técnicas para armazenar os dados das imagens.

Alguns formatos podem ser proprietários, sendo criados por uma empresa que registra sua patente e pode até cobrar pelo seu uso. É o caso do formato GIF, por exemplo, que foi criado pela Compuserve, comprada depois pela America On Line (AOL).

Segundo [1], na década de 90, a Compuserve ameaçou cobrar pelo uso de imagens GIF, usadas em quase todo site da web na época e foi uma confusão geral! No entanto, a AOL deixou o prazo da patente expirar e hoje ela é de domínio público.

Os formatos de imagem podem ser classificados nos tipos “raster” (ou “bitmap”) e vetorial. O formato raster armazena a cor de cada pixel mostrado na tela, enquanto o formato vetorial armazena os dados das primitivas gráficas que são desenhadas na tela.

Por exemplo, se a tela possui 800 x 600 pixels, o formato raster precisa armazenar a informação de cor para cada um dos 240.000 pixels. Já o formato vetorial, se a imagem da tela é um quadrado preenchido com uma cor, bastará armazenar os pontos dos vértices do quadrado e cor usada para pintá-lo.

Ao visualizar o arquivo vetorial na tela, o quadrado será desenhado dinamicamente, com base nos dados armazenados.

As diferenças básicas entre os dois tipos de arquivos são o tamanho do arquivo e a qualidade da imagem quando ela é ampliada (zoom in).

Os arquivos vetoriais ocupam muito menos espaço que os arquivos raster e uma imagem vetorial não perde qualidade quando ela é aumentada, diferentemente de uma imagem raster, que mostra efeitos de aliasing, ou serrilhado (escadinha).

Os arquivos raster são mais apropriados para armazenar imagens de qualidade fotográfica enquanto os vetoriais são mais usados quando é preciso ampliar a imagem, como em posters, outdoors ou projetos de engenharia, ou quando é mais adequado usar arquivos muito pequenos, como na web.

A figura a seguir mostra uma ampliação de uma imagem raster (em cima) e a ampliação da mesma figura (em baixo), em uma imagem vetorial.

Veja como a ampliação da imagem do tipo raster cria um efeito visual de serrilhado. Isso se deve ao efeito de ampliação de cada unidade visível da imagem (pixel), que aparece como um quadrado pintado com uma cor única.

Em geral, todos os formatos de arquivos de imagens raster usam algum tipo de compressão de dados, o que torna seu tamanho menor do que se ele armazenasse individualmente as cores de todos os pixels da tela.

Por exemplo, uma tela de resolução 800x600 possui 480.000 pixels, logo, uma imagem raster precisaria armazenar a cor de cada um destes pixels.

No entanto, se uma linha completa apresentar pixels com uma mesma cor (por exemplo, cor = 45 de um palete de 256 cores), ao invés de se armazenar 600 valores de 45, seria armazenado apenas o número 600, seguido do número 45, representando uma série de 600 pixels com o mesmo valor, 45.

Veja as figuras abaixo, para uma linha de 12 pixels, com todos os pixels de uma mesma cor (em cima) e com várias cores diferentes (em baixo):

Existem dois tipos de compressão de imagens:

· sem perdas (lossless)– é possível recuperar a imagem original exatamente como era antes da compressão;

· com perdas (lossy) – NÃO é possível recuperar a imagem original exatamente como era antes da compressão, mas essa perda de qualidade não é perceptível ao olho humano, podendo ser controlada nos algoritmos de compressão.

Os formatos PNG usam os formatos sem perda, enquanto os formatos JPG, TIFF e GIF usam os formatos com perda, pequena e controlada.

Os formatos de arquivos de imagens mais conhecidos são:

· Raster – PCX, BMP, GIF, JPEG, PNG, TIFF, RAW e WEBP;

· Vetorial – WMF, CDR, DXF e SVG.

Quando a Compuserve ameaçou cobrar pelo uso do formato GIF, rapidamente foi criado um novo formato de arquivo de imagens (PNG), com as mesmas características do GIF, mas de uso livre.

O formato RAW é usado pelos fabricantes de câmeras digitais, mas cada um deles tem uma estrutura interna diferente, e proprietária. Antes da imagem ser gravada em formato JPEG pela câmera, com possível perda de qualidade, ela a armazena em um formato RAW, sem nenhuma perda de qualidade.

Os formatos do tipo BMP não têm perda de qualidade, mas eles geram arquivos muito grandes, como também o formato TIFF.

Os formatos SVG e WebP serão tratados a seguir.

**3 – O arquivo SVG (Scalable Vector Graphics)**

Segundo [3], a arquitetura do SVG é semelhante à do Flash, da Adobe, só que ele é de padrão aberto. Ele foi inspirado no padrão PGML, também da Adobe.

Atualmente, o SVG é suportado por todos os navegadores, seja por meio de requisitos nativos ou de bibliotecas Javascript.

Um arquivo SVG pode ser criado e editado por qualquer editor de texto, mas ele já é suportado por vários softwares, como:

Adobe Illustrator;
Google Docs;
GIMP;
Xara;
Corel Draw;
Microsoft Visio;
Inkscape;
SVG-edit;
DrawBerry;
Scribus;
PhotoScape X.

As suítes OpenOffice, LibreOffice e Microsoft Office já permitem a inserção de arquivos do tipo SVG.

Segundo [2], o formato SVG foi criado com o objetivo de ser um arquivo vetorial leve, para ser usado em figuras das páginas web e hoje é padronizado pelo W3C.

Um arquivo de tamanho pequeno é carregado na web mais rapidamente que arquivos grandes, que podem demorar muito para serem carregados, para uma mesma velocidade de conexão. Assim, o SVG permite otimizar o desempenho de um site.

Por ser um arquivo vetorial, uma imagem SVG não perde qualidade em operações de ampliação (zoom in), como as imagens no formato raster. Além disso, ele também permite associar imagens raster ao formato. O formato SVG suporta animações e transparências, como os formatos GIF e PNG.

Em geral, os formatos dos arquivos raster apresentam uma estrutura interna binária, com as cores dos pixels da imagem, processados por alguma técnica de compressão e cabeçalhos descritivos da imagem ou do processo de compressão.

Já o arquivo SVG é um documento textual, do tipo XML, específico para representar imagens vetoriais, usando uma tag <svg>. Veja a seguir um exemplo de um código SVG que representa uma imagem de um círculo. Este código ser salvo em um arquivo texto (com extensão .svg),por exemplo, circulo.svg, e ser usado posteriormente em um código HTML:

Veja que ele é um arquivo XML, com tags específicas para SVG:

· abertura e fechamento (<svg> e </svg>);

· tamanho da figura (<width> e <height>);

· forma da primitiva (<circle..../>) e de seus atributos

--------- centro (cx, cy);

--------- raio (r);

--------- cor do contorno (stroke);

--------- largura do contormo (stroke-width);

--------- cor de preenchimento (fill).

A imagem gerada por este código é mostrada abaixo:

Segundo [4], uma figura SVG pode ser incorporada a um arquivo HTML de diversas formas. Por exemplo, o arquivo seguinte mostra a chamada dessa mesma imagem em um código HTML, ainda usando a tag <svg>:

Outra forma de chamada desta imagem em um código HTML é como um atributo da tag de imagens (<img>), indicando o arquivo da figura SVG (por exemplo, circulo.svg) na chamada:

Um arquivo SVG é facilmente editável em qualquer editor de texto, como o notepad, por exemplo, não sendo preciso usar um aplicativo de processamento de imagens para abri-lo.

Para imagens compostas por primitivas geométricas, o tamanho do arquivo é bem pequeno, mas para imagens fotográficas (paisagens, pessoas e animais), o seu tamanho pode aumentar muito e seu uso não é indicado.

As principais primitivas geométricas e os efeitos oferecidos neste formato são:

· Retângulo, círculo, elipse, reta, poligonal, polígono e caminho (path);

· Curvas de várias ordens (quadráticas, cúbicas);

· Textos, com seus atributos de posição, direção, fonte, etc.;

· Filtros, de cor, sombreamento, ruído, etc.;

· Padrões, geométricos ou não, repetidos matricialmente na imagem;

· Gradiente de cores, linear, radial, etc.;

· Resposta a eventos interativos (teclado, mouse, DOM - Document Object Model), com funções Javascript;

· Links para outras páginas;

· Efeitos diversos de animação (usando CSS ou funções e bibliotecas Javascript);

A facilidade de desenhar primitivas gráficas simples e de animá-las, bem como de realizar transições de cores e de responder a eventos do usuário faz este tipo de imagem muito adequado para o desenvolvimento de jogos simples e de tamanho bem reduzido. E tudo isso em um formato de arquivo textual.

O formato de imagens SVG também é muito usado para a representação de mapas por diversos programas de geoprocessamento.

As principais características das imagens no formato SVG, que podem ser consideradas vantagens sobre imagens raster (GIF, JPG, PNG) são:

· Podem ser criadas e editadas por qualquer editor de textos;

· Podem ser pesquisadas, indexadas, codificadas e compactadas;

· São altamente escaláveis, mantendo a qualidade quando redimensionadas, tanto para ampliação quanto para redução;

· Permitem impressão de alta qualidade em qualquer resolução;

· SVG é XML puro;

· SVG é um padrão aberto, recomendado pelo W3C;

· SVG é integrado com outros padrões do W3C (DOM, XSL);

· permitem maior responsividade, pois sua qualidade é mantida em qualquer display (desktop, notebooks, tablets ou smartphones);

· maior acessibilidade, pois os arquivos SVG são legíveis por leitores de tela, mecanismos de pesquisa e outros dispositivos;

· SVG tem seu próprio DOM no navegador, podendo interagir com o CSS e JavaScript;

· SVG também pode ser chamado no DOM da página do navegador.

Algumas aplicações destacam ainda mais a importância do uso desse formato de arquivo, por exemplo, para desenhar:

· Logotipos e ícones;

· Gráficos e infográficos;

· Aplicações gráficas de análise e visualização de dados, como mapas interativos ou gráficos de dados;

· Efeitos visuais, com transições e transformações;

· Animações de elementos gráficos;

· Desenhos e ilustrações tradicionais, com formas simples.

A animação de um elemento SVG pode ser realizada por meio de CSS, da Web Animations (uma API em JavaScript), ou a partir da tag ‘<animate>’ no próprio código do SVG.

Além disso, há uma série de bibliotecas JavaScript que foram criadas para acelerar os fluxos de trabalho SVG e podem ser usadas, como D3Js, Snap.svg, Greensock, Bonsai, Velocity.js e Two.js.

3.1 – Exemplos de imagens SVG

O formato vetorial SVG permite a criação de imagens baseadas apenas em primitivas geométricas simples, como os exemplos abaixo:

Ele também pode ser usado para criar figuras com efeitos decorativos ou de iluminação, representando brilho, por exemplo:

Outros tipos de imagens também podem ser criados com SVG (neste caso, textos, curvas, sombreamento e até um mapa interativo):

Não só imagens simples podem ser criadas com SVG, mas Imagens realistas também:

4 – O arquivo WebP

O Google sempre incentivou o uso de técnicas que tornassem a web mais rápida, seja por meio de métodos eficientes ou do uso de arquivos menores.

Segundo [5], o WebP é um formato de arquivo de imagens raster desenvolvido pelo Google, que teve sua primeira versão estável lançada em 2018 e tem extensão .webp. Ele foi pensado para substituir os formatos de arquivo JPEG, PNG e GIF.

O WebP suporta compactação com perdas e sem perdas, bem como animação e transparência. Ele oferece compactação superior aos formatos tradicionais e permite criar imagens mais detalhadas e menores, tornando a web mais rápida.

O grau de compactação com perdas é ajustável, podendo o usuário escolher o compromisso entre o tamanho do arquivo e a qualidade da imagem resultante.

Por exemplo, comparando com o formato PNG, as imagens sem perda do WebP são 26% menores, comparando com o JPEG, as imagens com perda do WebP têm uma redução entre 25% a 34%, para um mesmo índice de qualidade equivalente.

Além disso, em relação à transparência (ou canal alfa), o WebP sem perda tem apenas 22% de bytes adicionais e, nos casos em que a compactação RGB com perda é aceitável, o WebP com perdas geralmente oferece arquivos três vezes menores que o PNG.

Finalmente, perda, sem perda e transparência são compatíveis com imagens WebP animadas, que podem fornecer tamanhos reduzidos em comparação com GIF e APNG.

Entrando nos detalhes técnicos do formato Webp, a compactação com perda usa programação preditiva para codificar uma imagem, o mesmo método usado pelo codec de vídeo VP8 para compactar quadros-chave (keyframes) nos vídeos. Este tipo de codificação aproveita os valores em blocos vizinhos de pixels para prever os valores em um bloco, codificando apenas a diferença entre eles.

Já a compactação sem perda usa fragmentos de imagem já vistos para reconstruir exatamente novos pixels, mas, caso nenhuma correspondência relevante seja encontrada, ele também pode usar uma paleta local.

O WebP é nativamente compatível com os principais navegadores atuais, como o Chrome, Safari, Firefox, Edge, Opera, com muitas ferramentas e bibliotecas de software, bem como várias ferramentas de edição de imagens.

Segundo [6], a velocidade de carregamento é um dos principais fatores da otimização de sites. Inclusive, o tempo perdido ao acessar uma página é um critério de avaliação essencial tanto para os visitantes quanto para os buscadores, como o Google.

Assim, códigos mais curtos e compactados ou o uso de mecanismos de cache também fazem parte das abordagens de solução testadas para uma presença online rápida.

Por isso, o uso de imagens compactadas também é muito válido. Como elementos de design e plano de fundo, elas são incorporadas em grande quantidade em muitos projetos, e sua influência no tempo de carregamento é frequentemente subestimada.

No dia 08/11/2023, de acordo com um artigo do TabNews [7], o Google afirmou que 40% dos sites na web já cumprem com os critérios que avaliam a experiência de carregamento, interatividade e estabilidade visual de uma página.

Além disso, 78% dos desenvolvedores que otimizaram suas páginas para o Core Web Vitals relatam melhorias notáveis na experiência do usuário.

Resumindo, o Google afirma que o “Core Web Vitals” já economizou mais de 10.000 anos em tempo de espera no carregamento de páginas por meio do Chrome em 2023

E o que é esse tal de Core Web Vitals? Aguarde um pouco para saber.

4.1 – Exemplos de imagens WebP

5 - Core Web Vitals

Segundo [8], o Core Web Vitals é mais uma tentativa do Google para melhorar a experiência de busca. A empresa incorporou métricas que avaliam a rapidez e a estabilidade de uma página em resposta às interações dos visitantes.

Core Web Vitals é um conjunto de sinais essenciais para uma boa experiência do usuário (UX), que o Google utiliza em seu algoritmo para avaliar a usabilidade de uma página.

Resumindo, é uma lista das “principais métricas da web”, que conta com os seguintes indicadores:

· Largest Contentful Paint (LCP) - mede o tempo em que a página carrega completamente seu conteúdo;

· First Input Delay (FID) - mede o tempo possível de resposta à primeira interação do usuário com a página, como um clique ou um controle de JavaScript.

· Cumulative Layout Shift (CLS) - mede a frequência e a gravidade das mudanças inesperadas de layout de uma página, enquanto ela carrega e o usuário interage com ela.

No início de 2020, o Google anunciou o desenvolvimento dessas métricas, que tinham como objetivo unificar as orientações de medidas de qualidade de uma página, para não ter que lidar com várias métricas e ferramentas de avaliação. Além disso, o Google também avisou que o Core Web Vitals seria incorporado ao algoritmo do buscador.

O aviso foi uma orientação aos proprietários de sites para a criação de melhores experiências para os visitantes.

Além destas métricas principais de avaliação da experiência que uma página oferece, o Google usa outros fatores para o ranking, que já faziam parte do algoritmo:

Compatibilidade com dispositivos móveis;
Navegação segura;
Uso do protocolo HTTPS;
Intersticiais não intrusivos (“pop-ups”).

Estas métricas são combinadas com outras centenas de fatores que o Google usa na classificação dos resultados da busca.

Melhorar a velocidade e a estabilidade das páginas significa criar jornadas mais tranquilas, rápidas e sem interrupções para os usuários

Para verificar estas métricas principais para um site, você pode usar:

· O Google Search Console, ferramenta de estratégia de SEO;

· A extensão do Core Web Vitals para o Chrome.

· O site PageSpeed Insights;

Se você testou o seu site com alguma ferramenta e ele não apresentou bom desempenho no Core Web Vitals, é sinal que ele precisa passar por ajustes.

A figura a seguir mostra o desempenho da página inicial da DIO (dio.me) no PageSpeed Insights (spoiler – ela foi aprovada nas 3 métricas!):

6 – Considerações finais

A gente está muito acostumado a ver imagens nas páginas web com os formatos JPG, PNG e GIF. Nos últimos tempos, estão aparecendo dois novos formatos de imagens na web que a gente não consegue abrir nos editores de imagens, apenas visualizar dentro de navegadores.

Estes formatos são o SVG e o WebP. Eles foram criados com o objetivo de substituir os formatos tradicionais de imagens usados na web por outros que geram imagens com as mesmas características daqueles, usam técnicas mais atuais e avançadas e resultam em arquivos de menor tamanho, que carregam mais rápido na web.

O formato SVG é um formato vetorial, criado e tornado padrão recomendado pelo W3C. Ele tem como principal característica a manutenção da qualidade da imagem em operações de ampliação, em qualquer intensidade. Outra vantagem é que ele não é um arquivo de formato binário, com complexas estruturas internas de compactação de imagens, mas um arquivo texto, no padrão XML, editável por qualquer editor de texto simples.

Já o formato WebP é um formato raster, criado pelo Google, com o objetivo de substituir outros formatos raster mais antigos, como o JPG, GIF e PNG.

O Google está sempre incentivando e criando técnicas para reduzir o tempo de carga de páginas web, inclusive ele criou um conjunto de métricas, chamado Core Web Vitals, que tentam padronizar a avaliação da usabilidade de uma página web, tentando uniformizar várias ferramentas que existem para isso.

Quem já usou programas de edição de imagens vetoriais, como o Coreldraw, sabe da diferença de se trabalhar com arquivos vetoriais e da qualidade destas imagens.

Resumindo, o verdadeiro potencial dos formatos de imagem SVG ainda não foi totalmente usado e muito mais ainda está por vir! Já o formato WebP representa mais uma diminuição no tamanho dos formatos de imagens raster, sem perda de qualidade, em um formato de código aberto, não proprietário.