WDD 130: Fundamentos da Web

S01 Atividade de Aprendizagem: Trabalho com Imagens da Web

Visão Geral

A maioria dos sites contém não apenas palavras, mas também imagens. Alguns formatos de imagem são mais adequados para a web do que outros. Esta atividade apresenta o uso de imagens para a web e como otimizá-las para que usem menos memória, criando páginas com tamanhos menores, o que diminui o tempo geral de download.

Preparação

Tipos de Imagem

O vídeo a seguir apresenta os tipos de imagens populares usados na web.

Conforme descrito no vídeo, os tipos mais comuns de imagens para a web são:

• JPEG/JPG: Normalmente usado para fotografias e imagens complexas. Usa uma compactação que perde algumas informações, mas pode reduzir bastante o tamanho do arquivo.
• PNG: Normalmente usado para gráficos, logotipos e imagens que exigem fundo transparente. Usa compressão que não perde informações e é compatível com transparência alfa.
• GIF: Normalmente usado para pequenas animações e elementos gráficos simples. Limitado a 256 cores, mas é compatível com transparência e animações básicas.
• WEBP: Um formato mais moderno que oferece melhor compressão do que JPG e PNG, além de ser compatível com animação e transparência. Pode ser usado como uma alternativa ao JPG e ao PNG, mas não é tão popular atualmente.
• SVG: Normalmente usado para logotipos, ícones e textos que precisam ser dimensionados para qualquer tamanho.

Incluindo Imagens em Uma Página Web

Depois de ter a imagem que você gostaria de incluir na sua página, use a tag de imagem da seguinte maneira:

<img src="templo.jpg" alt="Uma foto do templo.">
<img src="nosso-processo.png" alt="Gráfico descrevendo o processo da empresa">
<img src="logo.svg" alt="Logotipo da empresa">

Observe que cada um desses exemplos usa um tipo diferente de formato de imagem. Você não precisa fazer nada diferente no html para usá-los. Basta incluir o nome do arquivo.

Além disso, lembre-se de que o texto alt é muito importante por vários motivos, como incluir uma descrição da imagem caso ela não carregue imediatamente, fornecer informações para robôs que podem rastrear sua página, por exemplo, para otimização de mecanismos de busca, bem como para usuários que podem precisar de leitores de tela para acessar seu conteúdo.

Requisitos de Conteúdo para Texto Alternativo

É obrigatório fornecer texto alternativo significativo e descritivo para todas as imagens em todos os cursos WDD. O padrão é que cada imagem tenha pelo menos uma descrição relevante com duas (2) palavras. Normalmente, isso significa que você deve evitar usar expressões como "imagem de" ou "foto de" no seu texto alternativo. Em vez disso, apenas descreva o que a imagem está mostrando. Por exemplo, em vez de usar alt="imagem de um pôr do sol", você usaria alt="pôr do sol sobre as montanhas".

A seguir estão exemplos de textos aceitáveis para o atributo alt nesta disciplina para uma imagem do logotipo do Facebook:

<img src="facebook.svg" alt="Siga-nos no Facebook">
<img src="facebook.svg" alt="Logotipo do Facebook">
<img src="facebook.svg" alt="Ícone do Facebook">

Por exemplo, dado este logotipo de rafting,

as opções a seguir são textos aceitáveis para o atributo alt.

Exemplo Descritivo

<img src="images/z-wwr-oars-t.png" alt="Logotipo da empresa Whitewater Rafting com texto dinâmico em respingo de água azul e remos vermelhos">

Exemplo Resumido e Funcional

<img src="images/z-wwr-oars-t.png" alt="Logotipo da Whitewater Rafting">

Otimização de Imagem

É importante garantir que as imagens incluídas na sua página sejam otimizadas para uma boa experiência do usuário. Se você usar imagens muito grandes, a página levará mais tempo para carregar e exigirá que seus usuários gastem mais internet.

O vídeo a seguir mostra como otimizar imagens usando a ferramenta online gratuita Squoosh.app.

O vídeo a seguir mostra como otimizar imagens usando ferramentas integradas do Windows.
▶️ Otimizar Imagens Usando a Aplicação Fotos do Windows

Três Etapas Básicas de Otimização de Imagem

As fotos originais que costumamos usar são grandes em termos de dimensões e tamanho de arquivo. Fotos grandes precisam ser reduzidas e otimizadas para um tamanho que seja realmente necessário em uma página web. O tamanho ideal é determinado pelo design e layout da página. É possível usar software para cortar, reduzir e otimizar as imagens.

Estas são as etapas básicas da otimização de imagem:

1. Corte a imagem original para focar no conteúdo mais importante.
2. Redimensionar a imagem para o tamanho máximo necessário no design da página web.
3. Reduzir a qualidade da imagem para um nível aceitável, reduzindo também o tamanho do arquivo.

Para este curso, todas as imagens devem ser otimizadas para reduzir o peso geral da página (o tamanho do download da página). Neste curso, o padrão é que todas imagens precisam ter menos de 100 kB de tamanho de memória. Se você tiver uma imagem maior que 100 kB, será necessário reduzir o tamanho otimizando-a.

Instruções da Atividade

Para esta atividade, você otimizará uma imagem grande e incluirá a versão menor em uma página web.

Existem muitos programas que podem ser usados para editar e otimizar imagens. Nesta atividade, você usará a aplicação online gratuita Squoosh.app.

Encontre os Arquivos

1. Abra a pasta do repositório do seu curso no VS Code.
2. Navegue até a pasta semana01. Nesta pasta, você verá:
   • imagens.html: O arquivo html onde você incluirá sua imagem.
   • A subpasta imagens: Esta é a pasta que contém a imagem grande e onde você colocará a imagem pequena.
   • imagens/templo-grande.jpeg: Na subpasta de imagens, este é o arquivo grande que precisa ser otimizado.

Otimize a imagem

Existem muitos programas que podem ser usados para editar e otimizar imagens, incluindo aqueles listados em Editing (Edição) neste site de recursos. Nesta atividade, você conhecerá e utilizará uma aplicação online gratuita chamada Squoosh.app.

1. No seu navegador, acesse a aplicação online, Squoosh.app - (conteúdo em inglês).
2. Selecione o botão no meio da página e faça upload o arquivo templo-grande.jpeg do seu computador.
3. No painel Edit à direita, alterne Resize e altere a largura para 800 pixels.
4. Em Compress (Compactar), tente alterar o tipo de arquivo e ajustar a qualidade até que o arquivo tenha menos de 100 KB.
5. Clique no botão de download (canto inferior direito) para salvar a imagem no seu computador. Altere o nome do arquivo para templo-pequeno com qualquer extensão de arquivo que corresponda ao formato selecionado e salve-o novamente na pasta semana01/imagens.

Atualize o arquivo html para incluir sua nova imagem

1. Abra o arquivo imagens.html na pasta semana01.
2. Clique com o botão direito do mouse no arquivo imagens.html e abra-o no Live/Five Server.
3. Observe que a imagem é grande.
4. Atualize a tag img no arquivo html para se referir à sua nova imagem.
5. Visualize a página novamente no seu navegador e observe o quanto a imagem está menor na sua página.

Envio

Para esta atividade de aprendizagem, você ainda não precisa enviar nada. Quando terminar as atividades de aprendizagem restantes desta semana, você precisará voltar ao Canvas para relatar seu progresso.