Problema com o Tamanho das Imagens nos Posts do Blogger

O Blogger está com uma falha na hora de alterar o tamanho das imagens das postagens. Após enviar a imagem para o Blogger podemos alterar o tamanho da imagem, porém o que está acontecendo é alterar apenas o HTML e não o endereço (url da foto) para ajustar o tamanho da imagem.

Problema com Tamanho das Imagens nos Posts do Blogger

Quando fizer uma nova postagem depois que enviar as imagens e ajustar o tamanho verifique o código HTML veja o exemplo abaixo:

<img border="0" src="http://3.bp.blogspot.com/-7W8S8WzA_3k/UzrLels0aII/AAAAAAAAJqo/slStWfS5vJo/s1600/tamanho-imagens-blogger.jpg" height="267" width="400" /></a>

O código width="400" e height="267" fazem a imagem aparecer no tamanho que eu escolhi, porém o tamanho desta imagem é 556x375. Este é o tamanho da imagem original como enviei para o Blogger, ou seja, é a imagem que aparece no Efeito LightBox nas Imagens do Blog.

Embora isso pareça um detalhe afinal a imagem aparece no tamanho que eu escolhi existem dois problemas:

A imagem perde qualidade (fica meio borrada) quando alteramos o tamanho somente pelo HTML.

E o principal problema é que deixa o blog lento porque embora a imagem apareça no tamanho que escolhi ela é 556x375. Então o peso (demora para carregar) é maior e claro quanto maior for sua imagem original maior será essa diferença.

Veja algumas dicas sobre imagens e velocidade do blog:
Testar e Melhorar o Tempo de Carregamento do Blog ou Site
Otimizar as Imagens do Blog: Carregar Imagens mais Rápido
Usar Informações do Contador de Visitas para Melhorar o Blog

Como Corrigir Erro no Tamanho das Imagens

A correção deste bug com as imagens das postagens do Blogger é simples de fazer. Altere o endereço da imagem com a largura que escolheu. Em nosso exemplo o endereço da imagem é:

http://3.bp.blogspot.com/-7W8S8WzA_3k/UzrLels0aII/AAAAAAAAJqo/slStWfS5vJo/s1600/tamanho-imagens-blogger.jpg

E você deve alterar o trecho s1600 para s400 (que é o tamanho que escolhi para mostrar a imagem) então o endereço fica deste jeito:

http://3.bp.blogspot.com/-7W8S8WzA_3k/UzrLels0aII/AAAAAAAAJqo/slStWfS5vJo/s400/tamanho-imagens-blogger.jpg

Veja mais detalhes sobre:
Redimensionar Imagens no Blog - Código para Mudar o Tamanho das Imagens
4 Passos para Criar Banners ou Imagens para Usar em Blogs e Sites
Criar Banner para Blogs: Programas e Sites para Editar Imagens

O lado ruim é que você terá que se lembrar de fazer isso em todas as postagens que fizer até que o Blogger corrija esse problema, mas vale à pena fazer afinal isso prejudica a velocidade do seu blog por causa do tamanho das fotos publicadas.

10 comentários :

  1. Nossa... Vlw mesmo pela dica.
    Isso vai melhorar muito o carregamento das minhas postagens e a qualidade da imagem.
    Obrigado.

    ResponderExcluir
  2. Fabiano, primeiramente meus parabéns pelo seu blog, sempre me ajudou bastante. Recentemente comecei a trabalhar profissionalmente com mídias sociais e ainda me restam algumas dúvidas.

    Meu blog é o http://www.historiailustrada.com.br/, está no ar faz uns 20 dias e já tem um fluxo de milhares de pessoas graças às redes sociais, entretanto ainda não gera fluxo de mecanismos de busca, será que eu estou tendo algum problema? Você pode dar uma olhada? São todos textos inéditos e de qualidade viral.

    Outra coisa, estou tendo dificuldades em habilitar a caixa de comentários do facebook neste template, existe alguma ferramenta para encontrar erros html deste gênero?

    Também gostaria saber como redirecionar o historiailustrada.com.br para o www.historiailustrada.com.br

    Abraços, desculpe se abusei, aguardo respostas!

    ResponderExcluir
    Respostas
    1. aqui tem uns dos erros mais comuns dos comentários do facebook no blogger:
      Corrigir Problemas dos Comentários do Blogger e Facebook Juntos no Blog

      sobre redirecionar o endereço sem www entre nas configurações do blog e clique para editar o dominio então marque a opção Redirecionar..... (fica logo abaixo do endereço do blog)

      Excluir
  3. Olá...antes de mais muito obrigada por disponibilizar tanto saber. É uma preciosa ajuda.
    Estou, há algum tempo, sem conseguir carregar imagens no meu blog mas consigo publicar mensagens só de texto. Não sei como resolver o problema. Até à escolha da imagem está tudo certo mas depois não continua...
    Se alguém puder dizer-me o que fazer agradeço

    Muito obrigada
    Luzia

    ResponderExcluir
    Respostas
    1. veja qual formato de imagem está usando.

      salve as imagens no formato .jpg ou .gif (.png também funciona mas normalmente é mais pesada)

      Excluir
  4. Fabiano, como faço para que as imagens dos posts tenham a mesma largura da área de posts?

    ResponderExcluir
    Respostas
    1. o blogger tem aquelas opções de largura que aparece na imagem que publicamos no inicio deste tutorial.

      não tem um jeito de ajustar automaticamente a largura da postagem. Sugiro que use uma das opções padrão do blogger

      Excluir
    2. @Fabiano, consegui reverter o problema. Os templates do Blogger possuem várias bordas desnecessárias, eu as removi e obtive um alinhamento perfeito. Com isso, as imagens ficaram 100% centralizadas nas postagens.

      Excluir
  5. Olá Fabiano Tudo bem? Cara estou o seguinte problema: Quando adiciono uma imagem no meu post, na caixa de edição parece tudo normal, porém quando eu publico, o espaço entre a imagem e o próximo paragrafo fica enorme.

    Será que isso pode ser erro do Tema, e se tem como ser corrigido como posso fazer?

    ResponderExcluir
    Respostas
    1. qual o endereço do blog que está com problema?

      você pode tentar usar o inspecionar elemento do navegador para achar o que está gerando o espaço.

      deve ser algum código CSS com padding ou margin

      Excluir