Redimensiona e corta as imagens via URL no Blogger (e Google+)

O Blogger do Google poderá não ser a mais versátil (ou acarinhada) plataforma de blogging existente, mas tem alguns pequenos detalhes técnicos que são curiosos, e que podem ser extremamente úteis para quem se preocupa com a eficiência das suas páginas e sites.

Quando se faz um upload de uma imagem para o Blogger (ou Google+, ou outros serviços do Google), a mesma fica com um endereço algo críptico, do estilo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnYKz__4RgxhmZCw7a4XC1zXezVw7o4KbXXy9kOrDjd-vKMzudZXUSDDZyjfvL7biIucind86takslmYe-PnvEU7luYrak0Tz9e7aI29S3S3IKRZ5_F-PxXzHu0wgC7QMCMAf1yuFbFk/s1600/landscape.jpg

Ora, a parte que nos interessa é precisamente aquela que antecede o nome da imagem no final, e que por norma contém um "s1600". E como vamos ver, este é apenas um parâmetro que podemos alterar ao nosso gosto para obter diversos resultados, como redimensionar a imagem, fazer crops, ou até alterar a sua qualidade.


Alterar o tamanho da imagem (s/w-h)

Aquele s refere-se a "size", e s1600 diz-nos qual é a dimensão máxima da imagem que queremos. Pelo que se alterarmos o número para s400 (por exemplo)... o resultado é uma imagem com 400 pixeis de largura:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnYKz__4RgxhmZCw7a4XC1zXezVw7o4KbXXy9kOrDjd-vKMzudZXUSDDZyjfvL7biIucind86takslmYe-PnvEU7luYrak0Tz9e7aI29S3S3IKRZ5_F-PxXzHu0wgC7QMCMAf1yuFbFk/s400/landscape.jpg


Atenção que isto é diferente do que simplesmente apresentar a imagem original com uma dimensão de 400 pixeis - aqui temos como resultado uma imagem que tem fisicamente uma resolução de 400 pixeis de largura (ou altura, se tiver uma orientação vertical), e que terá um tamanho bastante mais reduzido que a original. Neste caso, a imagem original tem um tamanho de quase 800KB, esta versão redimensionada ocupa apenas 44KB... pelo que facilmente se percebem as vantagens.

Esta simples alteração permite também corrigir um bug "estúpido" no Blogger. Actualmente, se fizerem o upload de uma imagem com resolução elevada, a página irá descarregar a imagem original mesmo que seleccionem que a querem mostrar em tamanho pequeno. Assim, bastará um salto à edição HTML e alterar manualmente o S1600 do URL da imagem para algo mais reduzido, como s600 / s400 / s200 / etc. (ter atenção que têm que usar um "s" em mínusculas.)


Em alternativa, em vez do parâmetro "s" podemos também usar parâmetros para a largura e altura máxima individualmente, usando o formato "w400-h200" (onde deverão alterar os valores 400/200 para os que quiserem.)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnYKz__4RgxhmZCw7a4XC1zXezVw7o4KbXXy9kOrDjd-vKMzudZXUSDDZyjfvL7biIucind86takslmYe-PnvEU7luYrak0Tz9e7aI29S3S3IKRZ5_F-PxXzHu0wgC7QMCMAf1yuFbFk/w400-h200/landscape.jpg


Fazer crop da imagem (-c / -p)

Se quiserem obter uma imagem em formato quadrado, bastará aplicar o parâmetro -c a seguir à dimensões:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnYKz__4RgxhmZCw7a4XC1zXezVw7o4KbXXy9kOrDjd-vKMzudZXUSDDZyjfvL7biIucind86takslmYe-PnvEU7luYrak0Tz9e7aI29S3S3IKRZ5_F-PxXzHu0wgC7QMCMAf1yuFbFk/s200-c/landscape.jpg


Podem adicionalmente aplicar à frente do -c parâmetros para definir a largura ou imagem da imagem cortada, como:

•  s400-c-w50 (redimensionada para 400px e cortada com uma largura de 50 pixeis)
•  s400-c-h50 (redimensionada para 400px e cortada com uma altura de 50 pixeis)

É muito provável que exista um parâmetro adicional que permita ajustar o offset de corte, mas infelizmente não o consegui descobrir.


Optando pelo -p, o resultado é um crop que fica ligeiramente desfasado (pelo menos na imagem que testei):

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnYKz__4RgxhmZCw7a4XC1zXezVw7o4KbXXy9kOrDjd-vKMzudZXUSDDZyjfvL7biIucind86takslmYe-PnvEU7luYrak0Tz9e7aI29S3S3IKRZ5_F-PxXzHu0wgC7QMCMAf1yuFbFk/s200-p/landscape.jpg


Mudar a qualidade/compressão da imagem (-l / -v)

Se desejarem, também podem usar o parâmetro - l ("L minúsculo") para ajustar o nível de compressão/qualidade de uma imagem, de -l1 a -l100. E que podem usar em combinação com os outros parâmetros anteriores, como mostram os seguintes links:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnYKz__4RgxhmZCw7a4XC1zXezVw7o4KbXXy9kOrDjd-vKMzudZXUSDDZyjfvL7biIucind86takslmYe-PnvEU7luYrak0Tz9e7aI29S3S3IKRZ5_F-PxXzHu0wgC7QMCMAf1yuFbFk/s400-c-l1/landscape.jpg (nível 1 - 3KB)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnYKz__4RgxhmZCw7a4XC1zXezVw7o4KbXXy9kOrDjd-vKMzudZXUSDDZyjfvL7biIucind86takslmYe-PnvEU7luYrak0Tz9e7aI29S3S3IKRZ5_F-PxXzHu0wgC7QMCMAf1yuFbFk/s400-c-l100/landscape.jpg (nível 100- 140KB)


O parâmetro -v também afecta a compressão da imagem, mas parecendo aplicar-se mais sobre a compressão "vertical" da imagem, e com escala invertida: -v1 para a melhor qualidade / -v100 para a maior compressão.


Outros parâmetros

Infelizmente, não consegui descobrir nenhuma página oficial do Google a revelar todas as possibilidades que serão possíveis fazer, pelo que ficam apenas algumas indicações de outros potenciais parâmetros, descobertos à custa de tentativa e erro e pesquisas na net:

• -d (causa o download imediato da imagem pelo browser)
• -m0 (efeito desconhecido - resulta numa imagem de alerta)
• -o (supostamente aplicaria um overlay com um símbolo de "play")

Outros parâmetros resultam em erros de URL, outros parecem não ter efeito visível (tentei experimentar de "a" a "z", e também com números e letras adicionais - mas haverão alguns que poderão funcionar apenas com conjunto com outros, etc. etc.)

De qualquer forma, os de redimensionamento e mudança da qualidade serão os mais importantes, sendo que no crop só faltaria descobrir os parâmetros de offset para o tornar mais útil. Se por acaso souberem ou descobrirem... avisem! :)