Implementamos a tecnologia de processamento de imagens que dimensiona as imagens de acordo com o tamanho do contêiner de layout e as converte em um formato de última geração - WebP.
O Adaptive Image Loading está ativo em todos os sites da Tilda por padrão, não sendo necessário fazer nada para ativá-lo. Testamos a tecnologia por vários meses e estamos empolgados em contar a você sobre ela.
Vamos dar uma olhada em todas as tecnologias usadas para otimizar o carregamento de imagens nos sites da Tilda:
Carga lenta
O Lazy Load está ativo no Tilda há muito tempo. As imagens são carregadas gradualmente à medida que o visualizador rola a página para baixo, e não todas de uma vez.
A imagem está totalmente carregada porque está na tela
O carregamento começa quando a imagem se aproxima da tela em 700 px
A imagem ainda não começou a ser carregada
1. A imagem está totalmente carregada porque está na tela
2. O carregamento começa quando a imagem se aproxima da tela em 700 px
3. A imagem ainda não começou a ser carregada
CDN
CDN, ou Content Delivery Network, é uma rede de servidores implantada em todo o mundo. Ela escolhe o servidor mais próximo da localização do visitante e ajuda a fornecer imagens mais rapidamente. Por exemplo, se um visualizador estiver localizado em Berlim, ele receberá uma imagem diretamente da Alemanha, e não dos EUA.
NOVO
Suporte a WebP
O Tilda converte automaticamente todas as imagens de sites para WebP. Esse formato de última geração permite a compactação que reduz o tamanho da imagem em até 35% em comparação com o JPEG, sem perda de qualidade. Você não precisa fazer upload de imagens para o seu site no formato WebP, o Tilda as converterá para você.
JPEG — 1680x1120px, 166 Kb
WebP - 1680х1120px, 78,6 Kb
8,9 Mb
2,8 Mb
Comparamos a diferença de tamanho da imagem antes e depois da otimização usando esse modelo. O tamanho total das imagens sem o carregamento adaptativo de imagens é de 8,9 Mb. O tamanho total das imagens depois de ativar o carregamento adaptável de imagens é de 2,8 Mb
O tamanho total das imagens é reduzido em 3 vezes após a otimização
A maioria dos navegadores modernos, como Chrome, Opera, Firefox e outros, é compatível com WebP. Enquanto o site está sendo carregado, o script verifica se o navegador é compatível com o formato e, se for compatível, solicita imagens WebP do servidor. Se não for compatível, ele fornecerá imagens originais como foram carregadas, em JPEG ou PNG. A conversão para AVIF, outro novo formato de imagem que oferece uma redução ainda maior do tamanho do arquivo, está em andamento.
NOVO
Redimensionamento adaptativo de imagens
A tecnologia detecta as dimensões do navegador e do contêiner de layout e, em seguida, solicita imagens otimizadas do servidor.
Imagine que você tenha carregado uma foto de 1680 px de largura em um bloco com várias imagens. O tamanho de cada contêiner de imagem é de 450 x 300 px. Portanto, o visitante não receberá uma foto original, mas uma foto em escala de acordo com as dimensões do contêiner.
Imagine que você tenha carregado uma foto de 1680 px de largura em um bloco com várias imagens. O tamanho de cada contêiner de imagem é de 450 x 300 px. Portanto, o visitante não receberá uma foto original, mas uma foto em escala de acordo com as dimensões do contêiner.
JPEG — 1680x1119px, 252 Kb
WebP- 450x300px, 23,5 Kb
Suponha que um visitante acesse um site a partir de um telefone. Para carregar a capa de um site nesse dispositivo, o script solicitará uma imagem cortada na resolução correta adaptada à tela.
JPEG —1680x1120px, 372 Kb
WebP — 560x1120px, 103 Kb
O sistema inteligente está constantemente analisando o tráfego do site no Tilda. O script prepara antecipadamente imagens otimizadas para os dispositivos e navegadores mais usados. Esse método é mais flexível do que o redimensionamento em tempo real: às vezes é mais rápido fazer o download de uma imagem original do que redimensionar e fazer o download de uma imagem otimizada.
NOVO
Monitores Retina e conexão lenta com a Internet
Se um visitante usar uma tela com maior densidade de pixels, o script reconhecerá isso e solicitará uma imagem de alta resolução do servidor. Dessa forma, as imagens aparecerão nítidas nos dispositivos Retina.
No entanto, se a conexão for lenta (se um visitante estiver navegando do interior, por exemplo), o sistema solicitará uma imagem menor. Isso evitará que a velocidade de carregamento da página diminua.
No entanto, se a conexão for lenta (se um visitante estiver navegando do interior, por exemplo), o sistema solicitará uma imagem menor. Isso evitará que a velocidade de carregamento da página diminua.
Em alguns casos, o Adaptive Image Loading pode não funcionar. Há vários motivos para isso:
1
Você desativou o Lazy Load nas configurações do seu site.
2
Você desativou o Lazy Load para um elemento em Zero Block.
3
Uma versão otimizada de uma imagem ainda não foi preparada. Isso acontece se você tiver acabado de carregar uma nova imagem no seu site ou se estiver fazendo login em um dispositivo ou navegador pela primeira vez.
4
Seu navegador não é compatível com WebP. Encontre a lista de navegadores que suportam o formato aqui.
5
A diferença entre o tamanho da imagem original e sua versão otimizada é insignificante; nesse caso, o sistema não comprime nem recorta a imagem.
O Adaptive Image Loading é uma das tecnologias de otimização mais significativas que implementamos no Tilda. Continuamos trabalhando arduamente para acelerar os sites criados na plataforma. Fique atento a mais atualizações no blog do Tilda, em sua conta pessoal e nas redes sociais.
