惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 三生石上(FineUI控件)
Y
Y Combinator Blog
aimingoo的专栏
aimingoo的专栏
B
Blog
小众软件
小众软件
D
DataBreaches.Net
T
The Blog of Author Tim Ferriss
L
LangChain Blog
WordPress大学
WordPress大学
罗磊的独立博客
GbyAI
GbyAI
S
SegmentFault 最新的问题
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
Tailwind CSS Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
月光博客
月光博客
IT之家
IT之家
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
雷峰网
雷峰网
美团技术团队
F
Fortinet All Blogs
Hugging Face - Blog
Hugging Face - Blog
The GitHub Blog
The GitHub Blog

Darek Kay

Sabbatical #18: Great Ocean Road Sabbatical #17: Melbourne Sabbatical #16: Kaikōura Sabbatical #15: Tasman-Marlborough Sabbatical #14: West Coast Sabbatical #13: Wānaka Sabbatical #12: Milford Sound Sabbatical #11: Queenstown Sabbatical #10: Mackenzie Basin Sabbatical #09: Dunedin Sabbatical #08: Christchurch Sabbatical #07: Waitomo Sabbatical #06: Tongariro National Park Sabbatical #05: Rotorua Lakes Sabbatical #04: Coromandel Peninsula Sabbatical #03: Auckland Sabbatical #02: Doha Sabbatical #01: Getting ready Grab browser links and titles in one click
Open Graph images: Format compatibility across platforms
2024-11-17 · via Darek Kay

While redesigning my photography website, I've looked into the Open Graph (OG) images, which are displayed when sharing a link on social media or messaging apps. Here's an example from WhatsApp:

A link shared on WhatsApp. A preview card containing the page title, description and an image is displayed above the link.

For each photo that I publish, I create a WebP thumbnail for the gallery. I wanted to use those as OG images, but the WebP support was lacking, so I've been creating an additional JPG variant just for Open Graph. I was interested in seeing how things have changed in the last 2.5 years.

I've tested the following platforms: WhatsApp, Telegram, Signal, Discord, Slack, Teams, Facebook, LinkedIn, Xing, Bluesky, Threads and Phanpy (Mastodon). Here are the results:

  • All tested providers support JPEG and PNG.
  • All tested providers except Xing support WebP.
  • No tested provider except Facebook supports AVIF. WhatsApp displays the AVIF image, but the colors are broken.
  • "X, formerly Twitter" didn't display OG images for my test pages at all. I don't care about that platform, so I didn't bother to further investigate.

Those results confirmed that I could now use WebP Open Graph images without creating an additional JPG file.