Hoje vamos falar sobre a importância de utilizar imagens otimizadas no nosso design web.
Este é um fator fundamental na definição do design de um site, pois dele dependem aspetos tão relevantes como o tempo de carregamento e eventuais penalizações, diretas ou indiretas, por parte dos clientes, utilizadores e até do próprio Google.
Se estás a pensar contactar-nos para desenvolvermos o teu site, partilhamos alguns truques essenciais para tirares o máximo partido da relação entre imagem, qualidade e peso.
1. Otimizar imagens sem perder qualidade no design web
Este é o requisito mínimo a cumprir — mesmo que não sigas mais nenhuma dica, esta é indispensável. Basta utilizares um destes dois programas: ImageOptim para OS X ou FileOptimizer para Windows e Linux, que automatizam a otimização de imagens.
Só tens de arrastar as tuas imagens para a aplicação enquanto bebes um café.
É um processo extremamente rápido, sem complicações, e o resultado são imagens otimizadas.
2. Dimensões corretas
Utilizar imagens com dimensões erradas é um erro comum e pode ter consequências negativas.
Muitas vezes, ao vermos a imagem no ecrã com o tamanho aparentemente certo, assumimos que está tudo bem. No entanto, o navegador pode estar a carregar uma imagem muito maior, com mais peso, mas a exibi-la reduzida.
Por isso, as dimensões da imagem devem corresponder exatamente ao espaço que vão ocupar — nem mais, nem menos.
3. Guardar para web
Esta funcionalidade é bem conhecida por quem trabalha em design web e poupa imenso tempo quando integrada corretamente no fluxo de trabalho.
Consiste simplesmente em guardar as imagens para o site já em formato otimizado para web.
Aqui podes ver uma comparação: da direita para a esquerda, tens imagens guardadas para web a 100, 70, 50 e 20% de qualidade. Dependendo do tamanho original, a diferença será mais ou menos visível.
Existem várias teorias sobre a percentagem ideal de qualidade, mas o melhor é confiares na tua intuição: experimenta, guarda, faz zoom, compara… tudo o que for preciso. Assim treinas o olhar e consegues resultados perfeitos.
4. Preciso mesmo destas imagens no meu site?
Esta é uma excelente questão e faz parte da análise de qualquer projeto web. Um bom design web começa por identificar necessidades reais — não se trata de ter mais imagens, mas sim de perceber quais são realmente necessárias.
5. Utilizar o formato adequado
Existem vários formatos de imagem, cada um com as suas características, vantagens e limitações.
É importante conhecê-los para escolher sempre o mais adequado a cada situação.
Se tiveres alguma dúvida, liga para o nosso estúdio em Barcelona — estamos cá para ajudar no que for preciso.