UGIs de processamento dinâmico para confiança, personalização e eficiência

Se você gerencia um mercado on-line que depende do envolvimento do usuário e do compartilhamento social, o conteúdo e as imagens gerados pelo usuário (UGC/UGIs) são alguns dos ativos mais valiosos. Sites de avaliação como o Yelp permitem que os usuários elogiem ou lamentem a qualidade dos restaurantes por meio de fotos. Os sites de viagens ajudam os proprietários a atrair visitantes com belas fotos e vídeos. Finalmente, sites de compartilhamento de fotos como o Unsplash ajudam os fotógrafos a mostrar suas sensibilidades únicas e ganhar exposição.

No entanto, os UGIs são difíceis de trabalhar e a penalidade por errar pode ser alta. Neste artigo, mostraremos como processar UGIs programaticamente, para que você possa criar confiança, melhorar a experiência do usuário e simplificar seu fluxo de trabalho.

Os benefícios do conteúdo gerado pelo usuário

O conteúdo gerado pelo usuário, especialmente imagens e vídeos, é ótimo para construir uma base de usuários cada vez maior. Se você criar um ecossistema saudável em seu site ou aplicativo, poderá aproveitar o poder dos UGIs destas três maneiras:

• Confiança: Amigos, vizinhos, pares e colegas confiam uns nos outros muito mais do que nas mensagens de marketing. Um estudo recente da Stackla descobriu que 60% dos consumidores basearam sua decisão de compra em conselhos de familiares e amigos. Quando a conexão é autêntica, há mais confiança.

  
  

• Personalização: Os gostos e preferências das pessoas são únicos. Em um mundo de maior individualidade, os usuários querem personalização. O conteúdo gerado pelo usuário é uma ótima maneira de alcançar públicos de nicho e atender às suas necessidades.

  
  

• Custo-benefício: Além do mais, obter imagens dos usuários costuma ser a maneira mais prática e econômica de gerar conteúdo, especialmente para mercados online.

  
  

O que focar ao processar imagens geradas pelo usuário

Se você estiver trabalhando com UGC, é provável que esteja lidando com milhares, senão milhões, de UGIs diariamente. As imagens podem ser de influenciadores inexperientes, fotógrafos experientes ou qualquer pessoa intermediária. Como resultado, essas imagens provavelmente têm uma grande variedade de formatos, tamanhos e qualidades.

Por outro lado, os visitantes do seu site que consomem o conteúdo ainda esperam a melhor experiência, que inclui o seguinte:

• Carregamento rápido de imagens e velocidade da página
• Design responsivo e adaptabilidade do dispositivo
• Formato e composição padronizados
• Brand safety e moderação de conteúdo

Preencher a lacuna entre as expectativas do usuário e os desafios do processamento UGI pode ser assustador. E encontrar uma solução simples que resolva todas essas necessidades pode parecer quase impossível. No entanto, existem soluções econômicas, confiáveis e escaláveis e, no restante deste artigo, mostraremos exatamente o que são e com que facilidade você pode implantá-las.

1. Otimização para carregamento rápido e velocidade da página

Imagens e vídeos, principalmente aqueles gerados pelos usuários, geralmente são os maiores arquivos em uma página da Web, levando a uma velocidade lenta da página. Se o SEO é importante para o seu negócio, você deve tentar otimizar e compactar imagens, o que pode melhorar a velocidade da sua página, Core Web Vitals e, por sua vez, seus resultados de pesquisa. Com Imgix, você pode combinar três técnicas comuns para reduzir o tamanho do arquivo de imagem e acelerar a velocidade da página:

• Sirva imagens em formatos de última geração, como AVIF ou WebP
• Redimensionar corretamente as dimensões da imagem
• Deixe o Imgix aplicar a compactação de melhor esforço

Nos exemplos abaixo, a imagem original tem um tamanho de arquivo de 3,3 MB. A imagem otimizada, apesar de parecer idêntica, tem um tamanho de arquivo de apenas 215kB, 93% menor que o original. Isso melhoraria significativamente a velocidade de carregamento. Isso é obtido usando três transformações simples como uma string de consulta de URL - fm=webp&auto=compress&w=2000 .

Imagem original - 3,3 MB

Imagem otimizada - 215kB . Clique no link e veja a redução de tamanho.

2. Design Responsivo

Com a proliferação de dispositivos e navegadores, você simplesmente não pode confiar em uma versão de imagem para se adaptar a diferentes ambientes e ter uma boa aparência em cada um. Por outro lado, a geração manual de arquivos derivados para diferentes dimensões é trabalhosa e dificilmente escalável.

Felizmente, o atributo <srcset> alivia essa necessidade, direcionando o navegador para identificar o melhor tamanho de imagem com base nas opções disponíveis. Além disso, você pode usar o elemento Imgix e <picture> para direção de arte.

• Srcset para comutação de resolução
• <picture> para direção de arte

3. Padronize a qualidade visual e a composição

A maioria das imagens geradas pelo usuário não são criadas profissionalmente. Eles geralmente são muito claros, muito escuros ou simplesmente muito inconsistentes um com o outro. Para melhorar a qualidade visual e a coesão, você deve considerar um conjunto padrão de aprimoramentos de imagem. E se você estiver processando milhares ou mais UGIs por dia, a automação pode ajudá-lo a economizar muito tempo.

• auto=true — torna a imagem mais vibrante ajustando a distribuição de realces, meios-tons e sombras nos canais RGB
• auto=redeye — fornece remoção de olhos vermelhos

Focar e enquadrar os rostos também são importantes. A expressão facial de um assunto de notícias, se ampliada e cortada apropriadamente, muitas vezes pode contar uma história com mais nuances do que quaisquer palavras. E se você hospedar análises de produtos de usuários, os avatares dos usuários adicionariam autenticidade e credibilidade. Vários parâmetros da API Imgix facilitam a detecção, enquadramento e recorte de rostos:

• faceindex — seleciona uma face na qual centralizar uma imagem. Você pode isolar uma face específica ou incluir várias faces. No exemplo abaixo, selecionamos o rosto da criança usando faceindex=2 e alguns outros parâmetros.

• facepad — define a quantidade de preenchimento ao redor das faces. No exemplo abaixo, juntamente com alguns outros parâmetros, ampliamos a face do modelo usando facepad=1 .

• máscara — define uma máscara sobre uma imagem. No exemplo abaixo, juntamente com alguns outros parâmetros, colocamos uma máscara circular ao redor do rosto da modelo usando mask=ellipse .

Apenas para observar, o Imgix não armazena informações faciais ou identifica qualquer pessoa nas fotos. Toda a detecção ocorre em tempo real e está em conformidade com os regulamentos de proteção de dados da UE.

4. Monitoramento e moderação de conteúdo

Com os UGIs, a segurança do conteúdo é outra consideração importante. O Imgix Asset Manager pode ajudá-lo a detectar automaticamente conteúdo potencialmente violento, adulto ou questionável. Os alertas de conteúdo tornam a organização de imagens geradas pelo usuário mais rápida e fácil, e você pode automatizar a moderação de conteúdo com mais eficiência.

Introdução ao processamento de imagens geradas pelo usuário

À medida que o volume, a variedade e a complexidade do conteúdo gerado pelo usuário aumentam, isso pode aumentar a pressão sobre você e sua equipe. Construímos o Imgix para que você possa oferecer as melhores experiências visuais aos seus visitantes, melhorar o desempenho da página e eliminar o trabalho redundante para seus desenvolvedores e designers.

O que é mostrado neste artigo simplesmente arranha a superfície do que a Imgix oferece. Confira os recursos a seguir para ver como a Imgix pode ajudá-lo com suas necessidades de mídia visual.

• Saiba mais sobre as transformações UGI comuns
• Crie uma conta imgix gratuita

Leia esses estudos de caso para ver como nossos clientes trabalharam com UGIs.

• Eventbrite

• Pexels

• Fio Imobiliário (REW)