As estatísticas continuam se repetindo para nós sobre a forte correlação entre uma queda na velocidade de carregamento da página de um site e um aumento na taxa de rejeição com uma diminuição na conversão. Não vou descobrir a América se disser que o site está atrasado por uma carga útil "inchada" (com imagens mal otimizadas e código HTML redundante). Isso força o servidor a fazer um trabalho desnecessário. Uma grande camada deste trabalho está associada aos problemas de otimização de imagens.
As imagens selecionadas corretamente, por si só, atraem bem a atenção e ajudam a aumentar as conversões, a divulgar informações nas redes sociais e outras interações dos visitantes. Portanto, eles continuam a ser postados ativamente nas páginas da web. Mas como isso afeta a velocidade de carregamento dessas páginas é uma questão interessante. Tudo depende da estratégia de otimização.
Acho que estratégias que se baseiam na tese de que as imagens são conteúdo estático não são muito eficazes (desenvolverei essa ideia e apresentarei argumentos ao longo do artigo). Os dispositivos móveis agora respondem por uma grande parcela do tráfego da Internet, mas há um problema: esses dispositivos têm tamanhos, resoluções de tela, sistemas operacionais e softwares de aplicativos diferentes (por exemplo, navegadores). Como fazer uma página web rapidamente (!) E carregar corretamente em qualquer plataforma e ter a mesma aparência ao mesmo tempo?
Neste artigo, vamos reduzir a solução para otimização de imagens na fase de desenvolvimento, montagem do projeto e / ou na fase de manutenção do site acabado.
É verdade que algumas estratégias de otimização podem complicar significativamente o processo de design e desenvolvimento, bem como adicionar dores de cabeça de manutenção. Em geral, fico em silêncio sobre o crescente desperdício de recursos e tempo durante a montagem. Existem muitos métodos e ferramentas para otimizar imagens. Mas alguns deles não são fáceis de usar sem automatizar processos complexos e repetitivos. Examinaremos quatro estratégias e descobriremos qual delas permite que você automatize melhor e torne a otimização de imagem flexível (dinâmica) para diferentes dispositivos.
Vamos testar quatro estratégias. Primeiro, sem otimização de imagem, iremos simplesmente alimentar um código adaptativo simples para o servidor com todos os pontos de interrupção e opções de imagem para eles. Em seguida, examinaremos a otimização no estágio de construção, onde ferramentas e serviços especiais ajudam a preparar as variantes de imagens necessárias. A terceira estratégia é a otimização em tempo de execução: antes de enviar a página, uma ferramenta automatizada ou serviço online aplica a otimização da imagem de acordo com um determinado modelo ou com base nas informações do navegador. A última estratégia é usar informações sobre o dispositivo e o navegador obtidas por meio de outros serviços especializados para gerar e entregar imagens otimizadas (com certeza falarei sobre elas no final do artigo).
Atenção! Spoiler!
Uma estratégia de otimização de imagem específica do dispositivo fornecerá os melhores resultados. Neste artigo, veremos os prós e os contras da implementação de cada estratégia e seu impacto no processo de desenvolvimento de aplicativos da web.
O objetivo final da otimização de imagens é melhorar a velocidade de carregamento das páginas da web. Eu uso o Google PageSpeed Insight para auditar as páginas . Ele permite que você analise facilmente a eficácia de estratégias individuais. Como escrevi acima, faremos auditoria de páginas móveis.
Estratégia nº 1: código responsivo sem otimização
Peguei o código responsivo padrão sem usar nenhuma otimização de imagem: o navegador, com base no tamanho da tela, simplesmente seleciona uma opção mais ou menos adequada de um conjunto de imagens idênticas de tamanhos diferentes. Existem vários pontos de interrupção no código para imagens de tamanhos diferentes. Eles são determinados pelos tamanhos de exibição de telefones celulares, tablets e computadores desktop.
Mas aqui está novamente o problema: existem milhares dessas configurações e, a cada dia, há mais delas. Temos que adicionar mais e mais pontos de interrupção. No entanto, isso requer mais tempo de desenvolvimento, leva a um crescimento excessivo da base de código e, no futuro, a confusão e erros.
Aqui está um exemplo com quatro pontos de interrupção no atributo srcset:
<img srcset = "imagem-1920.jpg 1920w,
imagem-1280.jpg 1280w, imagem-640.jpg 640w, imagem-480.jpg 480w" tamanhos = "(largura mínima: 36em) 50vw, 100vw" src = " image-320.jpg "alt =" Sintaxe de imagem responsiva "/>
Agora pense em quanto desse código você pode ter em seu projeto ...
Além disso, as imagens para cada um dos tamanhos listados precisam ser criadas separadamente. Isso leva tempo, bem como espaço de armazenamento adicional.
Você também pode implementar a capacidade de resposta com consultas de mídia CSS. Como alternativa, você pode usar os novos elementos e
<source>
, onde <picture> é um contêiner para um ou mais elementos <source & gt e um elemento <img & gt. No entanto, todas essas abordagens não permitem soluções escalonáveis.
Finalmente, essas abordagens não levam em consideração as especificidades do dispositivo. Cada vez que você escreve um código como este, você está apenas tentando adivinhar quais pontos de interrupção usar e quais tamanhos de imagem serão necessários. Além disso, não há garantia de que as opções que você escolheu bem hoje funcionarão amanhã.
Benefícios:
- não há necessidade de comprar software ou pagar por uma assinatura de software ou serviços adicionais;
- É relativamente fácil escrever código responsivo com base em um padrão bem documentado.
Desvantagens:
- espaço adicional é necessário para armazenar imagens de tamanhos diferentes;
- tempo e esforço adicionais são necessários para implementar tal “multivariância adaptativa”;
- o crescimento do código e a complexidade de sua manutenção;
- Este código não funciona da mesma forma em todos os navegadores;
- nenhuma confiança no contexto do dispositivo;
- O escalonamento requer um CDN (Content Delivery Network) separado;
- leva muito tempo para finalizar para novos dispositivos, formatos de imagem e assim por diante.
Resultado dos testes
Testes mostram que não escolhi os melhores formatos, e mesmo sem compressão. E minhas imagens são muito grandes.
Estratégia # 2: Otimização em tempo de construção
Uma maneira de facilitar a criação de variações de imagem é usar serviços especializados de edição ou compactação de imagens, como Kraken , Compressor.io , mozjpeg e squoosh.
Você carrega suas imagens e os processos de serviço e otimiza as imagens em seu servidor. Então você pode usar as imagens otimizadas em seu projeto. Você pode definir configurações de otimização padrão ou personalizadas: compactação com ou sem perdas, redimensionamento, redução de escala e assim por diante. Alguns serviços podem fornecer várias versões da mesma imagem ao mesmo tempo, de acordo com as dimensões exigidas.
E se você se arriscar e usar o construtor Grunt ou Gulp para otimizar suas imagens ? Para fazer isso, basta atribuir as tarefas apropriadas a serem realizadas durante a construção. O processamento da imagem em si pode ser feito pelo pacote imagemin js .
Ele pode ser instalado via npm ou usado via interface de linha de comando. É uma solução modular com plug-ins para compactar vários formatos de imagem: por exemplo, imagemin usa mozjpeg para JPEG e pngquant para compactação PNG. A configuração das opções de otimização de imagem é semelhante a muitas ferramentas SaaS.
Ao implementar esta estratégia, o maior fardo recai sobre os desenvolvedores. Eles devem primeiro automatizar o processamento em lote de imagens com ajustes de ferramentas de terceiros e, em seguida, atualizar periodicamente seu código para oferecer suporte a novos formatos de imagem.
Benefícios:
- a otimização da imagem é realizada em um servidor externo;
- os serviços processam imagens com rapidez suficiente;
- o controle de otimização pode ser integrado ao seu fluxo de trabalho de desenvolvimento e implantação;
- os serviços têm uma interface conveniente para definir os parâmetros de otimização;
- muitas ferramentas gratuitas (ou planos gratuitos) com funcionalidade bastante rica.
Desvantagens:
- mais uma vez, leva muito tempo para implementar a multivariância adaptativa;
- ainda não há confiança no contexto do dispositivo (tamanho, resolução da tela e assim por diante);
- ainda precisa de espaço para armazenar muitas imagens;
- ainda precisa de um CDN;
- ainda mais horas de trabalho são necessárias para implementar ainda mais a integração com produtos de terceiros por meio da API;
- sempre que novas variantes de imagens aparecem, você também precisa executar todo o processo de otimização para variantes já existentes;
Resultado dos testes
Em termos de pontos, é um pouco melhor do que a primeira estratégia. As reclamações sobre compressão se acalmaram, mas sobre formatos e tamanhos muito grandes - elas permanecem.
É importante observar que a carga útil total caiu para 1,4 MB. Isso é 80% menos do que uma solução sem estratégia nos dá e 50% menos do que uma estratégia com código adaptativo.
Estratégia nº 3: Otimização em tempo de execução
Quando visitamos a página de um determinado dispositivo, o navegador envia uma solicitação com um cabeçalho HTTP para o servidor. O cabeçalho armazena informações sobre o contexto de acesso e formatos de imagem.
A otimização em tempo de execução é executada no servidor, pouco antes de a resposta (conteúdo) ser enviada ao navegador. O objetivo dessa otimização é reduzir a quantidade de dados transmitidos para acelerar o carregamento da página da web.
Por exemplo, o cabeçalho do navegador Chrome se parece com isto:
image / avif, image / webp, image / apng, image / *, * / *; q = 0.8
Com o advento das Dicas de Cliente, você pode transferir mais informações adicionais campos, por exemplo, DPR (proporção de pixels do dispositivo, "densidade de pixels", um valor semelhante à resolução) e Viewport-Width (largura da tela).
Dicas de cliente é um protocolo pelo qual o navegador, no cabeçalho da solicitação HTTP, pode informar ao servidor que tipo de conteúdo deseja receber. Dicas de cliente adicionam campos adicionais aos cabeçalhos de solicitação HTTP contendo informações sobre o navegador. Um dos principais recursos desse protocolo é informar ao servidor o tamanho das imagens de que a página precisa.
Usando esses dados, os otimizadores de tempo de execução determinam como compactar as imagens e em que formato gerá-las. No entanto, para um redimensionamento flexível, você ainda precisa implementar manualmente a lógica adaptativa com base em pontos de interrupção.
Essas tarefas são realizadas por otimizadores SaaS, como Cloudinary e imgix. Essas plataformas geralmente têm uma opção de otimização automática quando o servidor de imagem ou proxy decide a melhor forma de otimizar o conteúdo. Mas você também pode personalizar os parâmetros de otimização usando a API (geralmente usando parâmetros de URL simples).
ImgIx é um complemento CDN (Amazon CloudFront) que permite o processamento de imagem em tempo real antes de adicioná-lo ao cache. ImgIx fornece todas as funcionalidades necessárias para o processamento de imagens, bem como uma série de funções adicionais, por exemplo, Monocromático, Desfocado, Meio-tom.
Freqüentemente, esses serviços também podem servir como CDNs. E a Cloudinary tem seu próprio sistema DAM (Digital Asset Management).
Tudo está bem, mas esses otimizadores ainda não podem analisar o contexto do dispositivo. O cabeçalho HTTP pode transmitir dados do agente do usuário e sinalizar que a página foi aberta, por exemplo, a partir do navegador Chrome em um dispositivo Android. Mas isto não é o suficiente. Nada é dito sobre se é um telefone ou um tablet e quais são suas diagonais de resolução de tela.
As imagens também são armazenadas nos servidores da plataforma, não em seus próprios recursos. No entanto, você geralmente tem uma cota fixa de espaço em disco com alguma margem no caso de novas imagens.
Benefícios:
- muito pouco esforço é necessário para otimizar as imagens;
- run-time CDN ;
- , , DAM ;
- URL;
- , /
- , ;
:
- , ;
- src , , -;
- - ;
- geralmente funciona mais devagar nas primeiras solicitações, porque o serviço precisa obter uma imagem de uma fonte terceirizada e, em seguida, otimizá-la sem nenhum cache.
Resultado dos testes
As reclamações sobre compressão e formatos quase desapareceram, mas você ainda pode
encontrar falhas no tamanho.
Em comparação com as duas estratégias anteriores, a carga útil caiu 88%. Agora tem apenas 897 KB.
Estratégia nº 4: Otimize para o contexto do dispositivo
Como na estratégia anterior, precisamos de um serviço com servidor de imagens. Ele deve usar cabeçalhos de solicitação para otimização sensível ao contexto dinâmico. Por exemplo, um navegador pode declarar suporte para AVIF via Aceitar em uma solicitação HTTP. Em seguida, o serviço irá pensar sobre que tipo de imagem deve ser exibida no formato AVIF. E é aqui que começa a "magia".
Por exemplo, considere o serviço ImageEngine . É capaz de obter informações completas sobre o dispositivo a partir do contexto de acesso usando a biblioteca WURFL js ... Além do navegador e do sistema operacional, ele pode determinar a marca e o modelo exatos do dispositivo, bem como as características da tela (resolução, PPI e muitas outras). Ele também oferece suporte a Dicas de cliente, incluindo o cabeçalho de salvar dados, com o qual nem todos os serviços funcionam.
Isso permite que esse otimizador ofereça opções de imagem mais relevantes para todas as ocasiões, ao mesmo tempo que garante o equilíbrio ideal entre carga útil e qualidade de imagem.
Esses serviços também usam CDNs para acelerar a entrega de imagens e melhorar as taxas de acerto de cache. Essa abordagem tem uma grande vantagem no segmento móvel da Internet, uma vez que existem tantos dispositivos com parâmetros de tela diferentes.
Essa estratégia quase não requer conclusão de código. É fácil atualizar os valores do atributo src da tag img vinculando-os ao serviço de otimização. E isso é tudo.
Benefícios:
- requer esforço mínimo de desenvolvimento e manutenção;
- pode ser efetivamente configurado e esquecido (ao usar configurações de otimização automática);
- otimização automática e manual de imagens por meio de diretivas na URL;
- a maior economia possível na carga útil da imagem, mantendo a qualidade máxima;
- você pode implementar e começar a usar essa estratégia em questão de minutos;
- o serviço de otimização costuma oferecer a melhor relação preço / largura de banda;
- sem crescimento excessivo da base de código: sem código adaptativo e sem pontos de interrupção.
Desvantagens:
- src , , - ( );
- ;
- , , .
Agora o Google PageSpeed Insights está feliz.
A maioria dos indicadores melhorou significativamente. O serviço começou automaticamente usando novos formatos de imagem (por exemplo, AVIF com compactação ideal de acordo com o contexto de acesso). Além disso, para diferentes tamanhos de tela, as imagens mudam automaticamente de comprimento e largura e também são dimensionadas.
Nossa carga útil total diminuiu cerca de 95%:
E voce sera feliz
Como você pode ver, todas as estratégias têm seus prós e contras. Não há dúvida de que os serviços de otimização de imagem, especialmente aqueles baseados no contexto do dispositivo, têm uma vantagem.
A terceira e quarta estratégias permitirão que você construa racionalmente o processo de desenvolvimento com o mínimo de problemas no estágio de criação, manutenção e armazenamento de imagens. Além disso, você não precisará escrever código responsivo complicado e não escalonável. A otimização de imagens funcionará de maneira confiável e flexível para atender a novos requisitos e necessidades de negócios.
Não se preocupe em perder o controle sobre as configurações de otimização de imagem, porque você pode fazer seus ajustes usando APIs ou parâmetros de URL simples.
Claro, você terá que pagar por esse prazer. Mas os representantes dos serviços garantem que planos tarifários baratos sejam fornecidos para pessoas físicas, bem como para pequenas e médias empresas.
Cloud VDS da Macleod são ótimos para hospedagem de sites.
Cadastre-se pelo link acima ou clicando no banner e ganhe 10% de desconto no primeiro mês de aluguel de um servidor de qualquer configuração!
