Como eu estava dizendo neste post anterior , durante o desenvolvimento de interiordelight.ro aprendi alguns truques novos que gostaria de compartilhar com vocês aqui. Um deles é a ideia de usar imagens redimensionadas dinamicamente postadas anteriormente no Picasa / Google +.
Visto que interiordelight.ro é principalmente um “site de portfólio”, naturalmente temos um grande número de imagens de alta qualidade.
Normalmente prefiro usar um serviço pago e confiável como o Amazon S3 para armazenamento de imagens, mas neste caso decidi tentar algo diferente.
Como um dos objetivos do novo design era torná-lo compatível com dispositivos móveis e, ao mesmo tempo, ser rápido, “ágil” e apresentar imagens de alta qualidade, pensei em usar imagens armazenadas no Google+ (o antigo Picasa, na verdade) por causa de um interessante recurso não documentado que eles têm: dependendo da URL de solicitação que você está usando, você pode obter a imagem original em vários tamanhos e seus servidores irão redimensioná-la dinamicamente, cortá-la , servi-la e instruir o navegador a armazenar o resultado em cache por um dia. E tudo isso incrivelmente rápido (cerca de 100ms).
O que significa que você pode usar praticamente a mesma fonte para gerar miniaturas e conteúdo para desktops, tablets e telefones de vários tamanhos, sem ter que fazer qualquer tipo de processamento ImageMagick .
Aqui está um exemplo:
Imagem original, url que termina com /s0/...jpg:
Imagem redimensionada, url que termina com /w300/...jpg:
Miniatura cortada, url que termina com /s100-c/...jpg:
(vá em frente, inspecione as imagens acima para ver o que quero dizer)
Aparentemente, os googleusercontentservidores permitem uma variedade de parâmetros, mas como esse recurso não está documentado em nenhum lugar, você terá que experimentar por si mesmo e se decidir usá-lo, você o fará por sua própria responsabilidade e eu sugiro ficar de olho tudo, pois eles podem mudar esse comportamento em algum momento.
Como não há realmente nenhuma maneira de saber “a priori” todos os tamanhos de dispositivos possíveis e não quero abusar do processamento e armazenamento de imagens do Google, também decidi empregar um pequeno truque em um gerenciador de depuração para solicitar apenas um número finito de dimensões possíveis. Por exemplo, o código a seguir refere-se à galeria de imagens em tela cheia “deslizável” que temos em todas as páginas do projeto:window.onresize
...
# Swiper images
if $('.swiper-container').hasClass 'active'
width = Math.ceil($win.width() / 100) * 100
height = Math.ceil($win.height() / 100) * 100
for item in $('.swiper-img')
$item = $(item)
srcParts = $item.attr('src').split '/'
srcParts[srcParts.length - 2] = "w#{width}-h#{height}"
$item.attr 'src', srcParts.join '/'
...Basicamente, o que estou fazendo é que, quando a página carrega (e mais tarde nos resizeeventos), estou recalculando os tamanhos de origem da imagem para que esteja sempre carregando imagens com tamanho múltiplo de 100px, um pouco maior do que o tamanho da janela atual ; ou seja, se window.width = 768px, carregue a imagem com largura = 800px.
Parece um pouco complicado, mas não é, e sempre acabamos com o usuário vendo a melhor qualidade disponível, dado o tamanho / orientação da tela do dispositivo, sem ter que carregar a maior imagem possível .
Por enquanto é isso, mas em breve haverá mais dicas e truques como este, portanto, fique ligado! … 🙂