Busca

Carregando...

domingo, 22 de março de 2009

Os tamanhos das imagens do Blogger, Picasa, Google Plus

Atualizado dia 25/05/2015.

No Blogger, quando você envia uma imagem e verifica que o tamanho está maior do que cabe no post, você faz upload dela novamente para colocá-la no tamanho adequado? Não gosto de ser repetitiva, mas, se você faz assim, está fazendo errado.

  1. Você está desperdiçando seu espaço de armazenamento de imagens.
  2. Você está tornando o seu blog mais lento com o carregamento de duas ou mais imagens, sendo que ele deveria carregar só uma, já que é a mesma.

A hospedagem de imagens no Blogger-PicasaWeb-Google Plus é muito mais inteligente do que parece. Depois que enviamos a imagem, podemos mudar o tamanho dela fazendo uma pequena modificação no código da mesma, sem perder a nitidez da imagem.

Para exemplificar a pequena modificação (parte do código em destaque) que deve ser feita no código para obter tamanhos diferentes, vou comçar com um papel de parede. Por ser uma imagem em formato paisagem, o valor de pixels refere-se à largura:

150 pixels - s150
<img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s150/kero-kero.jpg" />
200 pixels - s200
<img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s200/kero-kero.jpg" />
320 pixels - s320
<img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s320/kero-kero.jpg" />
400 pixels - s400
<img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s400/kero-kero.jpg" />

Em uma imagem com formato retrato, o valor de pixels refere-se à altura:

150 pixels - s150
<img src="http://2.bp.blogspot.com/-5sW_tDqrgvI/VSwdAeM3bSI/AAAAAAAAgDg/fYdepHBtZl8/s150/moment-de-bonheur.png" />
200 pixels - s200
<img src="http://2.bp.blogspot.com/-5sW_tDqrgvI/VSwdAeM3bSI/AAAAAAAAgDg/fYdepHBtZl8/s200/moment-de-bonheur.png" />
320 pixels - s320
<img src="http://2.bp.blogspot.com/-5sW_tDqrgvI/VSwdAeM3bSI/AAAAAAAAgDg/fYdepHBtZl8/s320/moment-de-bonheur.png" />
400 pixels - s400
<img src="http://2.bp.blogspot.com/-5sW_tDqrgvI/VSwdAeM3bSI/AAAAAAAAgDg/fYdepHBtZl8/s400/moment-de-bonheur.png" />

Para ver mais exemplos de tamanhos, clique aqui.

Recorte quadrado

Adicione -c para ter um recorte quadrado, sem distorção da imagem:

<img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s400-c/kero-kero.jpg" />
<img src="http://2.bp.blogspot.com/-5sW_tDqrgvI/VSwdAeM3bSI/AAAAAAAAgDg/fYdepHBtZl8/s400-c/moment-de-bonheur.png" />

Mais exemplos no post Exibir recorte quadrado de uma imagem usando Picasa.

Largura e altura

Além do tamanho (s) da manhor dimensão, também é possível definir especificamente a largura (w) ou a altura (h) da imagem. Para decorar, basta se lembrar das palavras em inglês: size, width e height.

400 pixels de largura - w400
<img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/w400/kero-kero.jpg" />
400 pixels de altura - h400
<img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/h400/kero-kero.jpg" />

Sem redimensionar na janela

Por padrão, quando o tamanho da imagem é maior que o tamanho da janela do navegador, o browser automaticamente redimensiona a mesma para caber 100% na tela. Para que consiga ver em tamanho real, o cursor do mouse se transforma em uma pequena lupa e você tem que clicar sobre a imagem para ampliá-la.

Para que a imagem não seja redimensionada na tela do navegador, você pode adicionar –h logo após o tamanho da imagem. Para compreender melhor, clique nos seguintes exemplos e observe-os:

Redimensiona

<a target="_blank" href="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s1600/kero-kero.jpg"> <img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s144/kero-kero.jpg" /> </a>
link do exemplo

Não redimensiona

<a target='_blank' href='http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s1600-h/kero-kero.jpg'> <img src="http://lh4.ggpht.com/_HlIyV_enpD8/ScZaDMwxF3I/AAAAAAAAEmE/SMJaakc1ThQ/s144/kero-kero.jpg" /> </a>
link do exemplo

Até mais!

Imagem do site Sanriotown.

Posts relacionados