Você sabia que ter um site rápido influencia diretamente sua posição nas buscas do Google?

E como ter um Site Rápido?

Primeiramente você precisa de um site bem construído e instalado em um servidor de qualidade.

Outro ponto extremamente importante, e é justamente o assunto deste artigo, é utilizar imagens com tamanhos corretos e bem otimizadas.

Qual o tamanho correto de uma imagem para usar na internet?

Isso vai depender muito de onde você vai usar a imagem. Por exemplo, cada rede social possui um padrão de tamanho de imagens.

E o mesmo vale para o seu site, geralmente cada site vai ter um tamanho ideal de imagens também, dependendo da largura máxima que a imagem poderá ser exibida.

Como é medido o tamanho de uma imagem?

O tamanho de uma imagem é medido em Pixels.

Vamos dizer que você tenha um monitor no seu computador com Resolução Full HD, isso significa que o monitor possui 1920 pixels de largura por 1080 pixels de altura. Então se você quer colocar uma imagem como papel de parede no monitor o ideal é você usar uma imagem com exatamente 1920×1080 pixels.

Se você usar uma imagem menor a qualidade dela vai ficar prejudicada, e se usar uma imagem maior não vai fazer diferença visualmente, mas estará desperdiçando espaço de armazenamento.

O que é uma imagem bem otimizada?

Quando você tira uma foto com uma câmera digital, ou até mesmo com seu celular, geralmente esta foto é salva com qualidade máxima, assim você tem liberdade para fazer várias coisas com a foto, como por exemplo imprimir um poster, e neste caso você realmente vai precisar que a imagem esteja com sua melhor qualidade para que a impressão fique boa.

Só que na internet não precisamos de uma imagem super grande de alta qualidade, principalmente hoje em dia onde os celulares estão sendo mais utilizados do que os computadores. É simplesmente um desperdício de espaço no seu site, um desperdício de velocidade para o usuário baixar aquela imagem super pesada e um desperdício de qualidade, afinal de contas o usuário vai ver a imagem em uma tela pequena.

Então otimizar uma imagem é justamente deixa-la com um peso menor.

Como é medido o peso de uma imagem?

O peso de uma imagem é medido em Bytes, assim como qualquer tipo de arquivo em seu computador. Geralmente usamos KiloBytes ou MegaBytes.

1 Kilobyte é aproximadamente 1.000 Bytes, na verdade é exatamente 1.024 Bytes, mas podemos arredondar para mil em uma conversa informal.

1 Megabyte é aproximadamente 1.000 Kilobytes ou 1.000.000 Bytes. Mais precisamente 1.024 Kilobytes ou 1.048.576 Bytes.

Quando eu tiro uma foto em meu celular seu peso geralmente fica entre 1,5 e 2,5 MB (sigla para MegaBytes).

Qual é o tamanho e peso ideal de uma imagem?

Neste ponto vou dar minha opinião pessoal, que pode ser diferente da opinião de outros profissionais. E claro que a situação pode mudar em tipos de sites específicos, então se tiver alguma dúvida e for cliente da ServerPro, entre em contato direto comigo por e-mail ou WhatsApp, que vou lhe dizer o tamanho ideal para o seu site.

Para os meus sites e os sites dos meus clientes eu geralmente utilizo imagens com até 1200 pixels de largura (a altura vai depender da proporção da imagem) e tento sempre ficar abaixo de 300KB (KiloBytes) de peso, mas meu ideal é ficar próximo de 100KB.

Claro que isso não é uma regra, se eu preciso colocar uma imagem de fundo que vai ocupar a largura total da janela do navegador, vou usar no mínimo uma imagem com 1920 pixels de largura, assim garanto uma imagem com qualidade sendo exibida em monitores FullHD.

Como deixar minhas imagens com tamanho e peso ideal?

Aí existem várias ferramentas diferentes que podem ser utilizadas.

Basicamente qualquer editor de imagens vai servir. Muitos gostam de utilizar o Photoshop, eu particularmente uso a muitos anos o Fireworks (que infelizmente foi descontinuado pela Adobe).

Mas vou sugerir uma ferramenta online, gratuita e muito simples, assim você vai conseguir utiliza-la em qualquer tipo de computador, que é o site IloveImg.com.

Ao acessar o site clique no botão Select images e selecione as imagens que deseja otimizar em seu computador (podem ser várias ao mesmo tempo). Você também pode simplesmente arrastar as imagens e soltar dentro da janela do site

Vou fazer um exemplo prático usando a seguinte imagem:

Como otimizar imagens e fotos para usar em seu site

Fiz o download desta imagem no site Unsplash.com, o seu tamanho é de 4625 pixels de largura por 3083 pixels de altura e o seu peso é de 2,1 MB.

Então o nosso objetivo é deixar a imagem com menos de 300KB, sem perder qualidade.

Depois de enviar a imagem para o site IloveImg.com será exibida a tela abaixo.

Como otimizar imagens e fotos para usar em seu site

Marquei com uma seta vermelha na imagem acima o campo Width(px), é neste campo que vamos definir qual a largura final. Note que está mostrando a largura atual da imagem que acabamos de enviar.

Podemos também alterar a altura da imagem pelo campo Height(px), mas é importante alterarmos apenas um dos campos pois o outro será alterado automaticamente para manter as proporções corretas da imagem.

Então vamos alterar o campo Width(px) para 1200 pixels. Note que o campo Height(px) vai alterar automaticamente para 800 pixels.

Como otimizar imagens e fotos para usar em seu site

Agora basta clicarmos no botão RESIZE IMAGES.

Dependendo da quantidade de imagens que você enviar, este processo pode demorar um pouco.

Ao final vai abrir uma caixa de download para você baixar as imagens otimizadas para seu computador. Se o download não começar automaticamente basta clicar no botão azul escrito Download resized IMAGES.

Como otimizar imagens e fotos para usar em seu site

Agora vamos comparar o tamanho da imagem original e da imagem otimizada:

Como otimizar imagens e fotos para usar em seu site

Veja só a diferença, antes tínhamos uma imagem com 2,1MB de peso e agora temos uma imagem otimizada com apenas 101KB, ou seja, conseguimos diminuir a imagem otimizada para praticamente 5% da imagem original.

E isso não é tudo, ainda dá para melhorar mais um pouquinho. Nos sites de nossos clientes utilizamos um recurso que otimiza as imagens depois de serem enviadas para o site, com isso ainda conseguimos diminuir o peso final em cerca de 5%.

O espaço economizado pode parecer pouco ao olhar apenas uma imagem, mas pense em seu site daqui a 5 anos, imagine estar usando apenas 5% do espaço que você usaria se não otimiza-se as imagens.

Mas como eu disse antes, o principal aqui não é a economia de espaço, o grande diferencial é ter um site mais rápido para que os seus usuários tenham uma navegação mais fluída e o Google priorize o seu site em relação a outros sites que são mais lentos.

Espero que tenha gostado das dicas.

Um abraço e até o próximo artigo.