Um guia para otimizar imagens para dispositivos móveis

( Este é um artigo patrocinado. ) Você sabe como é fundamental construir sites que carregam rapidamente. Basta que uma página carregue um segundo a mais para começar a perder visitantes e vendas. Além disso, agora que o Google tornou a indexação mobile-first o padrão, você realmente não pode deixar nenhuma otimização de desempenho cair no esquecimento, com o quão difícil pode ser tornar seu site móvel tão rápido quanto seu desktop.

O Google leva muitos fatores em consideração ao classificar um site e os visitantes levam em consideração alguns fatores ao decidir explorar um site. Na interseção dos dois está a velocidade do site .

Não deve ser surpresa que as imagens causem muitos dos problemas que os sites têm com a velocidade. E enquanto você sempre pode apenas cortar a gordura e construir sites mais minimamente projetados e centrados em conteúdo, por que comprometer?

As imagens são uma força poderosa na web.

As imagens bem escolhidas não apenas melhoram a estética de um site, mas também facilitam o consumo de conteúdo pelos visitantes. Claro, também existem os benefícios de SEO das imagens.

Então, hoje, vamos nos concentrar em como você ainda pode projetar com quantas imagens quiser sem diminuir a velocidade do seu site. Isso exigirá que você atualize sua estratégia de otimização de imagem e adote uma ferramenta chamada ImageKit, mas não deve exigir muito trabalho para colocar esse novo sistema em funcionamento.

A necessidade de uma estratégia de otimização de imagem para dispositivos móveis

De acordo com o arquivo HTTP:

• O tamanho médio de um site de desktop em 2019 é de 1.939,5 KB .
• O tamanho médio de um site para celular em 2019 é de 1.745,0 KB .

Se não controlarmos esse crescimento, será impossível atender às demandas do consumidor e do Google quando se trata de fornecer sites rápidos. Isso ou teremos que ficar muito bons em otimizar a velocidade.

Falando em velocidade, vamos ver o que o HTTP Archive tem a dizer sobre o peso da imagem.

Como está hoje:

• O tamanho médio das imagens no desktop é de 980,3 KB do total de 1.939,5 KB.
• O tamanho médio das imagens em dispositivos móveis é de 891,7 KB do total de 1.745,0 KB.

Conclusão: as imagens adicionam muito peso aos sites e consomem muita largura de banda. E embora esses dados mostrem que o tamanho médio das imagens no celular é menor do que no desktop, a proporção de imagens para o site é um pouco maior.

Dito isto, se você tiver a estratégia de otimização de imagem correta, isso pode ser facilmente remediado.

Aqui está o que essa estratégia deve implicar:

1. Dimensione suas imagens corretamente

Há muitas tarefas tediosas que você teria que lidar sem as automações corretas. Como redimensionar suas imagens.

Mas você tem que fazer isso, certo?

Digamos que você use o Unsplash para obter várias imagens para um site em que está trabalhando.

Ao contrário dos repositórios de ações premium, onde você pode escolher em que tamanho ou formato de arquivo você baixa o arquivo, você não tem escolha aqui.

Assim, você baixa a imagem e quaisquer outras que precisar. Você tem a opção de usar a imagem como está ou redimensioná-la manualmente. Depois de observar o tamanho do arquivo e as dimensões da imagem, você percebe que seria uma boa ideia redimensioná-lo.

Esta imagem em particular foi exportada como um arquivo de 3,6 MB e uma imagem de 5591×3145 px. Isso é muito grande para qualquer site.

Não há motivo para fazer upload de imagens com mais de 1 MB - e isso é até empurrar. Quanto às dimensões? Bem, isso depende da largura do seu site, mas acho que algo entre 1200 e 2000 px deve ser o seu máximo.

Você terá que passar pelo mesmo processo, quer as imagens venham de um site de estoque ou da DSLR de alguém. O ponto é que nenhuma imagem de origem sairá do tamanho “certo” para o seu site, o que significa que o redimensionamento deve ocorrer em algum momento.

Além disso, sites responsivos exibem imagens em tamanhos diferentes, dependendo do dispositivo ou navegador em que são visualizados. E depois há os diferentes casos de uso — como imagem em tamanho real x miniatura ou foto de produto em tamanho real x imagem em destaque.

Portanto, há mais redimensionamentos que precisam ser feitos mesmo depois de passar pelo problema de redimensioná-los manualmente.

Aqui está o que você não deve fazer:

• Redimensione imagens uma a uma por conta própria. É demorado e ineficiente.
• Confie no redimensionamento do navegador para exibir suas imagens de forma responsiva, pois isso pode causar problemas.

Em vez disso, você pode integrar seu servidor de imagem existente (em seu host) ou serviço de armazenamento externo (como S3) com o ImageKit. Ou você pode usar a Biblioteca de Mídia do ImageKit para armazenar seus arquivos.

Como você pode ver, o ImageKit aceitou o upload desta foto do Unsplash em suas dimensões e tamanhos originais. O mesmo vale para onde seus arquivos se originam.

No entanto, assim que você integrar suas imagens ou armazenamento de imagens com o ImageKit, a ferramenta assumirá o controle do dimensionamento de sua imagem. Você pode ver como isso é feito aqui:

Deixe-me explicar brevemente o que você está vendo acima:

• A preferência de origem da imagem informa ao ImageKit de onde as imagens precisam ser otimizadas. Nesse caso, é a ImageKit Media Library e eles serão servidos no meu site.
• O URL da imagem antiga é um lembrete de onde nossas imagens residiam no servidor.
• Os URLs de Nova Imagem explicam onde suas imagens serão otimizadas por meio do ImageKit.

A fórmula é bastante simples. Você pega a URL original da sua imagem e a transforma com a nova URL do ImageKit.

Somente o URL do ImageKit reduzirá instantaneamente o tamanho de seus arquivos de imagem. No entanto, se você quiser redimensionar as dimensões de sua imagem enquanto estiver fazendo isso, poderá usar parâmetros de transformação para fazer isso.

Por exemplo, esta é a foto do Unsplash vista da biblioteca de mídia do meu site. Ele vive em meus próprios servidores, e é por isso que o endereço mostra minha própria URL:

Para ver como fica depois que o ImageKit o transforma, troco meu nome de domínio pelo endpoint fornecido pelo ImageKit. Em seguida, adiciono meus parâmetros de redimensionamento de imagem (eles permitem que você faça mais do que apenas redimensionar também) e reanexo o restante da URL que aponta para meu armazenamento de imagem.

Isto é o que acontece quando uso o ImageKit para redimensionar automaticamente minha imagem para 1000×560 pixels:

Para criar esta imagem redimensionada, transformei o URL do ImageKit no seguinte:

https://imagekit.io/vq1l4ywcv/ tr:w-1000,h-560/…

São os parâmetros de largura (w-) e altura (h-) que reduziram as dimensões do arquivo.

Agora, como você pode ver, isso não é tão perfeito quanto a imagem original, mas isso é porque eu tenho um pouco de compactação aplicada ao arquivo (80%). Vou cobrir como isso funciona abaixo.

Enquanto isso, vamos nos concentrar em como a imagem ainda parece ótima, bem como nos ganhos que estamos prestes a obter em velocidade.

Anteriormente, este era um arquivo de 3,6 MB para a imagem de 5591×3145 px. Agora, é um arquivo de 128 KB para a imagem de 1000×560 px.

Para adoçar ainda mais o negócio, o ImageKit facilita o redimensionamento de suas imagens dessa maneira usando a transformação de imagem baseada em URL. Essencialmente, funciona assim:

• Você salva uma imagem mestre na biblioteca de mídia do ImageKit ou em seu servidor preferido.
• O ImageKit usa automaticamente várias técnicas para reduzir significativamente o tamanho da imagem.
• Você pode usar os parâmetros de redimensionamento e corte do ImageKit para modificar cada imagem para atender a diferentes resoluções e tamanhos de dispositivos.

Quando a 91mobiles aproveitou essa forma de otimização de imagem, economizou em seu site 3,5 TB por mês de largura de banda. E eles não precisavam fazer nada além de se integrar à plataforma. Não havia necessidade de mover suas imagens para o ImageKit ou outro serviço de armazenamento de terceiros. Tudo ocorreu dentro de sua infraestrutura legada.

2. Use formatos de imagem de carregamento mais rápido

Não é apenas o tamanho de suas imagens que consome espaço de armazenamento e largura de banda. Os tipos de arquivo que você usa também têm impacto.

PNGs , em geral, são usados ​​para coisas como logotipos, imagens contendo texto e outras imagens superfinas com fundo transparente. Embora você possa usá-los para salvar suas fotos, eles tendem a produzir os maiores tamanhos. Mesmo quando a compactação sem perdas é aplicada, os PNGs ainda permanecem maiores em tamanho do que outros tipos de arquivo.

Os GIFs são a contrapartida animada dos PNGs e também usam compactação sem perdas.

JPGs , por outro lado, são mais adequados para imagens e fotos coloridas. Eles são menores em tamanho e encolhem com compressão com perdas. É possível compactar JPGs o suficiente para obtê-los em um tamanho gerenciável, mas você deve ter cuidado, pois a compactação com perdas degrada a qualidade geral de um arquivo e não há como voltar atrás depois de concluído.

Os WebPs vêm ganhando popularidade desde que o Google os introduziu no início de 2010. De acordo com um estudo do Google, os WebPs podem ser entre 25% e 34% menores que os JPGs. Além disso, você pode usar compactação com e sem perdas em WebPs para reduzi-los a tamanhos ainda menores.

Algo a ter em mente com os WebPs é que eles não são universalmente aceitos. No momento em que escrevo isso, os WebPs não são aceitos por dispositivos iOS. No entanto, as versões mais recentes de todos os outros navegadores, Google ou outros, os exibirão com prazer.

Quanto a como o ImageKit ajuda com isso, é simples:

Quando essa configuração é definida, o ImageKit determina automaticamente o melhor formato de arquivo para entregar cada um de seus arquivos. Ele leva em consideração qual era o formato e o conteúdo da imagem original e se o dispositivo do visitante o suporta ou não.

JPGs, PNGs e GIFs serão todos convertidos em WebPs quando possível – digamos, se o visitante visitar do Chrome (que os aceita). Se não for possível - digamos, se o visitante visitar do Safari (que não os aceita) - o ImageKit será convertido para o melhor (ou seja, menor) formato com as transformações definidas. Pode ser PNG ou JPG.

A Nykaa conseguiu capitalizar essa estratégia de otimização de imagem do ImageKit. Embora seu site já tivesse sido projetado usando uma mistura de JPGs e PNGs e estivesse armazenado em vários lugares da web, o ImageKit cuidou de automatizar os formatos de imagem diretamente dos URLs originais.

3. Compactar Imagens

Em seguida, precisamos falar sobre compressão de imagem. Eu já fiz referência a isso algumas vezes, mas ele se divide em dois tipos:

Sem perdas

Essa forma de compactação é usada em PNGs e GIFs. Para compactar o arquivo, os metadados são removidos. Dessa forma, a integridade da imagem permanece intacta, mas o encolhimento do arquivo não é tão substancial quanto você obteria com a compactação com perdas.

Com perdas

Essa forma de compactação é aplicada a JPGs e WebPs. Para compactar o arquivo, algumas partes da imagem são “perdidas”, o que pode dar a certos pontos uma aparência mais granulada do que a imagem original. Na maioria dos casos, é quase imperceptível, a menos que você observe de perto as duas imagens lado a lado. Mas para seus visitantes, a degradação é fácil de perder, pois não há original para comparar.

Com a compactação com perdas, você controla qual porcentagem do arquivo se degrada. Um intervalo seguro seria algo acima de 70% a 80%. O ImageKit, por padrão, define sua otimização para 80% e estima que você pode economizar pelo menos 20% a 25% do tamanho do seu arquivo apenas com isso. Na realidade, porém, provavelmente é mais (estamos olhando para mais de 40%, como no exemplo da imagem Unsplash acima):

Você pode alterar isso para qualquer padrão que acredite que manterá a qualidade e, ao mesmo tempo, fornecerá os tamanhos de imagem que ajudam seu site a carregar rapidamente.

Se você usa a configuração de otimização padrão ou sua própria, lembre-se de ativar as configurações de compactação adicionais disponíveis na guia Avançado.

Essas três configurações, em particular, permitirão que você faça o máximo de compactação e da forma mais segura possível.

A primeira configuração “Salvar uma cópia”, por exemplo, mantém suas imagens originais no servidor ImageKit. Dessa forma, você tem uma cópia da pré-compressão da imagem sem ter que gerenciar a carga dela em seu próprio servidor.

A segunda configuração “Preservar metadados de imagem” permite aplicar compactação sem perdas quando possível.

E a última configuração “PNG Image Compression Mode” permite que você decida qual nível de otimização sem perdas você deseja usar em seus PNGs: máximo, mínimo ou nenhum.

Quando terminar, você terá resultados como esta comparação lado a lado:

Este é um JPG do Unsplash. Você pode dizer qual é o original e qual é a versão compactada e redimensionada do ImageKit?

O da esquerda com a guarnição preta é:

• 1500×1005px
• 266 KB
• Comprimido a 95%

O da direita com a guarnição branca é:

• 5444×3649px
• 2,5 MB
• Original

Cabe a você decidir qual das configurações de compactação e otimização do ImageKit você se sente mais confortável em usar e, em seguida, configurar de acordo.

4. Salvar e extrair imagens do servidor externo

Existem duas maneiras de executar imagens através do ImageKit.

A primeira é fazendo o upload de suas imagens diretamente para sua Biblioteca de Mídia:

A segunda é a integração com seu site ou serviço de armazenamento externo. Na verdade, já vimos essa parte do ImageKit. É de onde você obtém seus endpoints de URL para que possa definir seus parâmetros de imagem:

Mesmo com todas as otimizações acima, você ainda pode estar tendo dificuldades com o armazenamento e a manutenção de imagens, seja por causa de como elas afetam sua velocidade ou quanto de armazenamento você precisa para mantê-las.

Por exemplo, se você armazenar suas imagens em seu servidor, eventualmente ficará limitado por espaço (a menos que tenha uma conta de hospedagem gigantesca).

Quando você está construindo grandes lojas de comércio eletrônico ou sites de negócios com milhares ou mesmo milhões de imagens e tamanhos de imagem correspondentes, você não pode se dar ao luxo de hospedar essas imagens por conta própria. É verdade que existe uma maneira de atendê-los mais rapidamente aos visitantes (que explicarei no próximo ponto), mas por que assumir o fardo e o custo de armazenamento adicional se você não precisa?

5. Adicione um CDN

Uma CDN é outra ferramenta de otimização essencial para grandes repositórios de imagens. Pense nisso como um segundo servidor, apenas este armazena em cache (copia) seu site e os atende por meio de data centers localizados significativamente mais próximos de seus visitantes em todo o mundo.

Como resultado, o tempo que leva para enviar seu site e suas milhares de imagens de produtos de Nova York, Nova York a Bangladesh, na Índia, acontece incrivelmente rápido.

Com o ImageKit, você desfruta do privilégio de servir suas imagens não apenas por meio de seus principais servidores de processamento, mas também por meio do AWS CloudFront CDN (incluído em todos os planos), que possui mais de 150 locais em todo o mundo.

Sintra, cliente do ImageKit, viu um grande salto de desempenho depois de mudar para o ImageKit. Com o CDN de imagem ImageKit (que possui nós de entrega em todo o mundo), houve uma queda de 18% nos tempos de carregamento da página.

Empacotando

O que é especialmente bom sobre o ImageKit é que não é apenas uma medida preventiva contra lentidão causada por imagens. Você pode usá-lo para corrigir e melhorar retroativamente sites móveis e PWAs, mesmo que já tenham milhões de imagens neles. Além disso, o centro de desempenho facilita o monitoramento das imagens do seu site e a identificação de oportunidades para melhorias de velocidade.

Além disso, como você pode ver nas dicas acima, o ImageKit simplificou muito do trabalho que você teria que fazer, seja manuseando-o manualmente ou configurando-o por meio de um plug-in.

Com os consumidores e o Google cada vez mais exigentes sobre a rapidez com que os sites carregam em dispositivos móveis, esse é o tipo de estratégia de otimização de imagem que você precisa. Isso aliviará sua carga, garantindo que todas as imagens adicionadas antes ou depois do ImageKit sejam otimizadas ao máximo. Melhor ainda, seus clientes colherão os benefícios de mais leads e maiores conversões.