Noções básicas de processamento de imagens

Atualmente, um website sem imagens seria inimaginável na internet. As imagens não só são necessárias para criar páginas da internet lindamente projetadas, mas também para gerar conversões, compartilhamento social e engajamento dos usuários. Entretanto, o tempo e os recursos necessários para transferir fotos, logotipos, ilustrações e até mesmo algum texto para criar a composição completa da página web é tão intenso que as imagens podem parecer menos como um ativo e mais como um passivo. Consequentemente, o processamento de imagens é fundamental para o sucesso de qualquer negócio digital – e pode significar a diferença entre seus usuários se encontrarem olhando para um website nítido e colorido versus uma página fragmentada, cheia de caracteres de preenchimento ou uma tela de carregamento em branco.

Este post abordará as noções básicas de processamento de imagem, explicando o que é, quais fatores afetam a qualidade da imagem e como serviços de processamento de imagem como compressão, formatação e redimensionamento podem melhorar tanto o processo de desenvolvimento quanto a experiência do usuário.

O que é o processamento de imagens?

O processamento de imagem – também chamado de otimização de imagem – é o processo pelo qual as imagens originais são codificadas de uma maneira especial, o que resulta em um tamanho de arquivo comprimido para transferência e armazenamento, preservando a melhor qualidade de imagem possível. Além da compressão, as soluções de processamento de imagem podem incluir outras modificações, como:

• reformatação;
• redimensionamento;
• filtragem;
• caching.

Se alguma vez você já se viu esperando impacientemente pelo carregamento de imagens, viu uma imagem distorcida ou cortada, ou viu um link de imagem quebrado em um website, você sabe, em primeira mão, o quão importante é o processamento de imagens para a experiência do usuário. Do ponto de vista comercial, o processamento de imagens não só reduz o uso de recursos – e, consequentemente, os custos operacionais – como também automatiza muitas das tarefas demoradas e entediantes que são necessárias para configurar e manter o armazenamento e a entrega de imagens, possibilitando que as empresas tenham mais tempo para focar em seus produtos e serviços.

Quais fatores impactam a qualidade da imagem?

As imagens Bitmap – também conhecidas como raster – são compostas de pixels coloridos que são organizados em grades onde cada cor é armazenada como um número binário. Previamente à otimização, a qualidade das imagens bitmap na web é afetada principalmente por dois fatores: o número de pixels – ou dimensões de pixels – e a profundidade de cor da imagem – ou profundidade de bits – que é medida em bits por pixel.

Dimensões Pixel

Ao pensar na qualidade de uma imagem, você provavelmente leva em consideração sua resolução, que é medida em pixels por polegada (PPI) – pixels per inch – ou pontos por polegada (DPI) – dots per inch – para imagens impressas. A “alta resolução” implica em uma imagem mais nítida e um arquivo maior, enquanto as imagens com uma resolução mais baixa parecem estar em blocos ou desfocadas. No entanto, esse não é o caso das imagens na web, porque as telas dos dispositivos têm sua própria resolução, resultando em uma contagem fixa de pixels. Em consequência disso, as imagens na web exibirão a mesma coisa no mesmo dispositivo, seja qual for sua resolução.

Em vez disso, o fator que determina a nitidez de uma imagem da web é a sua dimensão de pixel: o comprimento e a largura da imagem medida em seu número de pixels. Em outras palavras, quanto maiores forem as dimensões da imagem, melhor será a aparência da imagem. Como explicado em um post do Shutterstock:

“Se as dimensões de uma fotografia forem 2000×1500 pixels, a imagem terá um aspecto fantástico, como um banner ou como uma pequena foto na lateral de seu site. Entretanto, se você usar uma imagem com 200×150 pixels, ela só terá uma aparência profissional em seu tamanho original, menor. Explodir essa imagem para usá-la como uma imagem de herói resultará em um visual granulado e desleixado que não será apreciado por ninguém que visite seu site”.

Profundidade de cor

Um outro fator importante na definição da qualidade da imagem digital é a profundidade de cor, que indica quantas cores estão disponíveis para cada pixel. No caso de uma imagem em preto e branco, há apenas duas possibilidades – 1 ou 0 – o que resulta em uma profundidade de cor de 1 bit. Ao adicionar cinza claro e cinza escuro à mistura, o resultado seria quatro possíveis números binários – 00, 01, 10 e 11 – e uma profundidade de cor de 2 bits. À medida que a profundidade de cor aumenta, a gama de cores cresce exponencialmente, permitindo cores mais profundas e transições mais suaves entre pixels de diferentes cores, a exemplo das câmeras DSLR modernas, que têm uma profundidade de cor de 24 bits, possibilitando mais de 16 milhões de cores possíveis por pixel.

Qualidade vs. tamanho do arquivo: um tradeoff

As dimensões dos pixels e a profundidade de cor não são apenas indicadores-chave da qualidade das imagens da web, mas também são dois dos maiores fatores que determinam o tamanho do arquivo, ou seja, imagens de alta qualidade têm um custo. Consequentemente, quanto mais nítida e colorida for uma imagem, mais informações ela contém, o que exige mais memória para armazená-la e mais tempo para reproduzi-la na tela de um usuário – principalmente quando se trata de um dispositivo móvel ou de uma conexão lenta.

Isso é um verdadeiro dilema para sites como o e-commerce, que dependem de fotos de alta qualidade para mostrar aos clientes seus produtos com precisão, mas ao mesmo tempo precisam manter a velocidade do site para evitar o abandono do usuário. A fim de evitar os tradeoffs – ou seja, oferecer somente uma opção – as empresas devem garantir que as imagens sejam comprimidas, formatadas e dimensionadas para uma entrega otimizada.

Compressão

Sem dúvida, a tarefa mais importante de qualquer solução de processamento de imagem é a compressão, o processo pelo qual os arquivos de imagem são reduzidos ao menor tamanho possível através da reorganização ou eliminação de informações. Por isso, as técnicas que reduzem o tamanho dos arquivos por meio da eliminação de informações são conhecidas como compressão com perdas. Por outro lado, os métodos que não alteram os dados, mas simplesmente os reorganizam para agrupá-los de forma mais eficiente, são considerados sem perdas.

• Os métodos com perda obtêm compressão através da eliminação de dados em pixels. Quando descompactada, a imagem reconstruída é uma aproximação da original.
• Os métodos sem perda obtêm compressão ao rearranjar as informações. Quando descompactado, o arquivo é restaurado ao seu estado original.

Uma vez que a compressão com perdas altera essencialmente os dados brutos que compõem uma imagem, ela impede que as imagens sejam restauradas ao seu estado original. Com isso, é possível uma redução maior no tamanho do arquivo do que a compressão sem perdas. Porém, quanto maior for a redução, menor será a qualidade da imagem quando descomprimida. As distorções na imagem são um tipo de artifício de compressão que pode ocorrer quando um arquivo é salvo e editado repetidas vezes. Ainda que alguma perda de qualidade possa ser tolerável – ou mesmo imperceptível – em certas circunstâncias, outros gráficos como texto, logotipos, imagens médicas ou desenhos técnicos exigem uma compressão sem perdas para preservar sua qualidade original.

Reformatação

Os diferentes formatos de arquivo são comprimidos de forma distinta e suportam paletas de cores, níveis de transparência e tipos de imagens diferentes. Em consequência disso, torna-se extremamente importante escolher o formato de arquivo correto para sua imagem. Por exemplo, o JPEG permite uma ampla paleta de cores e ganhos significativos de compressão, tornando-o um bom ajuste para fotografias, entretanto, seu formato de compressão com perdas é problemático para animação ou gráficos que exigem transparência ou reedição. Em contrapartida, as 256 cores suportadas pelo GIF não proporcionam gradiente suficiente para fotografias estáticas, fazendo com que tons de pele e outras superfícies com transições sutis entre as cores pareçam irregulares e pixeladas.

Enfim, embora tanto o GIF quanto o PNG suportem transparência, o GIF suporta apenas transparência de 1 bit, o que significa que cada pixel deve ser totalmente transparente ou totalmente opaco. O PNG tem transparência de 8 bits, também conhecido como canal alfa. Como resultado, os pixels podem ter diferentes níveis de opacidade, permitindo gráficos parcialmente transparentes, como marcas d’água.

Atualmente, alguns dos tipos de arquivos de bitmap mais utilizados incluem:

• JPEG: um formato de compressão com perdas, contendo mais de 16 milhões de cores, muitas vezes utilizado para fotografias;
• PNG: um formato de compressão sem perdas que suporta canal alfa de 8 bits e mais de 16 milhões de cores, usado para gráficos transparentes e gráficos que requerem reedição;
• GIF: um formato de compressão sem perdas que suporta transparência de 1 bit, animação e 256 cores, usado para imagens animadas.
• WebP: um novo formato desenvolvido pelo Google que oferece compressão superior com e sem perdas, compatível com animação e canal alfa de 8 bits.

Tanto em termos de compressão quanto de flexibilidade, a WebP oferece vantagens significativas em relação a outros formatos de imagem comuns. Além de suportar canal alfa de 8 bits e animação, a Google Developers afirma que “as imagens sem perdas da WebP são 26% menores em tamanho em comparação com as PNGs”. As imagens com perdas WebP são 25-34% menores do que as imagens JPEG comparáveis”.

Mesmo sendo uma ótima notícia para os desenvolvedores, o WebP ainda é um novo formato de arquivo e não é suportado por versões mais antigas de muitos navegadores. Isso significa que enquanto a WebP pode proporcionar gráficos bonitos e de alto desempenho para alguns usuários, outros podem acabar olhando para uma imagem quebrada.

Visando a evitar que isso aconteça, as empresas devem escolher entre utilizar formatos de arquivo mais antigos ou entregar formatos diferentes para tipos de navegador diferentes. No caso de sites com muitas imagens, a configuração manual de diferentes opções de entrega para cada imagem é um trabalho entediante e demorado.

Redimensionamento

O dimensionamento perfeito de uma imagem para uma página web pode ser uma tarefa desafiadora, tornando-se ainda mais complexa devido à grande variedade de resoluções e tamanhos de telas disponíveis atualmente. Consequentemente, entregar uma imagem com pequenas dimensões de pixels pode ser adequado para um dispositivo pequeno, mas a mesma imagem em um dispositivo com uma tela maior ou de maior resolução pode parecer borrada ou em bloco. Do mesmo modo, uma imagem grande que pareça ótima em um computador desktop pode precisar ser cortada para aparecer em um dispositivo móvel, a fim de garantir que todos os detalhes sejam visíveis para o usuário.

Entre os problemas que podem surgir quando se trata de uma abordagem de dimensionamento de imagem de tamanho único, estão:

• imagens que ocupam muito espaço na tela;
• detalhes que são perdidos em telas pequenas;
• imagens pixeladas ou desfocadas em telas grandes e de alta resolução;
• largura de banda desperdiçada na entrega de imagens grandes a usuários móveis;
• velocidades de carregamento lentas a partir de navegadores que baixam imagens excessivamente grandes.

As tecnologias de imagem responsivas resolvem esse problema pois permitem aos desenvolvedores que ofereçam ao navegador vários arquivos de imagem diferentes, que têm diferentes números de pixels para diferentes resoluções de tela – conhecidas como mudança de resolução – ou diferentes versões para vários layouts e orientações de tela. No entanto, configurar manualmente várias resoluções e layouts para cada foto – ou pior ainda, cada formato de cada foto – acrescenta mais uma tarefa entediante ao gerenciamento do site.

Conclusão

Certificar-se de que as imagens sejam exibidas corretamente em uma ampla variedade de dispositivos, navegadores e tamanhos de tela diferentes requer configuração e gerenciamento intensivos, o que pode ser demorado e difícil de alcançar. Garantir que essas imagens não sejam apenas atraentes para os usuários, mas que também sejam entregues de forma eficiente, independentemente das condições da rede, acrescenta ainda mais complexidade à tarefa. Tendo isso em vista, usar um serviço de processamento de imagem capaz de automatizar esses trabalhos pode reduzir significativamente o custo operacional da otimização de imagem.

O Image Processor da Azion permite automatizar muitas dessas tarefas ao projetar fluxos de trabalho que realizam otimização de imagem sem a necessidade de gerenciar a infraestrutura. Com o Image Processor, você pode:

• cortar e redimensionar automaticamente as imagens sem gerenciar múltiplos arquivos;
• reduzir o tamanho da imagem em uma média de 80% sem perda de qualidade visual;
• converter as imagens automaticamente para WebP quando os navegadores são compatíveis;
• aplicar marcas d’água e outros filtros;
• monitorar a economia de largura de banda através do Real-Time Metrics.

Como resultado, grandes marcas internacionais, como a Lojas Renner, confiam na Azion para reduzir suas tarefas operacionais, melhorar o desempenho e economizar nos custos de infraestrutura. Com os serviços da Azion, a Renner pôde lidar com o tráfego que atingiu um pico de 13.000 requests por segundo na Black Friday de 2019. O uso do Image Processor tornou possível alcançar os usuários móveis e aqueles com largura de banda limitada, melhorar seu desempenho SEO e aumentar o tráfego orgânico e as conversões de vendas. Para maiores informações, confira a História de Sucesso completa aqui ou confira as vantagens que o Image Processor pode oferecer.