Quando copiamos imagens dos bancos de imagens, normalmente
No projeto de um site é importante usar imagens de boa qualidade e o mais importante; que tenha direito de uso.
A maioria das imagens encontradas no Google não oferecem direito de imagem e isso pode ser um grande problema, a solução é pesquisar imagens em bancos de imagens gratuitos. Nesta outra publicação eu listei alguns sites bem legais que disponibilizam conteúdo de imagens gratuita – Os melhores Bancos de Imagens gratuitas
No entanto, a maioria destes bancos disponibilizam a imagem em alta resolução, resultado em um arquivo muito grande que acaba sendo inviável colocá-lo em um site, veja por exemplo uma imagem baixada do FreePik.com com 7 MB e uma resolução de 6000px x 4000px, que foge totalmente da realidade da WEB.
Editando o arquivo no Photoshop
Primeiramente temos que abrir o arquivo de imagem no PS.
-
Clique no menu Arquivo > Abrir
Alterando o tamanho do arquivo
Ao contrário do que muitos pensam, não precisamos recortar a imagem. Com a imagem aberta, clique no menu Imagem > Tamanho da Imagem.
Será carregada a seguinte tela;
Deixe marcada a opção Restringir Proporções
Agora altere a largura da imagem. Se você deseja utilizar a imagem ocupando toda a largura da tela, recomendo que use a largura de 1600 pixels, um tamanho padrão aceitável para qualquer dispositivo.
Ao alterar a largura note que a altura será automaticamente ajustada com o valor proporcional.
Otimizando a qualidade da imagem.
Ao reduzir a largura e altura da imagem você reduzirá também o tamanho do arquivo, mas além disso é possível otimizar também a qualidade da imagem se ela for salva com a extensão .JPG.
- Clique no menu Arquivo > Salvar Como
-
Dê um nome para o arquivo observando se ele está sendo salvo com a extensão JPG e clique em Salvar.
-
Será exibida uma nova tela para você escolher a qualidade da imagem. Normalmente a qualidade média é suficiente para imagens de alta resolução pois a perda de qualidade será mínima.
- Pronto! Agora compare o tamanho do arquivo original com o que salvamos no PS, eis a diferença; Um arquivo de 7 MB foi reduzido para apenas 146 KB, um tamanho excelente e aceitável para imagens da WEB.
Como otimizar ainda mais as suas imagens de seu site usando CDN
CDN é um rede global de servidores que hospedam suas imagens e outros arquivos estáticos em diversos servidores espalhados pelo mundo. A grande vantagem de se usar uma CDN é que normalmente o carregamento do seu site fica mais rápido e o servidor de hospedagem possui uma carga menor de processamento, consequentemente seu site terá uma melhor performance.
Se você quer aprender como otimizar as imagens do seu site usando um serviço gratuito de CDN leia a aula – Otimize as imagens do seu site com WebP e Statically CDN
