Vercel OG(@vercel/og)でOG画像を動的生成する - dackdive's blog
こちらの記事を読んで。 以前から https://reading-list.zaki-yama.dev/ という自分のサイトに OG 画像を設定したいな〜と思っていたところに @vercel/og なるライブラリが登場したので試してみた。 ※ なお、今までずっと「OGP 画像」だと思ってたんだけど、記事中では OG image と表記されていたので、ここでも「OG 画像」と表記する。 @vercel/og の特徴 冒頭の記事を読む限り、今までは vercel/og-image というサービスが提供されていたが、これには以下のような問題があった。 難しい： Serverless Function 内で Chromium を起動し、 Puppeteer でスクリーンショットを撮る、ということをやっていた。これらのツールのセットアップは実装が難しくしばしばエラーを引き起こしていた 遅い：Chro
How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15% | web.dev
Yahoo! JAPAN is one of the largest media companies in Japan, providing over 79 billion page views per month. Their news platform, Yahoo! JAPAN News has more than 22 billion page views per month and an engineering team dedicated to improving the user experience. By continuously monitoring Core Web Vitals, they correlated the site's improved Cumulative Layout Shift (CLS) score with a 15% increase in
Pixel-perfect rendering with devicePixelContentBox | Articles | web.dev
It has 3440 pixels in width and the display area is 79cm wide. That leads to a resolution of 110 DPI. Close to 96, but not quite. That is also the reason why a <div style="width: 1cm; height: 1cm"> will not exactly measure 1cm in size on most displays. Finally, dPR can also be affected by your browser's zoom feature. If you zoom in, the browser increases the reported dPR, causing everything to ren
Do This to Improve Image Loading on Your Website
Ever since responsive web design started, we've had a problem with the way images load on the web. Now, Firefox is fixing the problem. Add width & height attributes to all your images, and see load jankiness disappear. Jen Simmons explains how. Try out the demos for yourself: Fixed-width layout: https://codepen.io/jensimmons/pen/jOONZaZ?editors=1100 Responsive layout: https://codepen.io/jensimmo
HTML Standard
'xxx-large' 15.3.5 Bidirectional text @namespace "http://www.w3.org/1999/xhtml"; [dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) { direction: ltr; } [dir]:dir(rtl), bdi:dir(rtl) { direction: rtl; } address, blockquote, center, div, figure, figcaption, footer, form, header, hr, legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, sect
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - uit-community/glitch-image
Chrome Platform Status
https://bugs.chromium.org/p/chromium/issues/detail?id=997286