Melhore o desempenho do site otimizando automaticamente todas as suas imagens para qualquer dispositivo com Cloudimage

Publicados: 2020-04-22

A Otimização de Imagem é, de acordo com o Lighthouse, um dos problemas mais comuns de baixa velocidade e desempenho do site.

É possível que imagens não otimizadas estejam diminuindo a velocidade de carregamento da página em mais de 9 segundos, em alguns casos até mais.

Páginas lentas estão levando a uma maior taxa de rejeição e menor posicionamento SERP, o que em troca significa menos tráfego e menos clientes pagantes.

O que a otimização de imagem inclui?

Melhore o desempenho do site otimizando automaticamente todas as suas imagens para qualquer dispositivo com Cloudimage 1

A otimização de todas as imagens do seu site é um trabalho altamente complexo, que requer experiência e algumas horas para ser feito corretamente.

Os plug-ins podem ajudar a economizar algum tempo, mas também podem quebrar toda a estrutura do seu site e excluir permanentemente algumas de suas mídias se não forem tratadas corretamente.

Para ver por que consideramos esse trabalho complexo, aqui está uma lista de verificação de 20 pontos do que a Cloudimage considera essencial para a otimização adequada da imagem:

  1. Incorporar a entrega de CDN
  2. Otimize o TTFB
  3. Use a visualização do produto em 360 graus
  4. Verifique se suas imagens são responsivas
  5. Redimensionar imagens corretamente
  6. Use o formato de imagem correto
  7. Compactar imagens
  8. Otimizar atributos alternativos
  9. Legende as fotos com clareza
  10. Cuide dos ângulos do seu produto
  11. Saber misturar cores
  12. Crie visuais fundidos com emoções
  13. Use fundos correspondentes ao produto
  14. Otimize suas miniaturas
  15. Usar sitemap de imagem
  16. Aplicar subamostragem de croma
  17. Imagens não críticas de carregamento lento
  18. Implantar spriting de imagem
  19. Comece a armazenar em cache ativos de imagem
  20. Pré-carregar recursos de imagem críticos

Do ponto de vista técnico, os pontos mais importantes, da lista acima, são redimensionamento, otimização de formato, Lazy load, compactação de imagem, responsividade e entrega de CDN.

Se você tiver digamos 11.000 imagens em seu site.

Quanto tempo levará para terminar de otimizá-los?

Agora imagine poder fazer isso automaticamente!

Isso é o que o Cloudimage faz.

Melhore o desempenho do site otimizando automaticamente todas as suas imagens para qualquer dispositivo com o Cloudimage 2
Melhore o desempenho do site otimizando automaticamente todas as suas imagens para qualquer dispositivo com Cloudimage 3

Você pode fazer upload em massa de todas as imagens por meio de nosso software e elas serão automaticamente descontadas e carregadas na nuvem.

Depois disso vem a otimização.

Redimensionamento de imagem

Os servidores de redimensionamento da Cloudimage, localizados em três data centers em todo o mundo (Canadá, França e Cingapura) farão o download de sua imagem original de origin_image_url, a transformarão com base nos parâmetros de operação e filtro e, finalmente, a exibirão em seu site ou aplicativo móvel por meio de um foguete -CDN rápido.

Um exemplo com uma imagem original hospedada em seu servidor web, bucket do Amazon S3 ou qualquer outro armazenamento acessível por HTTP.

Ao especificar largura e altura, as proporções da imagem original podem ser ignoradas ou mantidas. Além disso, você pode optar por adicionar preenchimento à imagem. O Cloudimage fornece os seguintes modos de redimensionamento:

Melhore o desempenho do site otimizando automaticamente todas as suas imagens para qualquer dispositivo com o Cloudimage 4

Colheita

Mantém as proporções da imagem cortando a imagem para caber na largura e altura definidas.

Ajustar

Redimensiona a imagem mantendo as proporções adicionando preenchimento para satisfazer as dimensões desejadas.

Vinculado

Tenta redimensionar a imagem mantendo as proporções. Semelhante ao ajuste, mas sem preenchimento.

Tampa

Redimensiona a imagem para a largura e altura especificadas, ignorando as proporções da imagem original.

Girar

Gira a imagem em um ângulo especificado, no sentido anti-horário

Aparar

Remove um quadro de cor única ao redor da imagem.

Compressão de imagem

Você pode alterar a compactação (formato de saída e qualidade) de sua imagem usando filtros de compactação.

Você pode usar os filtros de compactação juntamente com operações de redimensionamento e filtros de imagem.

Por padrão, o Cloudimage entrega as imagens como WebP. Se o formato não for suportado pelo navegador do cliente, ele retornará para JPEG ou PNG.

Melhore o desempenho do site otimizando automaticamente todas as suas imagens para qualquer dispositivo com o Cloudimage 5

Optipress – Compressão de imagem baseada em Machine Learning

O principal desafio com a compactação JPEG é encontrar o fator de compactação mais ideal para cada imagem diferente.

Diferentes imagens compactadas com os mesmos parâmetros de compactação podem resultar em diferentes qualidades percebidas.

Além disso, a mesma imagem em tamanhos diferentes pode exigir estratégias de compactação diferentes para obter o ganho máximo de tamanho sem perda de qualidade visível.

Para superar isso, desenvolvemos o algoritmo de compactação Optipress JPEG.

A Optipress descobre a melhor abordagem de compactação JPG analisando recursos de imagem específicos e parâmetros de compactação atuais.

Um modelo de Machine Learning determina a melhor estratégia de compactação para esta imagem.

A qualidade é então avaliada com base em um modelo de simulação do Human Visual System para alcançar a compressão ideal sem deterioração perceptiva da qualidade.

Predefinições de transformação

Se você deseja aplicar as mesmas transformações em muitas imagens, você pode definir predefinições e aplicar as transformações apenas usando o nome da predefinição (X).

p=X

Qualquer transformação de redimensionamento ou filtro de imagem pode ser incluído em uma predefinição, assim como marcas d'água e parâmetros de compactação de imagem.

Isso permite o processo de otimização em massa que economiza mais de 50% do tempo de otimização da imagem e pode ser feito facilmente por qualquer pessoa envolvida.

Imagens responsivas facilitadas

As imagens responsivas adaptam o tamanho da imagem de acordo com o tamanho da tela do usuário final, permitindo que seu site ou aplicativo móvel carregue mais rapidamente em vários tamanhos de tela.

A equipe Cloudimage desenvolveu um plugin JS para automatizar tudo para você.

Melhore o desempenho do site otimizando automaticamente todas as suas imagens para qualquer dispositivo com o Cloudimage 6
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

A biblioteca Cloudimage JS adaptará todos os seus URLs automaticamente e oferece design responsivo integrado, carregamento lento e muitos outros recursos para tornar seu site responsivo, rápido e adicionar bons efeitos de carregamento às suas imagens.

Com o Lazy Loading e o cache habilitado, você pode ter certeza de que o tempo de carregamento do seu site melhorará em pelo menos 40%. Adicione CDN a isso e a porcentagem vai até 60%.

Rede de entrega de conteúdo

A Cloudimage aproveita as redes de entrega de conteúdo para acelerar a entrega de suas imagens em todo o mundo. Trabalhamos com vários provedores de CDN para otimizar a entrega de suas imagens e fornecer excelente confiabilidade.

Melhore o desempenho do site otimizando automaticamente todas as suas imagens para qualquer dispositivo com o Cloudimage 7

Além de acelerar suas imagens, o CDN oferece proteção DDoS (Distributed Denial of Service), que atuará como um escudo para seus servidores e evitará qualquer downtime.

As CDNs geralmente armazenam imagens em cache enquanto as imagens forem solicitadas pelos usuários finais.

Implementado em minutos

O que torna a Cloudimage muito única é que seus serviços podem ser implementados muito rapidamente.

Se o seu site está passando por picos de tráfego malucos, você sempre pode acessar o cloudimage, otimizar suas imagens e ter certeza de que esses picos serão absorvidos instantaneamente.

Isso deixa você com desempenho impecável e velocidade de carregamento de página rápida em vários dispositivos.

Além disso, a implementação é muito fácil e torna o processo de colaboração entre as equipes (equipes responsáveis ​​pelo site desde a produção de conteúdo até a postagem e monitoramento) simples e eficiente.

Isso é especialmente importante quando a maioria de nós é forçada a usar nossos escritórios em casa no próximo período de tempo.
Para mais informações sobre como os serviços Cloudimage funcionam, visite-nos em cloudimage.io