A otimização é o processo de diminuir o tamanho do arquivo para que o upload seja mais rápido, sem abrir mão da qualidade.
Imagens que não são otimizadas antes do upload podem fazer com que o site fique lento e os visitantes desistam de esperar. Isso é um problema quando você está tentando construir sua marca e aumentar o tráfego no site. O tamanho dos arquivos e a qualidade das imagens são dois fatores que têm um grande impacto na velocidade de carregamento da página.
Neste guia
Veja este exemplo de uma imagem pequena com qualidade para impressão. Ela foi baixada do site Unsplash.com e suas dimensões são de 2048 × 1286 em 240 DPI (pontos por polegadas). O tamanho do arquivo é grande: 1,1 MB.
Vamos pegar a mesma imagem e diminuir suas dimensões e DPI antes de carregá-la na biblioteca de mídia. O resultado será o mesmo, com um tamanho de arquivo reduzido.
Se você procura uma maneira rápida de reduzir o tamanho das imagens, pode usar ferramentas gratuitas de terceiros, como esta aqui.
Se você quiser mais controle sobre como a imagem será otimizada, continue lendo para ter uma visão mais aprofundada. Usaremos dois softwares gratuitos para reduzir o tamanho da imagem. Faça download aqui:
Para reduzir o tamanho da imagem:
- Abra a imagem no GIMP
- Clique em Image na barra de ferramentas e selecione Scale Image
- No tamanho da imagem, mude a largura para 1920 px (ou a largura de sua preferência)
- Clique em Scale
- Selecione File na barra de ferramentas. Clique em Export As
- Nomeie o arquivo com final “.jpg”
- Selecione Export
- Na caixa de diálogo que será aberta, mude Quality para 60
- Clique em Advanced Options
- Mude Subsampling para 4:2:0 (chroma quartered)
- Clique em Export
Essas configurações são um bom ponto de partida, mas você pode ajustá-las conforme suas necessidades.
Veja uma comparação dos resultados:
É possível fazer com que o arquivo fique ainda menor com o ImageOptim (aplicativo para Mac ou serviço da Web)
Abra o ImageOptim e escolha uma qualidade de 60% para cada tipo de arquivo:
Depois de definir essas configurações, clique com o botão direito na imagem que você quer otimizar e selecione Open with ImageOptim.
O ImageOptim reduzirá o tamanho da imagem automaticamente de acordo com as configurações escolhidas.
Essa ação não pode ser desfeita. Tenha um backup da imagem antes de fazer isso.
Se você estiver usando um PC, faça upload da imagem no site do ImageOptim e ele fornecerá uma versão otimizada do arquivo para download.
A versão para navegador não é gratuita e seu custo é mensal, mas eles oferecem um período de teste.
Se você estiver publicando imagens no seu site usando o aplicativo do WordPress, há uma opção de otimização.
No aplicativo para iPhone, é possível definir o Tamanho máximo da imagem para upload para que o arquivo original seja redimensionado quando você fizer upload. Para acessar essa opção, vá para Meu site, clique no ícone do perfil, no canto superior direito, e escolha Configurações do aplicativo.
No aplicativo para Android, clique no ícone do perfil, no canto superior direito, e escolha Configurações do aplicativo. Então, ative a opção Otimizar imagens para redimensionar e comprimir imagens ao fazer upload.
As telas Retina têm uma densidade de pixels maior do que as telas normais. Isso pode fazer com que as imagens com densidade de pixels habitual fiquem pouco definidas. Para evitar que isso aconteça, ao detectarmos uma tela Retina, fornecemos a imagem com o dobro do tamanho para que ela tenha o máximo de nitidez. Isso funciona somente se a imagem na sua biblioteca de mídia for maior do que a que aparece no site.
Mesmo com o dobro do tamanho máximo exibido no blog, o arquivo de imagem ainda será muito menor do que a resolução usada na sua câmera. Portanto, você pode otimizar suas imagens sem que percam definição em telas Retina.
Outros softwares de edição de imagens podem ter ferramentas fáceis para redimensionar e comprimir um lote de imagens muito rapidamente. Pacotes como o Photoshop e PaintShop Pro também servem para isso, mas há mais algumas opções gratuitas, como:
Também há serviços para navegador que você pode usar:
Suporte 