Padronizar e aprimorar a imagem utilizada pelo rich link preview

[MatheusBuss]

Para finalizar a issue:

• Definir tamanho da imagem (largura máxima de 299 px)
• Criar uma cópia redimensionada da imagem
• Salvar cópia redimensionada da image para ser usada com o rich link
• Servir imagem salva para o rich link

---

Histórico:

Atualmente o rich link preview busca as imagens diretamente do banco de dados, sem nenhum tratamento. Isso faz com que sejam utilizadas imagens de diversos tamanhos. Além disso algumas imagens não são renderizadas no preview.

Em um primeiro lugar deve-se certificar que todas as imagens são corretamente renderizadas no ato de compartilhamento.

Posteriormente devemos decidir o que fazer com as imagens, se as diferentes categorias (produtos, usuários e comunidades) devem ter seus próprios padrões.

[MatheusBuss]

Outro ponto que pode ser tratado em outra issue é a questão de acessibilidade. Os previews também suportam o campo og:image:alt que lida com questões de acessibilidade. Esse campo é utilizado principalmente para screen readers e, além de melhorar a acessibilidade do site, pode auxiliar nos SEO's.

Porém a dificuldade será gerar textos descritivos para todas as imagens que podemos linkar. Quem sabe é algo que podemos deixar nas mãos dos usuários quando forem upar suas fotos.

[henriquecbuss]

No frontend também seria legal ter o alt text para as imagens. Por enquanto, deixamos o alt como string vazia

[juramos-2020]

Oi @MatheusBuss pelo que vi nessa imagem aqui em relação ao design desses links de compartilhamento, não foge muito do que eu estava pensando.

Para o link do compartilhamento dos perfis, produtos e ações eu pensei nessa proposta horizontal. Gosto da opção na horizontal pois o usuário consegue ver vários links sem precisar fazer tanto scroll. Apesar da opção vertical permitir uma imagem maior, acho que o intuito desse link de compartilhamento é mais para atrair/chamar uma outra pessoa a acessar a página, de dentro dela o usuário encontrará imagens maiores.

Mas é só uma sugestão mesmo. Dei uma pesquisada em alguns e-commerce e alguns usam o formato horizontal mas tem quem faça sem a padronização rsrs

[MatheusBuss]

Parece uma boa mesmo @juramos-2020. Acho que fica melhor de ler as infromações também, além de que com imagens menores o preview carrega mais rápido. Quando formos implementar essa issue podemos fazer elas todas horizontais então.

[juramos-2020]

o preview carrega mais rápido.

Sucesso então 😃👍

[lucca65]

Valeu @juramos-2020! 🎉

[MatheusBuss]

Vou aproveitar esse espaço pra deixar meus testes documentados.

• A imagem que originou a issue (a do perfil do @lucca65) não aparece no WhatsApp e Telegram muito provavelmente por causa do tamanho. Em outras plataformas (e.g. Slack e Facebook) a imagem aparece normalmente. O limite para renderização parece ser em torno de 300 KiB.
• Para uma imagem ser mostrada à esquerda do texto a largura da imagem deve ser menor que 300 pixels. Segue tabela com alguns testes que fiz:

Largura	Altura	Imagem
554	1.200
277	600
300	138
299	137
300	300
299	299

Então para resolver essa issue acredito que o caminho é salvar uma imagem para exibição que condiza com esse limite de largura.

[lucca65]

isso é bem legal na verdade. @NeoVier poderíamos colocar essa limitação no componente de upload de imagem, como uma validação opcional, usada nas imagens como de perfil, categoria, loja, etc

[lucca65]

Uma maneira de usar a Stack da Amazon para resolver isso:

https://aws.amazon.com/blogs/networking-and-content-delivery/resizing-images-with-amazon-cloudfront-lambdaedge-aws-cdn-blog/

[lucca65]

Caminhos:

1. Delegar pra AWS fazer o resizing. Backend nem fica sabendo e de quebra ganhamos otimização de assets automaticamente (CDN, distribuído pelo mundo, etc)
2. Diminuir a imagem no upload se ela for grande demais. Fazer script que itera no s3 e busca quais imagens são afetadas e as altera manualmente no banco
3. Criar um serviço que faz oq a AWS faria, mas feito manualmente, gerando imagens menores on demand