Nem toda a gente tem a sorte de ter ligações com 100 ou 200 Megabits, ou 4G, para aceder à internet; e nos casos em que se tratam de sites predominantemente com imagens, torna-se ainda mais recomendável encontrar formas de agilizar o processo de carregamento - como faz o Pinterest ao mostrar backgrounds coloridos com a cor das imagens que serão posteriormente apresentadas.
Este é um artigo destinado aos web developers, e a todos os que sintam curiosidade em optimizar uma página HTML. Há muito que na web se utilizam técnicas de carregar imagens de tamanho reduzido e que possam ser apresentadas rapidamente, enquanto as imagens finais de maior qualidade estão a ser carregadas. Na sua vertente mais simples isso pode ser feito apresentando unicamente um "placeholder" a indicar que a imagem está a ser carregada; noutros casos pode ser feito apresentando thumbnails das próprias imagens a apresentar.
O problema é que, mesmo tratando-se de thumbnails, poderemos estar a descarregar dezenas (ou centenas) de kilobytes, e daí esta técnica alternativa e mais eficiente de apresentar apenas uma imagem - que tem a dimensão de um único pixel 1x1 - mas que apresenta a cor dominante da imagem final.
É uma técnica bem curiosa, e que também recorre a GIFs codificados directamente na página por forma a evitar pedidos adicionais externos, representando apenas umas dezenas de bytes por cada imagem.
E, para os que não se importarem de ir um pouco mais longe para obterem um efeito mais bonito ao estilo do que o Medium faz:
Neste caso troca-se o pixel 1x1 por um micro-thumbnail de 3x3 pixeis, ao qual é aplicado um efeito de "blur" de modo a criar uma imagem temporária que se aproxima mais da imagem final.
É um tema que me é muito querido, pois nos tempos da web "do século passado", andava eu a criar componentes CGI (em Delphi!) para redimensionamento e recompressão de imagens dinamicamente, permitindo fazer algo semelhante (podia pedir ao servidor uma imagem com qualidade de apenas "x%" e com as dimensão especificadas, de modo a ficar com um thumbnail em tempo real para mostrar enquanto a imagem final era carregada.) Outros tempos... :)
Como se utiliza esta técnica se não souberes as cores da imagem a carregar?
ResponderEliminarSe sabes qual a imagem a carregar, saberás qual a imagem, e as suas cores. :)
Eliminar(Ter em conta que isto é algo para ser feito do lado do "servidor", apenas como forma para agilizar aquilo que o visitante vai ver na sua página, no caso de ligações lentas.)
Imagina que sei que é imagem de um produto mas não sei que produto é! Em páginas dinâmicas é difícil prever as cores das imagens carregadas!
EliminarSe sabes a imagem que vais carregar, o servidor sabe "instantaneamente" qual a cor dominante da mesma, usando ferramentas como as que são referidas na fonte do artigo (GraphicsMagick, imagick, etc.)
EliminarA questão é que se a página com as imagens estiver a ser servida pelo servidor, pode fazer logo embed de um GIF "codificado" que dispensa acessos externos; se for uma página mais dinâmica onde seja o lado do cliente a fazer novos pedidos de imagens, faria primeiro um pré-pedido rápido do "micro-thumbnail", enquanto aguardava pela imagem completa.
Na prática é idêntico ao sistema dos thumbnails, mas mais eficiente por ser "alguns bytes".