Image Size and Resolution Problems

Quer você esteja vendendo algo, prestando serviços, fornecendo mídia social ou apenas disponibilizando informações on-line, esse conteúdo e presença só podem ser bem-sucedidos se os usuários se engajarem com ele. Usuários felizes geralmente são sinônimo de um website de sucesso.

As imagens ajudam a construir o engajamento porque o cérebro recebe e processa estímulos visuais mais rapidamente do que o texto. Os seres humanos são programados para reagir melhor às imagens.

Há várias maneiras de as imagens do website melhorarem o engajamento:

  • Publicações com fotos recebem mais de 50% de curtidas no Facebook
  • Artigos com imagens são vistos 94% mais vezes
  • 63% das pessoas acham que a qualidade de uma imagem de produto é mais importante do que as informações do produto

Não importa qual seja a finalidade do website, ter texto simples e sem imagens simplesmente não é muito interessante ou envolvente.

Isto levou a que imagens maiores fossem veiculadas ao longo dos últimos 5 anos. O gráfico abaixo (com base nos dados de http://httparchive.org ) mostra que, apesar do número de imagens permanecendo quase o mesmo, o tamanho das imagens quase triplicou à medida que os proprietários de conteúdo tentam tornar os websites o mais envolventes possível e aproveitar as novas telas de resolução superior.

Um usuário feliz não espera

Image & Video Manager Growth Graph

Além de conteúdo rico, também foi comprovado que o desempenho aprimorado do website também melhora o engajamento do usuário. O requisito para um bom desempenho é o polar oposto à veiculação de imagens de alta resolução.

O desempenho da imagem pode ser dividido em duas áreas principais: velocidade na rede e velocidade para exibição na tela.

Também temos soluções de navegador, como imagens responsivas, carregamento lento, resposta e design do lado do servidor (RESS) para evitar o carregamento de imagens ocultas.

Desempenho da rede

A regra de ouro para melhorar o tempo de download das imagens é reduzir os bytes. Isso inclui:

  • Reduzir a resolução da imagem e o tamanho visível em pixels para ajustar as dimensões na tela
  • Reduzir a qualidade para um nível adequado para o website
  • Selecionar o formato correto para permitir a compactação e a transferência
  • Aplicar subamostra de croma
  • Reduzir o tamanho geral do arquivo para permitir tempos de carregamento mais rápidos
Se o usuário estiver em uma conexão ruim, como 3g, talvez você queira ser mais agressivo com algumas otimizações. Por exemplo, você pode optar por enviar imagens de baixa resolução.

Desempenho do dispositivo

Depois que a imagem for entregue ao dispositivo, ela precisa ser processada (decodificada) e pintada para a tela. Nem todos os dispositivos são criados iguais, e níveis variáveis de memória e poder de processamento gráfico podem desempenhar um grande papel no tempo que a imagem leva para pintar. Todas as técnicas acima ajudam a reduzir o tamanho da memória de uma imagem e podem acelerar os tempos de pintura.

Belas imagens + bom desempenho = usuários satisfeitos = website bem-sucedido

Entregar a imagem certa costumava ser simples. Agora temos milhares de dispositivos com diferentes tamanhos de tela em que pensar, conectividade de rede diferente e até mesmo formatos de imagem específicos do navegador. Isto está muito longe de 10 anos atrás, quando os monitores CRT e o som cantante de um modem de 56k acompanhavam quase todos os usuários navegando na Web.

A fim de manter os usuários satisfeitos, você não pode remover imagens, então você deve entregá-las e exibi-las o mais rápido possível para evitar que seu website tenha um problema de imagem.

Saiba mais sobre como gerenciar imagens on-line com o AkamaiImage & Video Manager.