Páginas

domingo, março 22, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s150/kero-kero.jpg" />
200 pixels - s200
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s200/kero-kero.jpg" />
320 pixels - s320
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s320/kero-kero.jpg" />
400 pixels - s400
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s400/kero-kero.jpg" />

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

150 pixels - s150
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIRV40R71zAih5UlK58YnbXvsPFGxr-Jjo3HT_UU1qLsGIRRPMNoJi5F7dBEBnY-gnt2cfDXb2KHrkbEYWNqsNMcf6q57GQK-Gg3NwDoi9ZUOUG8hLiy0_X4J44jl8qG7X8SNa_c8hADH/s150/moment-de-bonheur.png" />
200 pixels - s200
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIRV40R71zAih5UlK58YnbXvsPFGxr-Jjo3HT_UU1qLsGIRRPMNoJi5F7dBEBnY-gnt2cfDXb2KHrkbEYWNqsNMcf6q57GQK-Gg3NwDoi9ZUOUG8hLiy0_X4J44jl8qG7X8SNa_c8hADH/s200/moment-de-bonheur.png" />
320 pixels - s320
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIRV40R71zAih5UlK58YnbXvsPFGxr-Jjo3HT_UU1qLsGIRRPMNoJi5F7dBEBnY-gnt2cfDXb2KHrkbEYWNqsNMcf6q57GQK-Gg3NwDoi9ZUOUG8hLiy0_X4J44jl8qG7X8SNa_c8hADH/s320/moment-de-bonheur.png" />
400 pixels - s400
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIRV40R71zAih5UlK58YnbXvsPFGxr-Jjo3HT_UU1qLsGIRRPMNoJi5F7dBEBnY-gnt2cfDXb2KHrkbEYWNqsNMcf6q57GQK-Gg3NwDoi9ZUOUG8hLiy0_X4J44jl8qG7X8SNa_c8hADH/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s400-c/kero-kero.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIRV40R71zAih5UlK58YnbXvsPFGxr-Jjo3HT_UU1qLsGIRRPMNoJi5F7dBEBnY-gnt2cfDXb2KHrkbEYWNqsNMcf6q57GQK-Gg3NwDoi9ZUOUG8hLiy0_X4J44jl8qG7X8SNa_c8hADH/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/w400/kero-kero.jpg" />
400 pixels de altura - h400
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s1600/kero-kero.jpg"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s144/kero-kero.jpg" /> </a>
link do exemplo

Não redimensiona

<a target='_blank' href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s1600-h/kero-kero.jpg'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-3vOQQ-ltoptUJAq1ryJG3ZxUmeqj-TBfXO-_C1TjbxenS5BmG-P45Zwo9gOx041_pyK9W4yLZYdbTUqrwauP4utgjL5-RSC0wSXUGsZU3HzhWX-ozVLk03ndVb9db9dg_iHqm8oBHwP/s144/kero-kero.jpg" /> </a>
link do exemplo

Até mais!

Imagem do site Sanriotown.



Pix meutedio arroba mail ponto com

13 comentários:

  1. Olá Helen,

    Suas dicas são ótimas. Será que você pode me ajudar numa coisa? Quando eu clico sobre uma imagem esta se abre ampliada numa nova janela, pergunta: como eu transformo essa imagem ampliada num link?

    ResponderExcluir
  2. @Ricardo,

    Se eu entendi sua pergunta, ela não faz sentido, já que todos os meus exemplos têm códigos e exemplos dos códigos.

    ResponderExcluir
  3. Olá Helen,

    Me desculpe. Não me fiz entender. Vou exemplificar minha duvida. Por exemplo, se eu clicar sobre a última imagem desse seu post ela vai abrir ampliada numa nova janela ok? O que eu quero saber é se é possivel transformar essa imagem ampliada num link que redirecione meus visitantes para um outro lugar qualquer.

    ResponderExcluir
  4. @Ricardo,

    Claro, link é link. Você redireciona para onde bem entender.

    ResponderExcluir
  5. kkk

    OK. Deixa pra lá.

    ResponderExcluir
  6. Valeu a dica, no blog do Cris B.
    Com este padrão do Picasa, dá até pra criar um sistema, com uma função para inserir no post, escolhendo o tamanho, usando os tamanhos padrão ... E, para quem sabe, fazer um plugin p/Wordpress, ou Widget pro blogger...

    Valeu a dica.

    ResponderExcluir
  7. quero fazer uma pergunta...
    assim, quando eu coloco uma imagem no meu blog, ela fica com aquele negocio chato, que quando vc passa o mouse ela vira link e quando vc clica ela amplia (como nos exemplos acima, onde vc mostra oa função do -h) eu queria tirar isso, queria tirar esse link da imagem, para que ninguem precisa ficar clicando para ampliar...
    POR FAVOR RESPONDA

    ResponderExcluir
  8. @Caio, leia o post Como criar links para aprender qual é a parte do código que você tem que tirar.

    Lembrando que, para mudar o código, é preciso editar o post no modo HTML.

    Volte sempre!

    ResponderExcluir
  9. Olá Helen!
    Muito obrigada pelas dicas!! Tenho uma dúvida: é possível limitar os tamanhos das imagens pelo HTML? Gostaria que as imagens de todos os autores do blog pudessem ter o mesmo tamanho sem eles terem que ficar ajustando o tamnho certo toda hora...
    Obrigada!!!

    ResponderExcluir
  10. Daniela, com JavaScript isso é possível, mas eu nunca pesquisei a respeito.

    ResponderExcluir
  11. Muito obrigado pela dica!

    ResponderExcluir
  12. Amiga, num dos meus blogs, cliquei em exibir dimensão das figuras. Daí, sempre que acesso esse blog, sobre cada foto aparece um pequeno quadro informando sua dimensão. Como faço para que pare de exibir esse quadro ? Desde já lhe agradeço. sgs@terra.com.br

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.