Existem três ferramentas a considerar ao usar mídia, como imagens, em suas páginas web: o tamanho, o formato e a compressão. Vamos falar sobre o tamanho das suas imagens primeiro. Quando você está construindo um site, frequentemente estiliza imagens para exibir em um tamanho específico. Por exemplo, você pode ter uma exibição de imagem em uma resolução de 640x480. 640 representa a largura enquanto 480 representa a altura em pixels. Ao preparar sua imagem, você deve redimensioná-la para um tamanho 640x480 para corresponder a esse estilo. Se você servir uma imagem que é 1920x1080 mas estiver estilizando-a para ser muito menor, você está exigindo que seus usuários baixem dados desnecessários. Uma resolução menor resulta em um tamanho de arquivo menor. A próxima coisa a considerar é o formato do seu arquivo. Dois dos formatos de arquivo mais comuns são PNG e JPG, mas esses não são mais os formatos mais ideais para servir imagens. A menos que você precise de suporte para navegadores mais antigos, você deve considerar usar um formato mais otimizado, como WEBP ou AVIF. Finalmente, você pode executar algoritmos de compressão em suas imagens para reduzir o tamanho do arquivo. Ferramentas como pngcrush funcionam bem para formatos sem perda como PNG, que podem ser comprimidos sem qualquer perda de qualidade, já que os dados originais podem ser perfeitamente reconstruídos. No entanto, nem todos os formatos são sem perda. JPG, por exemplo, usa compressão com perda — cada vez que um JPG é re-salvo ou re-comprimido, alguns dados da imagem são permanentemente descartados, resultando em qualidade degradada. Você deve ter tudo isso em mente ao selecionar e preparar imagens para suas páginas web.