Ao contrário de um site comum, no blog não precisamos criar (e hospedar) uma miniatura para cada imagem adicionada. Isto é feito de forma automática. O editor de texto do Blogger (modo "Escrever"), disponibiliza cinco opções de tamanho para as miniaturas: Pequeno, Médio, Grande, Muito grande e Tamanho original. Cada uma destas opções gera um tamanho diferente para as miniaturas, conforme mostrado abaixo (supondo-se que a imagem tenha o formato 3x4):
Pequeno: Altura = 150px Largura = 200px
Médio: Altura = 240px Largura = 320px
Grande: Altura = 300px Largura = 400px
Muito grande: Altura = 480px Largura = 640px
Tamanho original: Atributos height e width não especificados
E se quisermos adicionar miniaturas com outros tamanhos? Primeiro vamos ver como fica o código HTML de uma imagem inserida em uma postagem através do editor de texto (depois de alternar para o modo "HTML"):
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s1600/sg.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s320/sg.jpg" height="240" width="320" /></a></div>
É claro que podemos alterar os valores dos atributos height e width, em destaque acima, mas, como sabemos, este não é o procedimento mais adequado para isso. Se diminuirmos o tamanho da miniatura através destes atributos ela vai aparecer menor na tela do navegador mas continuará com o mesmo tamanho de antes (verifique as propriedades da miniatura e confira), ou seja, o tráfego de dados para carregar a miniatura continua o mesmo, enquanto poderia ser menor. Se aumentarmos os valores de height e width, a miniatura será exibida maior do que realmente é, diminuindo, assim, a qualidade. Então, como fazer para mantermos o equilíbrio entre a "leveza" e a qualidade da miniatura?
Na verdade, podemos, e devemos, alterar o valores dos atributos height e width mas não somente eles! Observe o código novamente:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s1600/sg.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s320/sg.jpg" height="240" width="320" /></a></div>
Veja que existem dois links: o primeiro é o URL da imagem que é carregada quando o leitor clica na miniatura (imagem no tamanho original), o segundo é o URL da própria miniatura. Note que eles são praticamente iguais, sendo a única diferença a parte destacada em azul. Mas o que significa esses números, s1600 e s320? São os tamanhos, em pixels, das imagens em seus lados maiores. Quando alteramos os valores de height e width, devemos alterar também este número no link da miniatura (o segundo link), de modo que esse número (s200, s320, s400, s640 ou s1600, este último, no caso da miniatura estar no tamanho da imagem original) coincida com o valor da altura ou da largura (o que for maior). Podemos usar qualquer número. Com s96, por exemplo, o código ficaria assim:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s1600/sg.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s96/sg.jpg" height="72" width="96" /></a></div>
Note que esta é a condição ideal: o maior valor, que neste caso é a largura (width="96"), coincide com o número contido no link (s96).
Algo semelhante pode ser feito com o link da imagem original (s1600). O número 1600 significa que a imagem será carregada com 1600 pixels em seu lado maior, certo? Nem sempre. Significa que a imagem será carregada no seu tamanho original mas com um limite de 1600 pixels. Em outras palavras, se a imagem que adicionamos era maior que 1600 pixels, então ele será carregada com 1600 pixels, mas se era menor, será carregada no tamanho original. Se alterarmos o valor s1600 para s1000, ela será carregada com 1000 pixels mesmo que tenha 1600. Se ela tinha apenas 800 pixels, ela será carregada com 800 pixels, indiferentemente de no link estar escrito s1600.
E se quisermos que a imagem seja carregada com um tamanho maior que 1600 pixels? Um tamanho de 1600 pixels é suficiente para a maioria dos casos mas, em blogs de fotos de alta qualidade, um tamanho maior pode ser necessário. Como sabemos, as imagens adicionadas nas postagens do blog ficam hospedadas nos Álbuns do Picasa em seu tamanho original até o limite de 2048 pixels em seu lado maior, ou seja, se a imagem é maior que 2048 pixels, ela é redimensionada para 2048 pixels. Portanto, podemos alterar o valor s1600 para qualquer valor entre s1 e s2048. Vejamos alguns exemplos nos links abaixo:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s64/sg.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s128/sg.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s256/sg.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s512/sg.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s1024/sg.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-dQTMDH-2M1qd-MPqdjVt1J_l4Nj2W1I2njGXF277IjgaQIhHH6Z7HlMa6p4QRxjf-yDA1l3bUL08WeBRwzjFjUJ5IctOtRxwqBWo0c_q7bw3zW0_PSPOgTwJAvYMdPRvi_mFXHYPUo/s2048/sg.jpg
Como percebemos, apenas o tamanho da imagem é diferente em cada link. Também podemos verificar nas propriedades da imagem que o número de pixels em seu lado maior coincide com o número destacado em cada link.
Utilizei nos exemplos valores múltiplos de dois mas, na prática, podemos utilizar qualquer valor entre 1 e 2048.
Tudo isso parece não ter muita importância mas imagine que seu blog tenha centenas de imagens. As miniaturas podem estar visualmente pequenas (240 x 320, por exemplo) mas os seus links podem estar com s1600 (isso acontece frequentemente) tornando o blog desnecessariamente lento para carregar. Otimizar o tamanho das miniaturas e das imagens pode resolver esse problema.
Excelente dica! Obrigado Juarez! Muito útil para o que procurava. Abs
ResponderExcluirOlá Juarez, congratulações pela dica! Sempre procurei o significado desse número que é gerado pelo link das imagens. Sabe me dizer, como podemos alinhar imagens no Blogger via CSS?
ResponderExcluirAbraço.
Se entendi sua pergunta, você quer que as imagens sejam alinhadas horizontalmente (formando linhas) e verticalmente (formando colunas) sem o uso de tabelas, é isso? Se for, experimente o código abaixo. Só funciona bem com imagens do mesmo tamanho. Se suas imagens possuem tamanhos diferentes, uma possǘel solução seria o uso de colunas.
Excluir<style>
img{
margin:10px;
vertical-align:middle;
}
</style>
<div>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
<a href="URL DA IMAGEM"><img alt="" height="150" src="URL DA MINIATURA" width="200" /></a>
</div>
Srº Juarez,
ExcluirAgradeço pelo código que disponibilizou! Sabe me dizer se fica responsivo na versão móvel?
Não fiz o teste mas acredito que sim.
ExcluirNão fiz o teste mas acredito que sim.
Excluirexcelente blog, vai me ajudar em meus serviços de SEO obrigada, valeu mesmo!
ResponderExcluir