Multimédia: imagens e texto alternativo

Módulo 4: Criar conteúdo · Tempo de leitura: 9 minutos

Objetivo de aprendizagem: Depois desta lição, saberá preparar, carregar e descrever imagens corretamente, para que carreguem rapidamente, fiquem nítidas e sejam utilizáveis por todos.

Conceitos-chave: biblioteca multimédia, formatos de imagem, big image threshold (2560 pixels), JPEG, PNG, WebP, AVIF, compressão, srcset, lazy loading, texto alternativo, nome do ficheiro, direitos de autor

O que acontece quando carrega uma fotografia

Carrega uma fotografia do seu telemóvel: 4.000 por 3.000 pixels, 5 MB. O WordPress faz então mais do que imagina:

1. Se a fotografia for mais larga ou mais alta do que 2.560 pixels, o WordPress cria uma versão reduzida (com -scaled no nome) e usa-a como "original". O verdadeiro original também é mantido. Isto chama-se big image threshold e existe desde o WordPress 5.3.
2. Além disso, o WordPress cria uma série de formatos mais pequenos: miniatura (por predefinição 150 x 150 pixels, recortada), médio (300), grande (1024) e formatos extra de 768, 1536 e 2048 pixels de largura. O seu tema e os plugins acrescentam frequentemente os seus próprios formatos.
3. Todas as versões ficam em wp-content/uploads/2026/11/ (ano e mês do carregamento).

Uma única fotografia torna-se assim rapidamente em oito ou mais ficheiros. É por isso que a pasta uploads cresce tão depressa (lição 1.3), e é por isso que importa o que carrega.

Na página, o WordPress coloca na imagem um srcset: uma lista com todos esses formatos. O navegador escolhe sozinho o formato mais pequeno que seja suficientemente nítido para o ecrã. Um telemóvel carrega então o formato de 768 pixels, um ecrã grande o de 1536. Isto só funciona bem se os formatos existirem, ou seja, se carregar através da biblioteca multimédia e não por FTP.

Reduzir e comprimir antecipadamente

Mesmo com esses formatos automáticos, vale a pena reduzir as fotografias antecipadamente:

• Dimensão: uma fotografia que nunca é mostrada com mais de 1.600 pixels de largura no seu site não precisa de ter 4.000 pixels de largura. Reduza-a antecipadamente para cerca de 2.000 pixels no lado maior. Isso poupa espaço de armazenamento, tamanho das cópias de segurança e tempo de carregamento.
• Compressão: um JPEG com qualidade entre 75 e 85 parece quase igual a olho nu a um com qualidade 100, mas é muitas vezes metade do tamanho.
• Metadados: as fotografias de um telemóvel contêm frequentemente a localização GPS onde foram tiradas. Se não quiser que toda a gente saiba onde mora, remova-os antes de carregar. O WordPress remove muitos metadados nos formatos reduzidos, mas o original pode ainda contê-los.

Existem plugins que comprimem imagens ao carregar ou as convertem para um formato mais moderno. É útil, mas verifique se fazem isso no seu próprio servidor ou se enviam as fotografias para um serviço externo (lição 9.3), e se precisa mesmo de um plugin quando também pode fazê-lo antecipadamente.

Que formato

Se o seu servidor não conseguir processar um formato, o WordPress apresenta um erro ao carregar ou não cria formatos mais pequenos. Em Ferramentas > Diagnóstico do site (separador Informação, em Gestão de multimédia) pode ver que formatos o seu servidor suporta.

Lazy loading

Desde o WordPress 5.5, as imagens recebem automaticamente loading="lazy": o navegador só carrega uma imagem quando faz scroll até lá. Isso torna uma página longa com muitas fotografias muito mais rápida. O WordPress deixa deliberadamente a primeira grande imagem no topo da página sem lazy loading e dá-lhe frequentemente prioridade com fetchpriority="high", porque esta deve ficar visível o mais depressa possível. Voltaremos a este assunto na lição 6.3.

Defina também sempre a largura e a altura de uma imagem (o WordPress faz isso automaticamente nas imagens vindas da biblioteca multimédia). Assim, o navegador reserva previamente o espaço e o texto não salta quando a fotografia chega.

Texto alternativo: para quem não vê a imagem

O texto alternativo (alt) descreve o que está representado numa imagem. Os leitores de ecrã lêem-no em voz alta a visitantes cegos e com baixa visão, e aparece quando a imagem não carrega. Os motores de pesquisa usam-no para compreender a imagem.

Um bom texto alternativo descreve o que a imagem comunica neste contexto:

• Mau: IMG_4032.jpg ou foto.
• Mau: loja de bicicletas bicicleta e-bike comprar bicicleta barata (acumular palavras-chave não ajuda ninguém).
• Bom: Mecânico a ajustar os travões de uma e-bike azul na oficina.

Se uma imagem for puramente decorativa (uma linha, um padrão de fundo), deixe o texto alternativo vazio. Assim, um leitor de ecrã salta-a. Vazio é diferente de ausente: uma imagem sem alt faz muitas vezes com que um leitor de ecrã leia o nome do ficheiro em voz alta. Uma imagem que é um link (por exemplo, um logótipo que leva à página inicial) descreve para onde o link leva: Ir para a página inicial da Fietsenwinkel De Spaak.

Na biblioteca multimédia, define o texto alternativo junto da própria imagem, e no editor de blocos no bloco de imagem. Atenção: um texto alternativo que preenche na biblioteca multimédia não é alterado automaticamente nas imagens que já estão em páginas.

Nomes de ficheiros e direitos de autor

• Nome do ficheiro: e-bike-remmen-afstellen.jpg diz mais do que IMG_4032.jpg e surge no endereço da imagem. Letras minúsculas, hífenes, sem espaços.
• Direitos de autor: uma imagem do Google Imagens não é de uso livre. Fotógrafos e bancos de imagens enviam regularmente faturas por utilização sem licença. Use fotografias próprias, fotografias com uma licença clara ou um banco de imagens cujas condições conheça, e guarde a prova da sua licença.

Armazenamento e limpeza

A biblioteca multimédia não se organiza sozinha. Uma imagem que remove de uma página permanece na biblioteca e na pasta uploads, com todos os seus formatos. Num site com anos de conteúdo, isso acumula-se. Faça limpeza de vez em quando, mas com cuidado: uma imagem pode estar a ser usada num local que a biblioteca não vê (numa definição do tema, num widget ou num e-mail). Faça primeiro uma cópia de segurança.

Resumo

• O WordPress cria vários formatos de cada carregamento e reduz fotografias grandes até 2.560 pixels; o navegador escolhe, através do srcset, o formato adequado.
• Reduza e comprima as fotografias antecipadamente e remova os dados de localização.
• Use JPEG ou WebP para fotografias, PNG para logótipos e capturas de ecrã; SVG apenas com um plugin que faça a limpeza.
• O lazy loading acontece automaticamente, exceto para a primeira grande imagem; a largura e a altura evitam que o conteúdo salte.
• Um texto alternativo descreve o que a imagem comunica no contexto; conteúdo puramente decorativo recebe um texto alternativo vazio.

Questionário

Exercício

Exercício A4.4: Imagens na página inicial do seu site. Introduza o endereço do seu site. O programa lê a página inicial e analisa as primeiras 20 imagens: têm um atributo alt (pode estar vazio, mas não em falta), têm largura e altura definidas, e qual é o tamanho de cada ficheiro (através de um pedido HEAD)? As imagens acima de 300 kB são assinaladas. Melhore o que estiver marcado a vermelho na sua biblioteca multimédia ou na página, e verifique novamente.

Leitura adicional

Estes artigos descrevem os passos nos painéis da WebOké; noutros painéis funcionam de forma semelhante.

• Manual DirectAdmin 18.5: Carregamento demasiado grande (erro 413) ou tempo limite excedido
• Não é possível carregar: aumente os valores de upload_max_filesize e max_execution_time
• Ecrã da biblioteca multimédia (wordpress.org, em inglês): https://wordpress.org/documentation/article/media-library-screen/
• Escrever textos alternativos (W3C, em inglês): https://www.w3.org/WAI/tutorials/images/decision-tree/