Como melhorar a eficiência das imagens da OLX Brasil mantendo o foco na experiência dos usuários?
Esse artigo tem o objetivo de detalhar o estudo que fizemos para escolher o novo formato de compressão de imagens na plataforma OLX Brasil no que tange os contextos de anúncios e chats. Nela, a média diária de imagens novas que são comprimidas, transformadas e armazenadas é de 5 milhões com picos de até 400 mil visualizações por minuto. Curtiu? Então vamos falar um pouco mais sobre isso!
Motivação
Com a crescente demanda por imagens em plataformas de comércio eletrônico (como, por exemplo, a OLX) é necessário que essas imagens sejam processadas e armazenadas de forma eficiente.
Devido à alta volumetria demandada para nosso portal, é crucial a otimização do crescimento do armazenamento das imagens assim como a redução do tempo de entrega, a renderização e o tamanho dos caches. Tudo isso deve ser feito sem comprometer a qualidade das imagens e a compatibilidade entre os browsers. Outro fator importante a ser considerado é referente à melhoria do índice de qualidade da OLX Brasil perante os algoritmos de ranqueamento que incentivam o uso de formatos como Webp e AVIF.
O início
Vamos comparar os formatos de compressão de imagem JPG, WebP, Mozilla JPEG e AVIF, e avaliar sua eficiência no contexto da OLX Brasil. É importante ressaltar que essas imagens são enviadas pelos usuários da OLX Brasil de diferentes dispositivos (mobile e desktop) e câmeras com diferentes formatos. Isso torna a compressão de imagem um fator crítico para a experiência do usuário e uma variável importante a ser considerada.
Aqui na OLX Brasil, utilizamos o Amazon S3 para armazenar as imagens e o Amazon CloudFront para entregar o conteúdo para os usuários em diferentes regiões.
Os serviços envolvidos nesse processo de compressão, transformação, armazenamento e entrega das imagens utilizam NGINX, NodeJS + TypeScript, Kafka e MongoDB, sobre os quais não discutiremos nesse artigo, mas são as tecnologias que nos possibilitaram entregar tal solução. Para a avaliação comparativa dos resultados foram utilizados Jupyter, Python e Pandas.
O estudo
Para realizar o comparativo entre os formatos de compressão de imagem, utilizamos 10 mil imagens reais de anúncios e chat da OLX Brasil. Para garantir uma análise precisa, convertemos e metrificamos cada imagem em tempo real. Para executar essas conversões, adaptamos nossos serviços de upload para converter e coletar as seguintes métricas para cada formato de forma assíncrona:
- Nome do arquivo;
- Tamanho do arquivo original;
- Tempo de busca da imagem original no bucket;
- Tamanho do arquivo convertido;
- Porcentagem de compressão;
- Tempo gasto na conversão;
Os resultados
Durante nossa análise, notamos que em algumas imagens a conversão para JPG, Webp com fator de qualidade 90 e Webp com fator de qualidade 80 resultou em aumento do tamanho em relação à imagem original. Esse comportamento foi observado principalmente em imagens com baixa complexidade, como foto com cores sólidas ou com pouca variação de cores. Conforme apresentado no gráfico abaixo, o formato Avif teve a melhor compressão seguido dos formatos Webp 80, Mozilla JPEG, Webp 90 e por fim JPG:
Quanto à complexidade de tempo envolvida nas conversões, notamos que a conversão para o formato Avif foi a mais demorada em comparação aos outros formatos avaliados:
Percentual de compressão/redução de tamanho por tipo
Dessa forma, temos os seguintes achados no comparativos entre os formatos:
- Percentual de redução da imagem original -> JPG**: 71.72%
- Percentual de redução da imagem original -> Webp 80: 86.49%
- Percentual de redução da imagem JPG** -> Webp 80: 52.22%
- Percentual de redução da imagem JPG** -> Mozilla JPEG: 45.43%
- Percentual de redução da imagem JPG** -> Avif: 72.79%
** O formato JPG com fator de qualidade 90 é o utilizado atualmente na plataforma.
Após análise dos resultados obtidos, concluímos que a compressão que apresentou o melhor desempenho foi o Avif, que obteve uma redução de tamanho de até 72.79% em comparação com o formato atual utilizado. Em segundo lugar, identificamos a opção Webp 80, que apresentou uma redução de 52.22%, seguida pelo formato Mozilla JPEG, com uma redução de 45.43%.
A seguir, apresentamos um gráfico de dispersão que representa o tamanho em kilobytes das imagens comprimidas, com destaque para o formato Avif. É possível observar que esse formato apresenta pontos próximos da base, o que evidencia uma excelente capacidade de compressão:
Compatibilidade com a plataforma OLX Brasil
Durante o processo de escolha do novo formato de compressão de imagens na plataforma OLX Brasil, levamos em consideração um ponto crucial: a retrocompatibilidade. Nossas imagens são utilizadas por diversos times internos que vão desde prevenção, com modelos de inteligência artificial, até a exibição em sistemas internos. Portanto, manter a compatibilidade com o formato atual (JPG) foi uma premissa de extrema relevância. Para atender essa premissa, adaptamos nosso serviço de download para ser compatível tanto com o novo formato quanto com o formato utilizado atualmente, o JPG.
Para isso, desenvolvemos uma funcionalidade de prioridade na busca de imagens no bucket para favorecer imagens em maior volume. Além disso, implementamos um sistema de fallback para buscar e converter imagens de acordo com a solicitação do usuário, conforme ilustrado a seguir:
Abaixo um esboço do código responsável por obter e converter as imagens em tempo real:
async getObjectWithFallback(
folder: string,
image: string,
bucket: string,
response: Response,
) {
const path = `images/${folder}/${image}`
const { type, id } = this.getImageInfo(path)
const priorityPath = path.replace(type, Config.GetPriorityType())
const secondPriorityPath = path.replace(type, Config.GetSecondPriorityType())
await this.s3Service
.getObjectInBucketAndConvertoTo(
response,
priorityPath,
bucket,
type,
Config.GetPriorityType() != type,
)
.catch(async error => {
this.logger.error(
`Error getting object ${priorityPath} with fallback ${error}`,
)
// retry with secondPriorityPath
...
}
...
}getAndConvert(
response: Response,
path: string, // /images/image.webp
bucketName: string, // olx-images
convertTo: string, // 'jpg', 'webp', 'avif'
forceConvert: boolean,
): Promise<boolean> {
return new Promise<boolean>((resolve, reject) => {
const stream = this.s3Client
.getObject({ Bucket: bucketName, Key: path })
.createReadStream()
const pipeline = forceConvert
? OLXImageConverter().to(convertTo).pipe(response)
: response
pipeline.on('finish', () => resolve(true))
stream
.on('error', (error: S3Error) => {
error.bucket = bucketName
reject(error)
})
.pipe(pipeline)
})
}Nosso sistema de download é capaz de obter imagens de acordo com a extensão pretendida e convertê-las em tempo real, caso necessário.
Conclusão
Por fim, escolhemos o formato Webp 80 pois apresentou redução significativa no tamanho das imagens em comparação com o formato JPG atual sem perda de qualidade. Além disso, esse formato é compatível com a maioria das ferramentas existentes e tem uma conversão rápida.
Embora o formato AVIF tenha demonstrado uma compressão cerca de 30% melhor à do Webp 80 (o que resultaria em uma melhoria significativa na otimização do espaço de armazenamento) optamos por não utilizá-lo. Durante os testes, observamos outros fatores que impactaram nessa escolha, como o tempo de conversão do AVIF que é significativamente maior em comparação com outros formatos. Isso poderia afetar negativamente o desempenho na entrega das imagens e aumentar o custo do processamento das conversões. Além disso, a incompatibilidade ainda é um problema relevante, o que poderia impactar a experiência do cliente.
É importante destacar que esses resultados foram obtidos a partir do estudo realizado no dataset da OLX Brasil.
Continuaremos monitorando e avaliando as melhores opções de compressão para garantir a melhor eficiência em armazenamento e disponibilização de imagens com o intuito de oferecer a melhor experiência para os nossos usuários. Afinal, somos #Movidos por resultados, guiados por dados #Experimentamos, aprendemos e inovamos e #Uma boa experiência é a que fica!
Quer saber mais sobre a nossa cultura e o nosso jeito de ir #AoInfinitoEAlém? Acesse nossa página!
