Ficha 01 · Formatos e otimização · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

Escolher formato
Compreender compressão
Otimizar peso
Adaptar ao ecrã

Parte I · Suportes

Exercício 1 · Destino (10 pts)

Indica a exigência principal de cada suporte:

a) Web. ___

b) UI de uma app. ___

c) Email/newsletter. ___

a) Peso reduzido / rapidez + responsivo. b) Múltiplas densidades (@1x/@2x/@3x) ou vetorial. c) Muito leve, largura fixa, formatos compatíveis com clientes de email.

Exercício 2 · DPI no digital (10 pts)

Um colega diz "tens de pôr a imagem a 300 DPI para ficar nítida no site". Está correto? Justifica.

Não. No digital o que determina a nitidez é a dimensão em pixéis face ao tamanho de exibição (e a densidade do ecrã). O valor de DPI/PPI gravado no ficheiro é ignorado pelos browsers — só importa na impressão. Para um ecrã HiDPI prepara-se a imagem com 2× os pixéis do tamanho exibido; o "300 DPI" é irrelevante.

Parte II · Formatos

Exercício 3 · Formato certo (15 pts)

Indica o formato mais adequado:

a) Fotografia de paisagem para um artigo. ___

b) Logótipo com fundo transparente para sobrepor. ___

c) Ícone simples que deve ser nítido em qualquer tamanho. ___

d) Substituir JPG/PNG por algo ~30% mais leve mantendo qualidade. ___

a) JPEG (ou WebP) — foto com muitos tons. b) PNG-24 (canal alfa) — ou WebP com transparência. c) SVG (vetorial, escala perfeita). d) WebP (ou AVIF) com fallback.

Exercício 4 · Compressão (15 pts)

a) Diferença entre compressão com perdas e sem perdas. (8 pts)

b) Porque é má prática gravar repetidamente o mesmo JPEG várias vezes? (7 pts)

a) Com perdas (lossy) — descarta informação para reduzir o ficheiro (JPEG, WebP lossy); qualidade controlável, irreversível. Sem perdas (lossless) — preserva todos os pixéis (PNG, WebP lossless); ficheiro maior.

b) Cada gravação JPEG recomprime e introduz novos artefactos sobre os anteriores — a degradação acumula (geração após geração). Deve trabalhar-se a partir de um mestre sem perdas e exportar JPEG uma vez.

Parte III · Otimização

Exercício 5 · O erro nº 1 (15 pts)

Um site mostra imagens a 400 px de largura mas serve ficheiros de 4000 px reduzidos por CSS.

a) Qual o problema? (8 pts)

b) Como corrigir? (7 pts)

a) O browser descarrega o ficheiro enorme (vários MB) e só depois o encolhe visualmente — desperdício de banda, página lenta, mau em mobile/dados, pior SEO/Core Web Vitals. O CSS não reduz o peso transferido.

b) Redimensionar a imagem ao tamanho real de exibição (≈400 px, ou 800 px para HiDPI 2×), exportar otimizada, e usar srcset/sizes para servir a versão adequada a cada ecrã.

Exercício 6 · Checklist (15 pts)

Lista 5 passos para otimizar uma fotografia para a web.

Dimensionar ao tamanho real de exibição (×2 se HiDPI).
Escolher formato (JPEG/WebP/AVIF para foto).
Ajustar qualidade (testar 60-85%, perda invisível).
Converter para sRGB e remover metadados (EXIF).
Comprimir (Squoosh/TinyPNG).
Definir width/height + loading="lazy"; srcset se responsivo.

(5 quaisquer.)

Parte IV · Responsivo

Exercício 7 · srcset (20 pts)

Explica para que serve o atributo srcset numa <img> e escreve um exemplo que sirva 3 tamanhos (400, 800, 1600 px).

srcset permite indicar várias versões da imagem em tamanhos diferentes; o browser, com sizes, escolhe a mais adequada ao viewport e densidade do ecrã — assim um telemóvel descarrega a versão pequena (rápido) e um ecrã grande/HiDPI a maior (nítida), sem desperdício.

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="533"
     alt="Descrição"
     loading="lazy">

(<picture> faria o mesmo para escolher formato AVIF/WebP/JPEG.)