Skip to content

#5613 Optimise social images by utilising next image api.#5997

Merged
PeerRich merged 6 commits intomainfrom
feat/5613-optimise-og-images
Dec 13, 2022
Merged

#5613 Optimise social images by utilising next image api.#5997
PeerRich merged 6 commits intomainfrom
feat/5613-optimise-og-images

Conversation

@JeroenReumkens
Copy link
Copy Markdown
Contributor

What does this PR do?

Optimises our OG Images by leveraging Next's Image API. This reduces the image size from 500KB to 80KB 🤯

Fixes #5613

Environment: Staging(main branch)

Type of change

  • New feature (non-breaking change which adds functionality)

How should this be tested?

  • Verify that the OG images are still generated properly by checking the OG Image meta tag and visiting that url on the following pages: Meeting booking page (pro/30min), App detail page, any other page on app.cal.com (should show a generic image).

The OG meta tag looks like this:
CleanShot 2022-12-13 at 11 15 58@2x

To verify that the link is working you can double click that "content" attribute and copy+paste that url in a new tab. The image should show up 🔥

@JeroenReumkens
Copy link
Copy Markdown
Contributor Author

@shuding Would also love to hear your opinion about this! I couldn't find any other solution to optimise the images, but this seems to work really well! Thanks 🙏

@shuding
Copy link
Copy Markdown

shuding commented Dec 13, 2022

Wow this is an interesting usage, looks legit! Ideally the generated image itself should be smaller, we will improve that in future versions. 🙏

@vercel
Copy link
Copy Markdown

vercel Bot commented Dec 13, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
cal ❌ Failed (Inspect) Dec 13, 2022 at 9:28PM (UTC)

Copy link
Copy Markdown
Member

@hariombalhara hariombalhara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is definitely interesting use of _next 🙌 I wasn't aware of this difference b/w these 2 types of servings.

Left some comments.

Comment thread apps/web/pages/api/social/og/image.tsx Outdated
Comment thread packages/lib/OgImages.tsx
Comment thread yarn.lock
Copy link
Copy Markdown
Contributor

@pumfleet pumfleet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside from Hariom's comments, code looks good to me. Great optimisation!

@PeerRich PeerRich added ♻️ autoupdate tells kodiak to keep this branch up-to-date automerge labels Dec 13, 2022
@PeerRich PeerRich enabled auto-merge (squash) December 13, 2022 21:09
@PeerRich PeerRich merged commit 9eb52bb into main Dec 13, 2022
@PeerRich PeerRich deleted the feat/5613-optimise-og-images branch December 13, 2022 21:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

automerge ♻️ autoupdate tells kodiak to keep this branch up-to-date

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[CAL-415] Social Image no longer working on WhatsApp after commit: File size too big

5 participants