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   ajudam os fotógrafos a mostrar suas sensibilidades únicas e ganhar exposição. o Unsplash  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:    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. Confiança:    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. Personalização:    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. Custo-benefício:  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,   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: Core Web Vitals   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    . Clique no link e veja a redução de tamanho. Imagem otimizada - 215kB    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   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   para direção de arte. <srcset> <picture>  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.    — torna a imagem mais vibrante ajustando a distribuição de realces, meios-tons e sombras nos canais RGB auto=true    — fornece remoção de olhos vermelhos auto=redeye  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:    — 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   e alguns outros parâmetros.  faceindex faceindex=2    — 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 facepad=1    — 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   .  máscara 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   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.  Asset Manager  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.  Também publicado  aqui.  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)

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Modelo Bitcoin UTXO, alimentando um ecossistema único

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Modelo Bitcoin UTXO, alimentando um ecossistema único

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps