22/10/2012

Redimensionar Imagens no Blog - Código para Mudar o Tamanho das Imagens

Você pode alterar o tamanho das imagens que usa nas postagens do seu blog apenas modificando um trecho do endereço da imagem. Fazendo isso é possível redimensionar as imagens do blog para vários tamanhos e até modificar o formato delas e com isso adaptar as imagens para seu template imagens para seu template, parcerias ou qualquer outra utilidade que imaginar.


Vamos falar aqui sobre alterar imagens que você já enviou para o blogger, portanto se precisar ajuda para criar ou achar imagens para usar no blog veja os links abaixo:
4 Passos para Criar Banners ou Imagens para Usar em Blogs e Sites
Colocar Efeitos em Fotos e Imagens: Bordas, Desenhos, Texto, Editar Cores
Tutorial Completo sobre Criar, Colocar e Proteger Imagens no seu Blog

Redimensionar Imagens no blog - Código para mudar o tamanho das Imagens

Quando você faz uma postagem e envia uma imagem para o blog o endereço da imagem é mais ou menos assim:

http://4.bp.blogspot.com/-xYF4fBys59g/UIVeTsAe4sI/AAAAAAAAGDI/CJ5EsXoPvbs/s400/redimencionar-imagens-tamanho.jpg

Esse é o endereço da imagem que está no inicio deste tutorial nós vamos modificar o tamanho da imagem alterando o trecho s400. Este numero é a largura da imagem portando se você altera-lo para qualquer outro valor a imagem será reduzida ou ampliada conforme o numero que usar. Lembrando que essa é a largura da imagem e a altura se ajustará automaticamente mantendo as proporções da foto, por exemplo, se colocarmos 300 então a imagem ficará com 300 de largura e o endereço dela ficará assim:

......./AAAAAAAAGDI/CJ5EsXoPvbs/s300/redimencionar-imagens-tamanho.jpg
Redimensionar Imagens no blog - Código para mudar o tamanho das Imagens

Podemos também cortar as laterais da imagem fazendo que ela fique quadrada como as miniaturas das imagens usadas no gadget de assuntos relacionados ou resumo da postagem. Neste caso vamos acrescentar -c ao lado do código do tamanho da imagem ficando assim: s300-c.

......./CJ5EsXoPvbs/s300-c/redimencionar-imagens-tamanho.jpg
Redimensionar Imagens no blog - Código para mudar o tamanho das Imagens


Outra função interessante é criar um link para baixar a imagem em vez de exibir. Se você quiser disponibilizar a imagem para download acrescente -d na imagem, deste jeito:
http://4.bp.blogspot.com/-xYF4fBys59g/UIVeTsAe4sI/AAAAAAAAGDI/CJ5EsXoPvbs/s300-d/redimencionar-imagens-tamanho.jpg

Lembramos essas alterações na url da imagem permitem reduzir o tamanho da imagem, mas não ampliar além do tamanho original, portanto se sua imagem tiver 800px de largura não adianta colocar mais que s800 na url dela que a imagem não ficará maior. Lembre-se que imagens menores carregam mais rapido e permitem seu blog aparecer mais depressa, por isso veja também:
Melhorar Desempenho do Blog – Otimizar Imagens e Fotos
Como Diminuir o Tempo de Carregamento e Otimizar Blogs/Sites

Encontramos essa dica no tutorial Awesome Tips To Resize And Edit Images On Blogger & Picasa em inglês do site http://www.way2blogging.org e achamos que poderia ser útil para muitos blogueiros que gostariam de usar suas imagens em tamanhos diferentes. Esperamos que gostem e deixem a opinião de vocês sobre essa dica sobre imagens do blog.
Related Posts with Thumbnails

20 comentários:

  1. Muito bom post. E vai ser muito útil.
    Beijinhos

    ResponderExcluir
  2. Olá, aconselho a fazer o redimensionamento da imagem através de algum editor de imagem que a propoção de tamanho, isso faz com que a imagem não fique destocida, eu mesmo uso o Paint.net, programa leve e facil de seu usar.

    ResponderExcluir
  3. Matheus Morais mesmo usando um programa se alterar as proporções da imagem ela ficará destorcida.

    o que você pode fazer é cordar a imagem e usar uma parte dela no formato que deseja.

    ResponderExcluir
  4. Quando eu posto uma foto do perfil, ela aparece na linha do tempo pela metade.Ja troquei a medida dela mas sempre fica quadrada. Antes não era assim, aparecia inteira, como faço?

    ResponderExcluir
  5. ei fabiano eu queria saber como eu tiro o link da imagem tipo assim. tem site que eu entro ai quando eu clico na imagem num faz nada mais no meu blog quando eu clico abre a imagem no picasa pra baixar como eu tiro isso vc pode min ajudar?

    ResponderExcluir
  6. Walter para retirar os links das imagens você vai precisar modificar o código de cada uma delas na hora de postar.

    o código que o blogger gera é assim:

    <div class="separator" style="clear: both; text-align: center;">

    <a href="http://4.bp.blogspot.com/-xYF4fBys59g/UIVeTsAe4sI/AAAAAAAAGDI/CJ5EsXoPvbs/s1600/redimencionar-imagens-tamanho.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Redimensionar Imagens no blog - Código para mudar o tamanho das Imagens"><img alt="Redimensionar Imagens no blog - Código para mudar o tamanho das Imagens" border="0" height="303" src="http://4.bp.blogspot.com/-xYF4fBys59g/UIVeTsAe4sI/AAAAAAAAGDI/CJ5EsXoPvbs/s400/redimencionar-imagens-tamanho.jpg" width="400" /></a></div>



    para deixar a imagem sem link o código ficaria deste jeito:


    <div class="separator" style="clear: both; text-align: center;">
    <img alt="Redimensionar Imagens no blog - Código para mudar o tamanho das Imagens" border="0" height="303" src="http://4.bp.blogspot.com/-xYF4fBys59g/UIVeTsAe4sI/AAAAAAAAGDI/CJ5EsXoPvbs/s400/redimencionar-imagens-tamanho.jpg" width="400" /></div>

    ResponderExcluir
  7. Fabiano o gadget de postagens mais lidas usa esse código para gerar a imagem <img expr:src='data:post.thumbnailUrl'/> mas a imagem fica com endereço s72-c para redimensionar, você sabe como mudar a parte s72-c por outro tamanho?

    ResponderExcluir
  8. Rosiel a imagem gerada pelo código data:post.thumbnailUrl é mesmo neste tamanho 72x72 e não tem como alterar.


    esse tutorial que falamos sobre essa forma de redimencionar as imagens é para ser utilizado manualmente não tem como alterar no blogger do jeito que você falou

    ResponderExcluir
  9. No efeito neve fica o nome na parte superior tem como tirar?

    ResponderExcluir
  10. não tem como retirar o link do efeito neve

    ResponderExcluir
  11. Obrigada, ajudou muito, estava tendo essa dificuldade! beijoks

    ResponderExcluir
  12. Fabiano alterando os tamanhos na URL como vc ensinou não altera a qualidade da imagem? Eu estou redimensionando minhas postagens no microsoft office 2010 e elas ficam cinzas e perdem a qualidade.Vou fazer o teste. Obrigada

    ResponderExcluir
    Respostas
    1. não sei responder sobre o office 2010 (nunca usei para imagens)

      essa alteração que falei é depois da imagem enviada ao blogger.

      por exemplo:
      http://4.bp.blogspot.com/-aeaSXKc7s2c/VO0BLf4vspI/AAAAAAAALPI/WRwicvTpOec/s500/positiva-frases.jpg

      s500 significa 500 de largura, mas se alterar esse valor terá que alterar os códigos height="281" e width="500" que são os códigos que determinam o tamanho da imagem e aparecem no html das imagens do blogger, senão vai perder qualidade.

      Excluir
  13. Olá, bom dia. Gostei do tutorial, mas o que eu realmente estou procurando (e não sei se existe essa possibilidade) é um tutorial ensinando a redimensionar o tamanho padrão das imagens quando se clica em "pequeno" "médio" "grande" "tamanho original" "muito grande", lá dentro da postagem, quando se está inserindo a imagem de capa da postagem. (não só a de capa, mas as demais da postagem, onde se clica na imagem e aparece estas opções de redimensionamento). Então, quando clico em "grande", ela fica um pouco pequena em relação ao tamanho que eu desejo e quando clico em "muito grande" aí ela já fica maior do que eu desejo. Quero colocar a imagem de um tamanho entre esses dois citados, mas, não quero ficar mudando no HTML da postagem toda vez o tamanho da imagem, eu queria uma forma de mudar no HTML do blog lá no código fonte do blog, para mudar o tamanho padrão do "grande" para um tamanho um pouco maior do que é atualmente no blogger, para toda vez que eu inserir a minha imagem e clicar em "grande", ela ficar já do tamanho que eu desejo quando publicar a postagem. Quem entendeu isso e puder ajudar... Obrigado.

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. também existe a opção "tamanho original"

      você poderia editar a imagem e enviar para o blogger já no tamanho que deseja usar.

      Este é o único jeito de fazer um imagem do tamanho entre o "grande" e "muito grande" sem ficar editando os código html manualmente em cada postagem

      Excluir
  14. Olá, Eu estou com um problemão. Alterei o template do meu blog, só que as miniaturas de posts não aparecem na pagina inicial, mesmo tendo imagens nos pots. Gostaria de saber como resolver isso. Segue o endereço de um blog teste paara vcs entenderem :http://supertestedeportal.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. em alguns posts aparece a miniatura, o problema é que para gerar miniatura a imagem tem que estar no blogger.

      por exemplo nesta pagina (não aparece a miniatura na pagina inicial):
      http://supertestedeportal.blogspot.com.br/2016/03/para-testar-123.html


      o endereço da imagem deste post é
      http://www.estudokids.com.br/wp-content/uploads/2015/01/energia-eolica-como-e-gerada-e-seu-uso-no-brasil-e-no-mundo.jpg

      Ou seja, a imagem está hospedada em outro site.

      você precisa salvar a imagem e enviar para o blogger quando fizer a postagem assim as miniaturas funcionarão corretamente.

      não aparece a

      Excluir
  15. Olá, eu de novo. Bom, expliquei anteriormente, mas acho que ficou confusa a explicação.
    Sobre deixar a imagem de um tamanho entre o tamanho grande e o muito grande (na verdade, quero que ela fiquem no tamanho de 530 pixels como padrão).
    Tem como eu editar o código fonte para colocar por exemplo o tamanho padrão da imagem "grande" para ela ser exibida com 530 pixels de largura?
    Espero ter sido mais claro agora. Obrigado.

    ResponderExcluir
  16. não tem como editar o padrão dos tamanhos das imagens no blogger.

    se não quiser usar um dos tamanhos de imagens padrão terá que editar o código de cada imagem na hora de publicar

    ResponderExcluir