As imagens do seu site são indispensáveis, por outro lado, normalmente são as maiores responsáveis pelo tempo de carregamento das páginas, onde é extremamente comum o aumento do tempo, visto a falta de tratamento ou otimização.
Neste artigo nós vamos explicar algumas questões técnicas sobre as imagens, principalmente os “desperdícios” que podem ocorrer quando você não se atenta a pequenos detalhes, mas que fazem grande diferença. Vamos falar sobre o tamanho de imagens, explicar a diferença entre o tamanho em pixels (px) e tamanho do arquivo (geralmente em MB), entre outras coisas.
Qual a diferença do tamanho do arquivo e dos pixels
Embora um tenha relação direta com o outro, eles devem ser tratados de formas diferentes. Por exemplo, as imagens são formadas por pequenos quadradinhos (assim como seu monitor, tela do celular ou TV), e esses quadradinhos são conhecidos como pixels. Em um exemplo prático, hoje é bem comum telas de computadores serem full hd, que resumidamente, são de 1920 pixels x 1080 pixels.
Considerando que uma imagem tem exatamente essas medidas, ela se encaixaria perfeitamente na tela, e seria exibida perfeitamente no seu monitor, celular ou TV full hd. Por outro lado, você pode acessar ou baixar uma imagem 4k, que é maior do que o exemplo anterior, tendo 3840 pixels x 2160 pixels.
Mas o que acontece quando um monitor, TV ou celular que é full hd tenta exibir uma imagem 4k? Basicamente a imagem acaba tendo sendo ajustada pelo navegador, que faz uma conversão direta e reduz os pixels para que possa ser exibida corretamente, isso faz com que parte da qualidade da imagem seja perdida, principalmente se você tentar visualizar em tela cheia. A pior parte dessa conversão é que o seu navegador vai baixar a imagem com o tamanho inteiro, e é aqui que vamos para a parte do tamanho da imagem.
Existe um padrão (que quase sempre é exato), que é: Quanto mais pixels uma imagem tiver, mais pesada ela será, no sentido de tamanho do arquivo (em KB, MB, etc.) Por isso, novamente usando como exemplo imagens em full hd e 4k, se você notou, 4k é exatamente o dobro de pixels do que full hd, isso quer dizer que o tamanho do arquivo da imagem em 4k será definitivamente maior do que a mesma imagem em full hd.
Isso não significa que o tamanho do arquivo será o dobro, isso depende e pode ser mais ou menos. Em um exemplo prático, uma imagem em 4K pode pesar 3MB, enquanto um em Full HD em torno de 1,3MB, e é aqui que entram os possíveis desperdícios que podem ocorrer, pois se você possui um site, esses são os valores que mais poderão afetar a navegação por ele.
Desperdícios com imagens muito grandes
Muitas vezes você pode, por questões de qualidade, utilizar imagens na melhor resolução possível, podendo ser 4K, 8K, etc., porém, a maioria dos usuários sempre vão estar visualizando a imagem em Full HD, e há os casos mais raros em que vão ver em resoluções ainda menores, ou outros casos que vem aumentando com o tempo, que realmente tem acesso a resoluções maiores, como 2,5K ou mesmo o 4K.
Sendo assim, enviar imagens em 4K pode não ser totalmente necessário, há menos que você priorize totalmente a qualidade das imagens, mesmo que isso custe alguns segundos de carregamento, pois os usuários sempre vão baixar a imagem completa (o tamanho total em MB), e àqueles que precisarem de conversão, o navegador ainda vai levar alguns milissegundos (ou poucos segundos) para converter o tamanho.
Por outro lado, se você possui um site WordPress, ele possui uma função extremamente útil e que pode ajudar bastante. Essa função vem ativada por padrão, que é a de criar vários tamanhos (em resolução / pixels) para uma imagem enviada no painel do seu site, e quando o usuário acessa, o WordPress automaticamente indica a imagem com o tamanho mais indicado, de acordo com o tamanho definido no site, e a resolução do dispositivo do usuário.
O único “problema” nesse caso é que uma imagem que pesaria, por exemplo, 4MB, terá cópias com outras dimensões para melhorar o desempenho do site para os usuários, o que vai afetar diretamente o consumo de disco, já que uma mesma imagem terá pelo menos 5 arquivos com dimensões diferentes.
Alternativa para o tamanho das imagens
Agora que você já sabe a diferença do tamanho do arquivo e dos pixels da imagem, e também a relação entre eles. Por isso, há uma alternativa, que é otimizar as imagens antes de enviá-las para o seu WordPress, ou mesmo usar um plugin para otimizar as imagens já existentes.
A otimização visa reduzir o tamanho do arquivo mantendo a qualidade da imagem, e o procedimento normalmente pode converter o formato da imagem (.webp, .avif, etc.) ou mesmo manter, mas refazer pixels, ajustar tamanhos, etc. Se você quiser saber mais, recomendamos que acesse o nosso artigo sobre esse tema clicando aqui.