Imagens responsivas

A Silktide carrega as suas páginas num navegador real e compara as dimensões reais de cada imagem com o tamanho a que é apresentada. As imagens que são muito maiores do que parecem no ecrã são assinaladas, juntamente com os dados desperdiçados pela resolução adicional.

Por que isto é importante

Um padrão comum: uma fotografia de 4000 píxeis é carregada e a página apresenta-a com 400 píxeis de largura. Os visitantes descarregam o ficheiro em resolução total — potencialmente megabytes — para ver o que um ficheiro muito mais pequeno apresentaria de forma idêntica. O desperdício é maior nos telemóveis, que têm os ecrãs mais pequenos e, muitas vezes, as ligações mais lentas e dispendiosas. Páginas mais rápidas mantêm mais visitantes e contribuem para a classificação nas pesquisas através das .

Como corrigir

Disponibilize cada imagem em vários tamanhos e deixe o navegador escolher o mais adequado para o dispositivo:

<!-- O navegador descarrega apenas o tamanho de que necessita -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Banca de flores no mercado">

Automatize o redimensionamento. A maioria dos gera vários tamanhos ao carregar o ficheiro, e as podem redimensioná-lo durante a entrega — qualquer uma das opções impede que o problema volte a ocorrer.
No mínimo, redimensione as imagens únicas para aproximadamente o tamanho a que serão apresentadas antes de as carregar.

Como a Silktide verifica isto

Carrega a página num navegador real e regista o tamanho a que cada imagem é apresentada, tendo em conta os ecrãs mais nítidos dos dispositivos modernos.
Compara esse tamanho com as dimensões do ficheiro de imagem efetivamente descarregado.
Assinala as imagens cujo excesso é significativo, indicando os bytes que uma imagem com o tamanho adequado pouparia, começando pelas maiores.

Resolução de problemas

Em que difere das outras verificações de imagens?

Esta verificação diz respeito às dimensões: disponibilizar uma imagem fisicamente maior do que a apresentada pela página. A compressão de imagens e a otimização de imagens abrangem a redução do tamanho do ficheiro mantendo as mesmas dimensões, enquanto os formatos de imagem modernos abrangem a conversão para WebP ou AVIF. A mesma imagem pode aparecer em várias verificações — as correções são complementares.

A imagem parece nítida devido aos ecrãs de alta resolução

Os ecrãs modernos precisam, de facto, de mais píxeis do que o tamanho apresentado sugere, e a medição tem isso em conta. As imagens só são assinaladas quando excedem aquilo que até um ecrã de alta resolução consegue utilizar.