Melhorar Desempenho do Blog – Otimizar Imagens e Fotos - Dicas para Blogs
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.
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:
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.
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.
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.
Amanda 21 fevereiro, 2011 16:48
eu ainda não conheci os sites... achei bem legal
Marcos 21 fevereiro, 2011 17:07
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?
Fabiano Roberto 21 fevereiro, 2011 17:11
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.
Jeferson Santos 21 fevereiro, 2011 17:43
É possivel ter dominio (.com ou .com .br ) gratis ?
Fabiano Roberto 22 fevereiro, 2011 14:55
acho que não é possivel ter um dominio .com ou .com.br gratis
Jeferson Santos 22 fevereiro, 2011 15:33
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
Fabiano Roberto 22 fevereiro, 2011 15:45
veja esse código para fazer Como Colocar Submenu no Blog
Ian Szot 22 fevereiro, 2011 19:30
fabiano pq vc nao posta os arquivos que te mandei?
Unknown 22 fevereiro, 2011 21:13
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
Fabiano Roberto 23 fevereiro, 2011 14:03
quais arquivos você me mandou?.... não estou lembrado de receber nada para fazer postagem
Unknown 24 fevereiro, 2011 02:07
nao estou conseguindo salvar a imagem no 1º site...ta salvando como html ;/
e no segundo nao estou conseguindo ver a imagem ;/
Unknown 24 fevereiro, 2011 02:20
consegui rs
vlww aee pelas dicas
Luks 08 março, 2011 13:32
parabéns pela dia !
Nisto eu Acredito ®: 08 março, 2011 14:31
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.
www.obomdoacupe.com 17 março, 2011 18:33
Reduzindo o peso das imagens, o carregamento da pagina pode diminuir 80% o tempo de espera. é muito importante para o webmasters.
JoaoF 20 março, 2011 01:03
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.
Alfredo Beleza 20 março, 2011 18:46
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.
Anônimo 01 abril, 2011 00:20
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.
Fabiano Roberto 01 abril, 2011 13:08
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...
Jéssica Risi 05 junho, 2011 05:34
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.
Fabiano Roberto 05 junho, 2011 14:06
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...
Escola 02 julho, 2011 16:52
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.
Fabiano Roberto 02 julho, 2011 19:13
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)
Felipe 07 julho, 2011 20:32
Gostei das dicas mais acho que ninguém vai querer ficar fazendo isso em cada imagem que for publicar em um blog.
Fabiano Roberto 08 julho, 2011 14:12
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
Ana Cristina 03 março, 2012 21:35
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
o código da borda da imagem é esse
tente apagar isso do seu html e veja se é isso que você queria fazer.
Ana Cristina 04 março, 2012 10:03
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.
Fabiano Roberto 04 março, 2012 13:47
é 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
font: normal normal 14px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
background: #ffffff url(http://3.bp.blogspot.com/-Kf3Df4h2nUA/T1Ng6hpLWII/AAAAAAAACS0/fBwzLPz1cK8/s0/backgroundcharmanadjesus.jpg) repeat scroll top center;
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
Ana Cristina 04 março, 2012 16:25
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.
background-image: url (imagem escolhida) no-repeat;
background-image: url (imagem escolhida) repeat-y;
Fabiano Roberto 05 março, 2012 13:02
procure pelos nomes: #header-wrapper
o restante do ´código não é exatamente igual na pagina editar html do blogger
Ana Cristina 05 março, 2012 14:51
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.