WDD 131: Fundamentos da Web Dinâmica

S03 – Atividade de Aprendizagem: Formatos de Arquivos de Imagem

Visão Geral

Você trabalhou com vários formatos de imagem, sendo que alguns deles são mais adequados para a web. O design de imagem responsivo tem como finalidade reduzir o tamanho das páginas e oferecer recursos otimizados para diferentes tamanhos de tela. Nesta atividade, você aprenderá sobre os formatos de imagem SVG (Scalar Vector Graphic) e WebP, que oferecem melhor compactação para carregamentos de página mais rápidos.

Preparação

• Revise: Vídeo ▶️ Formatos de Imagem na Web
• Referência: 📑 Formato de imagem WebP – developers.google.com

  Alguns termos que você talvez ainda não conheça incluem:

  • Compressão Sem Perdas (Lossless Compression) – Compressão de arquivos que mantém os dados originais usando algoritmos sofisticados que substituem a redundância.
  • Compressão com Perdas (Lossy Compression) – Compressão de arquivos que usa aproximações e dados parciais para representar a fonte de mídia original.
  • Transparência (Transparency) – Propriedade da imagem que representa a quantidade de cor de fundo visível através da imagem.
• Referência: 📑 13 melhores formatos de imagem e quando usá-los – Hostinger

  Observe o resumo dos formatos de arquivo SVG e WebP apresentados na tabela.

Instruções da Atividade

webp

1. No seu navegador, navegue até esta imagem grande (~3900 X 2633): Paisagem (pexels.com).
2. Clique no botão Free Download (Download Grátis) no canto superior direito da tela.
   • Baixe a imagem padrão, no tamanho original, para sua máquina local.
   • Renomeie o arquivo como "paisagem.jpg".
   Qual é o tamanho do arquivo em termos de tamanho de memória?

   2,87 mB ou 2868 kB

3. No seu navegador, vá até a aplicação online gratuita de conversão de arquivos JPG em WebP no site cloudconvert.com.
4. Na aplicação, selecione o arquivo de imagem paisagem.jpg que você acabou de baixar.
5. Salve o arquivo com a extensão .webp.
   Qual é o tamanho desse arquivo WebP em termos de tamanho de memória?

   – cerca de 1,6 MB ou uma redução de cerca de 40%, apenas alterando o formato do arquivo e nada mais

   Que outras medidas poderíamos tomar para reduzir ainda mais o tamanho do arquivo de imagem para algo abaixo de 75 KB?

   – A imagem pode ser cortada para um tamanho que seja efetivamente usado na página/site.
   – A imagem pode ser redimensionada para o tamanho máximo que é necessário no site em qualquer visualização.
   – A qualidade da imagem pode ser reduzida.

6. Use as técnicas de otimização fornecidas na etapa anterior ao arquivo paisagem.webp usando um programa de edição de imagens de sua escolha. A imagem resultante não deve ter mais de 87 KB.

SVG

Gráficos vetoriais dimensionáveis são representados como pontos em uma grade. Você pode abrir um arquivo SVG em um editor de texto e alterar os valores.

1. Baixe este arquivo svg em seu computador.
   Qual é o tamanho desse arquivo SVG em termos de tamanho de memória?

   Com apenas 0,433 kB (quilobytes), o arquivo é bem pequeno (menos de 1 kB).

2. Abra-o em um navegador da web. Deveria ficar assim. Observe como a imagem permanece nítida e clara. Isso ocorre porque é uma imagem vetorial, e não uma imagem bitmap.
3. Agora abra o arquivo arrow.svg no seu editor de texto (VS Code).
   Qual é a aparência de um arquivo SVG quando aberto em um editor de texto?

   

4. Observe o código.
   Quais três figuras são referenciadas para criar este ícone?

   círculo, polígono e linha

   Qual é a finalidade do atributo viewBox?

   Ele define o sistema de coordenadas para a caixa de visualização SVG. Os dois primeiros valores são as coordenadas x e y do canto superior esquerdo da caixa de visualização. Os dois últimos valores são a largura e a altura da caixa de visualização.

   A largura e altura originais deste gráfico são 24 pixels por 24 pixels. viewBox="0 0 24 24"

   Qual é a finalidade do atributo fill?

   Ele define a cor usada para preencher a figura. O valor fill="none" significa que a figura não está preenchida.

   Qual é a finalidade do atributo stroke?

   Ele define a cor usada para as linhas da figura. O valor stroke="#555" é uma cor cinza.

   Qual é a finalidade do atributo stroke-width?

   Ele define a espessura das linhas usadas para desenhar a figura. O valor stroke-width="2" é 2 pixels.

   Qual é a finalidade do atributo stroke-linecap?

   Ele define o formato das extremidades das linhas. O valor stroke-linecap="round" significa que as extremidades das linhas são arredondadas.

5. Tente alterar a cor da linha para o valor hexadecimal vermelho.
   Salve o arquivo e abra-o novamente em um navegador da web. A cor mudou?

Bibliotecas de Ícones

Frameworks CSS gratuitos e de código aberto, como Bootstrap - (conteúdo em inglês), e bibliotecas de ícones, como Font Awesome - (conteúdo em inglês) e iconfinder.com - (conteúdo em inglês), facilitam o uso de ícones SVG em seus projetos.

Os SVGs podem ser usados em seu HTML de várias maneiras diferentes, inclusive baixando e usando a imagem externa, usando um sprite, incorporando o código SVG e com nomes de classe suportados por uma CDN (Content Delivery Network) sempre que conjuntos maiores de ícones forem necessários.

O exemplo a seguir usa Bootstrap para baixar um arquivo SVG do Facebook e adicioná-lo a um projeto. Este método é mais eficiente, pois apenas os dados vetoriais necessários para o ícone são carregados, resultando em um tamanho de arquivo consideravelmente menor do que usar toda a estrutura ou biblioteca.

1. Abra a biblioteca de ícones do Bootstraps - (conteúdo em inglês) e procure pelo ícone do Facebook.

   Estes são apenas exemplos da mesma busca por SVGs gratuitos usando:
   — IconFinder
   — Font Awesome

2. Selecione o ícone do Facebook e clique em Download SVG (Baixar SVG).

   

3. Este SVG leve, com menos de 500 bytes (0,5 KB), pode ser usado diretamente usando o atributo src de uma tag img, permitindo gráficos vetoriais dimensionáveis em qualquer largura desejada.

   <img src="imagens/facebook.svg" alt="Ícone do Facebook">
           

4. Quando comparamos um ícone do Bootstrap ao Font Awesome com um arquivo SVG, há uma economia notável no tamanho do arquivo ao usar SVG.