Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Aprimorando Performance de Sites Através de Otimização de Imagens

by
Length:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Ao desenvolver ou atualizar um site, um dos objetos base é entregar uma experiência de usuário perfeita e aprimorar as conversões do site, já que são chave para aumento de receitas e melhorar a empresa, no fim das contas. Mas um problema que podemos encontrar é que, embora o maior uso de imagens resulte em um design mais atrativo, pode afetar negativamente a performance do site.

Hoje, imagens correspondem por mais de 60% do conteúdo baixado de uma página, logo, otimizá-las pode gerar um aprimoramento significante em perforamance. Contudo, otimização de imagens é arte e ciência, requerendo avaliação cuidadosa de vários parâmetros e o equilíbrio delicado entre conteúdo, formato, qualidade e dimensões.

Não importa se o site permite usuário enviarem imagens, se entregamos imagens estáticas ou mostramos imagens de redes sociais, precisaremos manipulá-las para adequá-las ao projeto gráfico do site. Nesse tutorial, exploraremos os recursos ofereceidos pela solução completa de administração de imagem e vídeo da Cloudinary. Veremos como ela ajuda a otimizar imagens e a aprimorar a performance do site.

Seleção Automática do Formato mais Eficiente

Formatos de imagem podem impactar bastante o tempo de carga. Mas determinar manualmente o melhor formato e configuração de codificação para cada imagem pode ser complexo e ineficiente.

Cloudinary determina dinamicamente e entrega cada imagem no formato mais eficiente, baseado no conteúdo dela e do navegador. Imagens podem ser enviadas para Cloudinary em vários formatos e convertidas em outros. Por exemplo, ela pode entregar imagens como WebP para o Chrome ou JPEG-XR para o Internet Explorer. Em alguns casos, PNG pode ser selecionado quando precisamos preservar transparência.

Há muitos motivos para alterar o formato entregue da imagem:

  • JPEG para fatos carregarem rápido (ou WebP se os usuários usarem Chrome ou em um aplicativo mobile que controlemos)
  • GIF se a imagem contiver desenhos com poucas cores
  • PNG (24 bit) para ilustrações de alta qualidade e plano de fundo transparente

Para entregar imagens ecm formatos diferentes, mas especificar o formato da extensão do arquivo na URL Ao usar a SDK da Claudinary, podemos especificar o novo formato como uma extensão do recurso ou usar o parâmetro "format".

Exemplo:

JPEG 90 Quality
JPEG Auto Quality
WebP Auto Quality
JPEG Auto Quality

Veja a demo.

JPEG - Friends at 90
JPEG - Friends at Auto
WebP - Friends at Auto
JPEG - Friends at Auto

Ajustar Autometicamente a Qualidade da Compressão

Ajuste preciso da qualidade da compressão e codificação pode resultado em arquivos menores sem degradação da qualidade visual. Achar a configuração certa para cada imagem, contudo, é mais complicado que parece.

Claudinary automatiza a decisão entre tamanho e qualidade. Os inteligentes algoritmos de qualidade e codificação da Cloudinary analizam cada imagem e encontram o equilíbrio certo, produzindo uma imagem boa mas minimzando tamanho. Analizar cada imagem individualmente e encontrar o nível de compressão e codificação certos permite ajuste preciso do nível de compressão, afinando as configurações de codificação, e pode reduzir bastante o tamanho do arquivo sem degradar a qualidade para o olho humano.

Exemplo:

Original image at 2040KB Optimized Image at 1120KB 45 Optimization

Veja a demo.

Podemos ver a transformação da imagem aqui.

Dimensionamento e Corte Automático de Imanges para Ajustar-se ao Layout da Página

Entregar imagens com dimensões maiores que necessárias usa largura de banda desnecessária e aumenta o tempo de carda da página. Mas, criar múltipls tamanhos para cada imagem e para cada resolução, pode tomar bastante recursos. Cloudinary permite-nos criar tamanhos dinâmicos para entregar a versão ótima que casa com a resolução área de visualização do aparelho do usário, sem entregar pixels desnecessários.

Além disso, imagens necessitam recortes para caber em layouts responsivos e várias dimensões de aparelhos. O algoritmo de recorte consciente de conteúdo da Cloudinary usa uma combinação de heurísticas para detectar, automaticamente, a região de interesse de cada imagem e recortá-la.

Esss capacidades de recorte inteligente garante que o foco de cada imagem seja incluido na imagem entregue, não apaenas em fotos com rostos, mas qualquer tipo de conteúdo. Cad imagem é analizada individulamente para encontrar a região certa a focar.

Imagem original:

The original image of the cat

Exemplo de vários modos de corte:

Different example of crop models

Veja a demo.

Para ver a imagem via sua URL transfórmiga, acesse aqui.

URLs Dinâmicas

Cludinário permite-nose transformat imagens facilmente, em tempo real, em qualquer formato, estiloe dimensão, além de otimizar as imagens para o menor tamanho e melhor experiência do usuário, além de salvar banda.

No coração da solução da Cloudináry, temos a possibilidade de entregar imagens usando URLs dinâmicas através de uma rápida rede mundial de entrega de conteúdo (CDN). A URL contem o ID pública da imagem requisitada, além de parâmetros de transformação requeridos. O ID público é um identificador único, especificado ao enviar a imagem no Cloudinary ou atribuído automaticamente pelo Cloudinary.

Qualquer instrução de transformação (manipulação) pode ser adicionada antes do ID pública na URL de entrega. Quando a URL é acessada, a imagem entregue é criada em tempo real e entregue ao usuário. A imagem também é salva em cache na CDN e disponível imadiatamente para todos os usuários subsequentes requisitando-a.

Conclusão

Essas dicas são algumas formas que Cloudinary pode ajudar-nos a otimizar imagens para nossos sites, aprimorando a performance e experiência do usuário.

O site do Cloudinary provê documentação detalhada em como os recursos funcionam. Podemos também encontrar publicações explicando os top 10 erros cometidos ao lidar com imagens de sites e como resolvê-los, assim como analisar imagens de sites para aprimorar velocidade e reduzir custos de banda.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.