21/02/2011

Melhorar Desempenho do Blog – Otimizar Imagens e Fotos

Já falamos sobre fazer um fazer um blog mais rápido e que isto ajuda a conseguir mais visitas para o blog de varias maneiras: o Google posiciona melhor sites que carregam mais rápido, além disso, você não corre o risco de seus visitantes saírem da pagina por falta de paciência esperando o carregamento do blog. Lembre-se que nem todos têm banda larga com a mesma velocidade(veja a enquete:Qual a sua velocidade de internet?). Então hoje vamos falar sobre como analisar seu blog e otimizar as imagens para carregarem mais rapido na sua pagina, claro sem perder a qualidade das fotos.

Mas o que modificar no blog para deixá-lo mais rápido, quais coisas devemos retirar? A resposta é simples: as coisas mais pesadas nos sites e blogs de maneira geral são vídeos, musicas, slides de fotos, gifs animados, fotos. Existe um site que você pode analisar seu blog e saber quais são as coisas que mais demoram em carregar é o Pingdom Tools.

Veja na imagem abaixo a coluna do lado direito mostra o tamanho de cada arquivo carregado em nosso blog assim você poderá achar e retirar o que mais demorar em carregar no seu blog, mas tenha calma nem todos os arquivos você poderá remover, pois alguns fazem parte do blogger.

analisar e melhorar o blog
Outra coisa bem interessante para fazer é otimizar as imagens, ou seja, salvar a mesma imagem num formato que fique mais rápida para carregar veja dois sites que fazem esse serviço:

Free Image Optimizer

otimizar imagens
Envie a imagem clicando no botão selecionar arquivo, clique em optimize now e depois no botão download to your computer para salvar a imagem otimizada no seu computador, então poderá usar essa imagem mais leve no seu blog.

Online Image Optimizer

otimizar fotos
Da mesma maneira que o anterior clique em selecionar arquivo ou coloque a url de uma imagem e clique no botão optime. A diferença é que neste site você poderá ver sua imagem salva com diferentes níveis de qualidade e poderá escolher qual delas utilizará. Lembrem-se quando maior a qualidade da imagem mais tempo ela demorar em carregar.

Veja também:
Mais Leitores, Assinantes de Feed e Visitas para Blog
Aparecer no Google, Yahoo e outros
Ganhar Tempo e Conseguir mais Visitas no Blog

Esperamos que gostem destas sugestões para deixar seu blog mais leve e as dicas de sites para otimizar imagens.
Related Posts with Thumbnails

32 comentários:

  1. eu ainda não conheci os sites... achei bem legal

    ResponderExcluir
  2. Bom também é o fileminimizer, que consegue as vezes reduzir o peso de imagens em até 97%, e alem disso trabalha com varios formatos.
    ----------------------------------------------
    mas fabiano, tem algum que trabalhe assim com gifs animados?

    ResponderExcluir
  3. Markos
    reduzir o tamanho dos gifs é mais complicado justamente porque para ter animação tem que ser no formato gif animado e esse formato perde qualidade se mexer nas configurações padrão dele.

    ResponderExcluir
  4. É possivel ter dominio (.com ou .com .br ) gratis ?

    ResponderExcluir
  5. Jeferson Santos
    acho que não é possivel ter um dominio .com ou .com.br gratis

    ResponderExcluir
  6. Eu gostaria de saber como fazer um menu Horizontal onde quando vc passa o mause sobre o nome apareça os temas(Exemplo> Jogos de Pc ai vc passa o mause e aparece Jogos de ação de aventura...)

    Se tiver no blog gostaria de saber onde tá que eu ão encontrei.

    Obrigado. Dicas para Blog NOTA 10000

    ResponderExcluir
  7. fabiano pq vc nao posta os arquivos que te mandei?

    ResponderExcluir
  8. hey Fabiano, t]vim aqui falar que eu achei um código que se vc clicar nele a janela fecha, bom, não testei ainda, mas acho que posso ajudar em alguma coisa :)
    faltou colocar o < no inicio e o:
    > no final


    span onclick="window.close();" class="close-win">Fechar esta janela</span

    ResponderExcluir
  9. quais arquivos você me mandou?.... não estou lembrado de receber nada para fazer postagem

    ResponderExcluir
  10. nao estou conseguindo salvar a imagem no 1º site...ta salvando como html ;/
    e no segundo nao estou conseguindo ver a imagem ;/

    ResponderExcluir
  11. Na tentativa de encontrar uma maneira de postar minhas musicas em mp3 em meu blog descobri o site longnplay.com la vc pode montar seu própio album musical além disto é uma radio com botão de controle,assim que ouve tem a opção de parar a musica ou baixar o som.

    É como uma radio mesmo,super bom.

    ResponderExcluir
  12. Reduzindo o peso das imagens, o carregamento da pagina pode diminuir 80% o tempo de espera. é muito importante para o webmasters.

    ResponderExcluir
  13. muito boa dica cara.
    Estou montando um site, e ao invés de por texto na home, prefiro usar gifs estática com texto.
    nem preciso dizer que me quebrou um galhão.
    vlw

    ResponderExcluir
  14. Excelente artigo, sem dúvida a optimização das imagens é um factor verdadeiramente relevante. Um site/blog que demore mto a carregar pode fazer com que um visitante desista e vá procurar outro.

    ResponderExcluir
  15. os otimizadores são bons, mas nenhum substitui o photoshop, acho que pra quem tem um blogger tenque usar o photoshop, testei o programa com imagens normais e ele realmente funciona e deixa comprensivel com uma qualidade menor que o photoshop, mas para imagens de alta resolução, esses otimizadores são inuteis. E tambem o programa eh bom pra quem nao quer perder muito tempo otimizando no photoshop, concerteza ele oferece velocidade e praticidade, coisa que o photoshop nao proporciona. So queria terminar falando que ficou muito bom o topico.

    ResponderExcluir
  16. concordo com você o photoshop realmente é o melhor mas é um programa bem pesado para usar e muita gente prefere editar imagens online ou programas mais leves...

    ResponderExcluir
  17. Hey!

    Eu gostaria de saber se tem alguma postagem aqui que fala sobre como tirar aquelas bordas ou sombras das imagens que colocamos nas postagens...
    Pois como o fundo do meu blog é branco e as imagens que eu uso são do tipo Clip art, adoraria que ficasse tudo camuflado.

    Thank's =)

    ResponderExcluir
  18. veja se no seu html tem post img{... ou algo aparece se tiver isso é o que faz as bordas nas imagens, então apague os trechos border...

    ResponderExcluir
  19. OLÁ, FABIANO!
    TUDO BEM?
    TEU BLOG É UM 10!
    COMO FAÇO PARA COLOCAR APENAS UMA FOTO NO BLOG E AO CLICAR NELA AS DEMAIS ABRIRÃO, QUAL É O SEGREDO.
    AGRADEÇO ANTECIPADAMENTE
    SANDRA MELO

    ResponderExcluir
  20. já fizemos algumas galerias de imagens em nosso sites... mas não é nenhum código especial, na verdade são paginas criadas em nossos outros sites, como por exemplo Mensagens Otimismo - Melhore sua Vida

    clique na imagem... a pagina é outro site (nosso também)

    ResponderExcluir
  21. Gostei das dicas mais acho que ninguém vai querer ficar fazendo isso em cada imagem que for publicar em um blog.

    ResponderExcluir
  22. Felipe
    minha idéia não é fazer isso a cada imagem, mas apenas de vez em quando para ver quais são os elementos mais pesados da pagina... nem sempre são imagens

    ResponderExcluir
  23. Fabiano,boa noite.Hoje fiz minha primeira postagem no blog,mas estou com um problema.Ao postar a foto parece que o conteúdo do blog se move.E na parte de baixo aparece uma faixa igual ao topo do blog.E se escrevo o texto sobre a foto,fica ainda pior.Aparece uma parte branca larga.O que pode estar acontecendo?Estava toda animada para iniciar minhas postagens. Por favor,você pode dar uma olhada? amazingcakery.blogspot.com

    ResponderExcluir
  24. o código da borda da imagem é esse

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 2px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }


    tente apagar isso do seu html e veja se é isso que você queria fazer.

    ResponderExcluir
  25. Fabiano, ficou bacana o novo visual da sua página.Está mais leve.Gostei muito.Bem,fiz o que você falou,mas não mudou nada.O problema ocorre somente na área da postagem.Aparece a faixa rosa igual a do topo do blog.No internet explorer aparece mais larga ainda e parte do rodapé fica nela.
    E tem como tirar aquela linha pontilhada no rodapé da página?Mais uma vez,muito obrigada pela ajuda.

    ResponderExcluir
  26. Ana Cristina
    é bom saber que gostou da mudança, mas ainda vamos fazer varios ajustes, sabe como é .. blog nunca fica pronto.

    sobre o seu blog imagem de fundo está se repetindo

    body {
    font: normal normal 14px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
    color: #666666;
    background: #ffffff url(http://3.bp.blogspot.com/-Kf3Df4h2nUA/T1Ng6hpLWII/AAAAAAAACS0/fBwzLPz1cK8/s0/backgroundcharmanadjesus.jpg) repeat scroll top center;
    padding: 0 0 0 0;
    }

    o jeito de colocar aquelas colunas seria em outro estilo e não no body, veja aqui:

    .main-inner .columns {padding-left: 340px;padding-right: 0px;background-image: url(http://acessoriosparablogs.com.br/template-dicas.jpg);}

    essas são as colunas do nosso blog veja que a imagem tem apenas 6 pixels de altura e se repete pela pagina toda

    http://acessoriosparablogs.com.br/template-dicas.jpg

    então precisaria cortar a imagem de fundo e usar do jeito que falamos

    ResponderExcluir
  27. Fabiano,o que você diz cortar a imagem,seria cortá-la em 3 partes?Digo colocar deste jeito.Vi num comentário aqui no seu blog a pergunta com este código.Se for o caso,não consigo encontrar estes códigos no modelo simple,que é o que estou usando.

    #header-wrapper {
    width:900px;
    background:#000000;
    background-image: url (imagem escolhida) no-repeat;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }

    #outer-wrapper {
    background:#000000;
    background-image: url (imagem escolhida) repeat-y;
    width: 900px;
    margin:0 auto;
    padding:0px;
    text-align:$startSide;
    font: $bodyfont;
    }

    #footer {
    width:900px;
    background:#000000;
    background-image: url (imagem escolhida) no-repeat;
    clear:both;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;

    ResponderExcluir
  28. procure pelos nomes: #header-wrapper

    o restante do ´código não é exatamente igual na pagina editar html do blogger

    ResponderExcluir
  29. Fabiano,não é fácil arrumar a casa(rs).Vou tentar colocar o background desta maneira.Mas quando você fala das colunas,no caso das suas,seriam estas cinza claro?E esse tal de .main-inner... , é onde deve-se colocá-las?E se eu colocar a imagem recortada,preciso fazer usar esse .mai-inner...?Desculpe-me as perguntas tolas.É que não entendo nada de hmtl.Abraço e,mais uma vez,muito obrigada.

    ResponderExcluir