crop social image with recommended size for whatsapp and facebook

[gsambrotta]

Issue #136

Unfortunately we cannot really test it since is an absolute URL.
We can just see here: https://websitenext-git-fix-social-image.opentechschool.now.sh/sharing-images/website-into-sharing.png
that the pic is less then 250px width or heigh
and that the file size is less then 300KB which is the smallest size required for Whatsapp.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/opentechschool/websitenext/c1nf6oz28
✅ Preview: https://websitenext-git-fix-social-image.opentechschool.now.sh

[xMartin]

• Facebook recommends a pixel width of 1080px: https://developers.facebook.com/docs/sharing/best-practices
• Display in the facebook web stream is roughly 1:1.91
• Twitter: "Images for this Card ['summary_large_image' as we currently have it] support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size
• Would we not want text (logo and claim) on the image?

@gsambrotta can you elaborate your idea behind the new image content and format?

[gsambrotta]

@xMartin not so much to share here.
I did some research and i found that most of the people optimize for whatsapp since is the social that required the smallest sizes, which are still compatible with the other socials.
And since thought that the image required is more in the square direction then rectangular, (265px x 265px) i cut away some part of the image.

I think having the text is nice but is not mandatory. When shared on small screen is not readable anyway also the image is shown next to the page title and description which are more explanatory the copy in the image
I have notice many big company don't use any text in their thumbnail.

[Twissi]

I'd like to try something that works for facebook/twitter and whatsapp. I'd assume that whatsapp is cropping and scaling the image down.