Como redimensionar uma imagem para a web

Esta postagem explica como redimensionar uma imagem para a web. Primeiramente em pixels para que a imagem se encaixe corretamente na página da web. Em seguida, em kilobytes para reduzir o tamanho do arquivo sem degradar muito a imagem.

Por que redimensionamos imagens para a web?

Queremos que as imagens tenham uma boa aparência na tela e baixem rapidamente para os visitantes do site.

Os sites com imagens de carregamento rápido terão uma classificação mais elevada nos motores de busca.

Porque os motores de busca preferem enviar os usuários a sites que proporcionem uma boa experiência.

Existem duas etapas para obter uma imagem de carregamento rápido:

• O primeiro passo é redimensionar a imagem em pixels - e deve vir primeiro.
  Essa é a largura e a altura. Ele precisa ter o tamanho certo para seu lugar no site.
  Existem algumas peculiaridades no dimensionamento de imagens desde a introdução dos sites responsivos.
  Uma imagem precisa ter o tamanho certo para um celular, um tablet, um desktop e uma TV que discutiremos mais tarde.
• A segunda etapa é reduzir o tamanho da imagem em kilobytes - conhecido como compactação.
  A compactação reduz ou combina as cores em uma imagem para diminuir o tamanho em kilobytes. É possível fazer isso sem perder muita qualidade.

Executar essas duas tarefas - redimensionar e compactar - é conhecido como otimizar uma imagem para a web.

Vou mostrar as melhores práticas para redimensionar uma imagem e como fazer isso.

As complicações com imagens responsivas

Vamos começar observando as imagens responsivas - aquelas que são redimensionadas para ficarem bem em diferentes tamanhos de tela.

Projetamos primeiro para dispositivos móveis, então começarei fazendo referência à versão móvel de um site.

Em sites para celular, a imagem geralmente ocupa toda a largura da tela. As imagens são empilhadas sobre o texto e os usuários estão muito acostumados a rolar rapidamente por páginas da web longas e compatíveis com dispositivos móveis.

Para um dispositivo móvel, uma largura muito boa para uma imagem é de 640 pixels. A altura pode ser o que você desejar.

Mas o dimensionamento da imagem não termina aí. Um tamanho não serve para todos.

Imagens em diferentes dispositivos

Vamos pensar na mesma imagem em um monitor extragrande ou em uma tela de TV - sim, os sites agora podem ser acessados ​​por meio de sua smart TV.

A imagem pode ficar em uma coluna à esquerda do texto.

Ele pode ocupar a largura da tela, como acontecia na versão móvel. Chamamos essas imagens de heróis.

Imagine o quão grande essa imagem precisa ser agora?

Para uma TV, uma imagem perfeita em pixels teria 1920 pixels de largura - ou mais.

Se você já reduziu o tamanho da imagem para 640 pixels para um celular, ela ficará péssima se você tentar aumentá-la para 1920 pixels. Você o esticaria em mais de 400%.

Aumentar a escala das imagens não parece bom - os pixels esticam e a imagem parece confusa.

Estabelecer-se para manter as imagens em 1920 pixels também não resolve o problema. O download é lento, especialmente em conexões lentas com a Internet.

Para aumentar as complicações: uma imagem deve ter o tamanho exato em pixels para uso na página. Os motores de busca gostam de ter uma boa ideia da largura e da altura - conhecidas como dimensões.

Então você pode ver - não existe um tamanho padrão e tudo fica bastante complicado. Tudo o que podemos fazer é o nosso melhor.

Plug-ins do WordPress para imagens adaptáveis

Existem alguns plug-ins do WordPress que ajudam a fornecer o tamanho correto da imagem ao dispositivo, chamados de imagens adaptativas.

Basicamente, uma pequena imagem é baixada primeiro - seja em tamanho ou resolução.

Se a resolução da tela for grande, o plugin fornece a versão maior. Isso acelera o tempo de espera do visitante.

Esta é a solução se você deseja usar imagens de grandes heróis, mas está preocupado com o tempo de download.

Aqui estão dois plug-ins de imagem adaptáveis ​​de que gosto:

• Imagens adaptativas para WordPress de Nevma
  Simplesmente envia versões menores das imagens para dispositivos móveis, portanto, um plugin muito básico que faz o trabalho depois que as configurações são salvas após a ativação.
• Shortpixel Adaptive Image por ShortPixel
  Este plugin é inteligente. Ele começará a cortar e compactar imagens para diferentes telas assim que for ativado. Embora você possa ter maior controle, se necessário. A documentação do ShortPixel também é abrangente. Você pode até comparar uma imagem antes e depois da compressão com seu teste de compressão de imagem.
  

Então, o que eu faria é usar esses plug-ins adaptáveis, mas não confie totalmente neles e despeje as fotos em seu site WordPress diretamente de uma câmera. Mantenha sua biblioteca de mídia limpa.

Redimensione a imagem primeiro e comprima-a minimamente para diminuir o KB. Depois de fazer o upload para o WordPress, o plug-in de imagem adaptável fará o resto.

Vamos começar a redimensionar uma imagem para a web.

Redimensione uma imagem para a web - em pixels

Com tudo o que discutimos em mente, escolha a largura da imagem.

• Um fotógrafo precisa de imagens de excelente qualidade. Para exibi-los na largura da tela inteira em um monitor extra grande, eles precisarão de uma imagem bem grande. Dimensione as fotos em pelo menos 1920 pixels.
• Qualquer outra pessoa, aconselho ir para 1200 pixels. Este é um bom equilíbrio. Pessoas em monitores extragrandes verão uma pixelização em imagens de largura total, mas é uma troca por uma imagem de carregamento rápido.

Para o meu próprio site e blog, uso imagens com no máximo 1200 pixels de largura, a maioria das páginas tem 800. Veja por quê:

• Imagens de largura total nunca são usadas no meu site. Gosto de manter tudo muito rápido.
• Meu negócio não é particularmente visual, as pessoas não precisam ver minhas fotos em alta resolução.
• Eu uso imagens separadas de tamanho exato para o Open Graph e isso não requer nada maior do que 1200.
• Pelo Google Analytics, sei que as pessoas que visitam meu site estão usando um dispositivo portátil ou um laptop. Informação útil.

Deixo isso ao seu critério.

Software de edição de imagem grátis

Existem muitas ferramentas gratuitas disponíveis on-line, bem como programas de edição de imagens que podem ser baixados.

Para fotos, use o formato de arquivo JPEG, e é isso que abordaremos aqui.

Para vetores, escolha PNG ou SVG - e isso é para um tutorial futuro.

Software de edição de imagem GIMP

'GIMP' (o GNU Image Manipulation Program) é um editor de imagens totalmente gratuito.

Baixe a versão estável atual do GIMP do site.

O GIMP fornece um tutorial sobre como alterar o tamanho (dimensões) de uma imagem (escala).

Editores de imagens online

Uma busca rápida por 'imagem de redimensionamento online' no Google lhe dará uma série de opções para permitir que você carregue, redimensione, comprima e baixe seu JPEG.

O primeiro resultado que encontrei foi resizeimage.net. Muito simples de usar - ele corta, redimensiona e compacta uma imagem.

Se você gostaria de cortar a imagem, use a opção número 2, mas eu ignorei isso e fui direto para a opção número 4, onde posso redimensioná-la em pixels.

Coloque 1200 no campo de largura, Nan em altura e marque a caixa para Manter a relação de aspecto.

O formato da imagem de saída será JPG.

Escolha uma opção de compactação.

A compressão progressiva mostrará uma versão pixelizada do JPEG assim que o visitante estiver na página. O restante das informações será baixado progressivamente para construir a imagem final. Gosto bastante desta opção porque o visitante sabe esperar.

Reduza a qualidade da imagem em cerca de 75%, novamente dependendo de quão implacável você gostaria de ser.

Redimensionar uma imagem em KBs - compressão

Comprimir é muito diferente de redimensionar. Todas as imagens devem ser compactadas antes do upload, mesmo se você estiver usando um plugin de imagem adaptável.

A compactação diminui o tamanho do arquivo da imagem, reduzindo os pixels, para que o download seja mais rápido.

Durante o estágio de compressão, tente não comprometer muito a qualidade da imagem.

Tente alcançar um equilíbrio entre a aparência da imagem e o download rápido.

As imagens também podem ser compactadas com o software GIMP.

Tutorial do GIMP sobre como alterar o tamanho (FileSize) de um Jpeg.