As imagens afetam o tempo de carregamento de um site. Quanto mais rápido o site, melhor a experiência do usuário, levando a conversões e lucros. Sempre que contratar uma agência de criação de sites certifique-se de que a otimização do site está inclusa no pacote.
Os gerentes e proprietários de empresas querem que as imagens de seus sites sejam carregadas rapidamente, mesmo em dispositivos móveis. Mas como eles fazem isso? Em “ O caso para otimizar o desempenho da imagem ”, meu artigo na semana passada, expliquei a importância de imagens leves no sucesso de um site.
Nesta parte, vou oferecer sugestões para otimizar imagens. O objetivo é criar uma experiência de usuário atraente sem prejudicar o desempenho.
Elimine Imagens Desnecessárias
Em 2019, uma página da Web típica pode solicitar entre 28 e 32 imagens quando é carregada, de acordo com um relatório do Arquivo HTTP . Essas imagens podem ser necessárias.
Por exemplo, pode-se esperar que várias imagens apareçam em uma página de categoria de produto de um site de comércio eletrônico. Essas fotos são geralmente críticas.
Escrevendo para o UX Planet, um diário de experiência do usuário no Medium, Ainsley Fagerström descreveu os tipos de imagens que deveriam estar em um site. Parafraseando e adicionando à sua lista, poderíamos dizer imagens necessárias:
Explique ou esclareça,
Evoque emoções para comunicar algo,
Faça um ponto relacionado ao outro conteúdo,
Ajudá-lo a vender.
Os tipos de imagens que podem ser eliminados podem incluir:
Fotos de texto,
Imagens decorativas,
Imagens conservadas em estoque que não comunicam algo.
Há também dados que indicam que ter menos imagens em uma página da Web leva a mais vendas.
“Em uma página típica de varejo, elementos gráficos como favicons, logotipos e imagens de produtos podem facilmente incluir até dois terços (em outras palavras, centenas de kilobytes) do peso total de uma página”, escreveu Daniel An e Pat Meenan em um 2016 Pense com o artigo do Google . “O resultado: cargas de página cumulativamente lentas durante uma sessão. Na verdade, … sessões que converteram usuários tiveram 38% menos imagens que sessões que não foram convertidas. ”
Um relatório de 2016 indica que páginas relativamente complexas e lentas (que geralmente incluem muitas imagens) são convertidas em uma taxa mais baixa do que as páginas mais rápidas com menos imagens.
Um relatório de 2016 indica que páginas relativamente complexas e lentas (que geralmente incluem muitas imagens) são convertidas em uma taxa mais baixa do que as páginas mais rápidas com menos imagens.
Imagens de carga preguiçosa
Quando uma página da Web típica é carregada, ela solicita todas as imagens listadas na marcação da página, mesmo quando muitas dessas imagens estão fora da tela e só aparecem quando ou quando o usuário desliza e rola a página.
O carregamento preguiçoso de imagens é o processo de carregar uma imagem apenas quando é necessário. Quando uma página da Web é carregada pela primeira vez, ela solicita apenas as imagens que ficarão imediatamente visíveis na tela. Imagens subseqüentes carregam quando o usuário se move para baixo.
O arquivo HTTP relatou que os kilobytes médios de dados de imagem transferidos de uma página da Web móvel poderiam cair de 843,5 KB para 426,7 KB quando o carregamento lento de imagens fora da tela. Isso pode reduzir o tempo de carregamento da página inicial em 25% em alguns casos.
Uma variação de imagens de carregamento lento injeta uma versão de baixa resolução de uma imagem inicialmente e a atualiza com uma versão de alta qualidade depois que um usuário pode vê-la. Essa abordagem também reduz significativamente o tempo que uma página demora para carregar.
O carregamento lento normalmente requer JavaScript. Uma empresa pode fazer seus desenvolvedores escreverem um script de carregamento lento feito sob medida para as necessidades da empresa ou usar qualquer um dos vários scripts disponíveis.
Em um artigo sobre a redução de segundos do tempo de carregamento inicial de um site, o colaborador Hamlet Batista recomendou o script LazyLoad de Andrea Verlicchi . Katie Hempenius, engenheira de software do Google, recomenda usar o script Lazysizes de Alexander Farkas . Ambas as soluções são exemplos dos muitos scripts para carregamento lento.
Comprimir Imagens
Os formatos rasterizados – como .jpg, .png, .webp e .gif – compõem muitas das imagens em uma página da Web típica. Em alguns casos, essas imagens podem ser compactadas para que sejam carregadas mais rapidamente, sem uma diferença perceptível na qualidade.
As imagens comprimidas podem parecer quase idênticas às imagens não comprimidas muito mais pesadas. A imagem à esquerda é de 169,5 KB. A imagem à direita é muito menor, 39,5 KB, mas é semelhante em qualidade. Foto: Robert Bye.
As imagens comprimidas podem parecer quase idênticas às imagens não comprimidas muito mais pesadas. A imagem à esquerda é de 169,5 KB. A imagem à direita é muito menor, 39,5 KB, mas é semelhante em qualidade. Foto: Robert Bye.
Pode-se comprimir as imagens manualmente usando softwares como o Adobe Photoshop , ImageOptim ou Squoosh , para um nome com poucas opções. Ou pode-se otimizar automaticamente através de várias soluções, incluindo redes de entrega de conteúdo, interfaces de programação de aplicativos e scripts ou pacotes.
Este exemplo da Imgix, uma CDN de otimização de imagem, mostra uma foto original de 3,5 MB reduzida para 26,36 KB.
Este exemplo da Imgix, uma CDN de otimização de imagem, mostra uma foto original de 3,5 MB reduzida para 26,36 KB.
Em um artigo sobre otimização de imagens, o site do Google Developers recomendou várias soluções.
CDNs de otimização de imagem:
Imgix ,
Cloudinary ,
Akamai Image Manager ,
ImageEngine .
APIs de otimização de imagem:
Kraken.io ,
Imagify ,
ShortPixel ,
Fast Image Optimizer ,
TinyPNG .
Imagine scripts de otimização, pacotes e ferramentas de linha de comando:
Imagem no CLI ,
Imagem no pacote npm ,
Guetzli ,
MozJPEG ,
Pngquant ,
Zopfli ,
Gifsicle ,
SVGO .
Carregue o tamanho apropriado
Entregue a imagem de tamanho adequada para a tela de um usuário. Os pixels desperdiçados adicionam peso desnecessário.
Em seu excelente artigo sobre otimização de imagem, o desenvolvedor Ilya Grigorik aponta que as imagens rasterizadas não compactadas são compostas de pixels e que pesam 4 bytes cada na carga inicial.
Assim, uma imagem rasterizada não compactada de 100 x 100 pixels é 40.000 bytes (10.000 x 4). Para converter bytes em kilobytes, divida por 1.024. Então, 40.000 bytes funcionam com cerca de 39 KB.
Imagine que você tenha uma imagem que será exibida na tela em 360 x 200 pixels. Nesse tamanho, a imagem rasterizada não comprimida seria de 72.000 pixels. Cada um desses pixels requer 4 bytes, para um total de 288.000 bytes ou cerca de 281 KB não compactados.
Uma imagem superdimensionada em, digamos, 396 x 220 pixels seria muito mais pesada. Especificamente, a imagem de 396 x 220 ocuparia 87.120 pixels. São 15.120 pixels extras (87.120 – 72.000). Esses pixels desperdiçados ainda precisam de 4 bytes cada para um total de 60.480 bytes ou 59 KB.
Este exemplo é para imagens rasterizadas não compactadas. E há muitas maneiras de compactar o tamanho da imagem em bytes sem afetar sua resolução de pixels. Independentemente disso, sirva a imagem de tamanho adequado sempre que possível.