朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
モダンWEBサイトにおける画像最適化について
はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最
コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。 コンテナークエリーを利用することで、再利用性の高いパーツを実装できます。とくに、カラム数が多いレイアウトや複雑な横並びの要素において、コンテナークエリーは有効な機能です。 この記事では、簡単な作例と使用上の注意点を紹介します。 コンテナークエリーの使い方 作例の紹介の前に、コンテナークエリーの使い方を簡単に説明します。 コンテナークエリーを使用するためには、使用したい親の要素にcontainer-typeプロパティを設定する必要があります。以下の2通りの指定ができます。 con
当ブログのレスポンシブコーディング施策のまとめです。 メディアクエリよりもコンテナクエリを優先する前回の記事でも触れたようにメディアクエリを一切使わずレスポンシブコーディングしました。 僕がメディアクエリを使用しなかった理由は以下の点が気になっていたからです。 各コンポーネントの状態変化をウィンドウのサイズに依存させるのは都合が悪い。実装者はウィンドウのサイズとにらめっこしながらデザインを調整する必要があり、非常に面倒。ある程度の的確な位置・間隔でブレイクポイントを用意するコーディングは効率的だが、全ての画面サイズで完璧な表示を実現するのが難しい。必ずどこかしらのサイズで見た目を妥協しないといけなくなってくる。ウィンドウのサイズではなく各コンポーネントのサイズを基準にデザイン調整するなら、どのように配置されるかを細かく考える必要がなくなる。代わりに、それぞれのコンポーネントが含まれるコンテ
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
問題 <img src=""> をブラウザで表示した時、どうなるか知っていますか？わざわざimg要素のsrc属性を空文字列にする機会がないので意外と知らないかもしれません。 もちろん画像は表示されず、(指定していれば)altが表示されます。 img要素のsrc属性を空文字列にすると、リンク切れになることがわかりました！いかがでしたか？(？) そのときHTMLImageElementは JavaScriptでsrcが空文字列のimg要素のDOMインスタンスを確認してみましょう。例として https://zenn.dev/stin を開き、Chrome開発者ツールを使ってsrc属性に空文字列を指定したimg要素を埋め込んでおきます。 そして次のJavaScriptを実行します。 const element = document.querySelector('img[src=""]'); con
by Alistair Shepherd published on Dec 14, 2023 Carefully observing websites in the wild As the murderous tortoises start to converge on Ryūji’s hideout, they pull out their phone. It’s a cheap, older device but it’s survived the toils of the tortoise-ageddon well so far. Thankfully the internet still exists, although a bit slower, so they’re able to search online for how to scare tortoises away. T
Next.js 13.5
Back to BlogTuesday, September 19th 2023 Next.js 13.5Posted by Next.js 13.5 improves local dev performance and reliability with: 22% faster local server startup: Iterate faster with the App & Pages Router 29% faster HMR (Fast Refresh): For faster iterations when saving changes 40% less memory usage: Measured when running next start Optimized Package Imports: Faster updates when using popular icon
はじめに 今回は、個人的によく活用させて頂いている、 コーディングが捗る便利ツールをご紹介します！ よく見るものから、ちょっとニッチなものまで 活用方法も踏まえてまとめたいと思います。 また、弊社QUOITWORKS.Incは2024年1月末締切で、ディレクター、デザイナー、エンジニア職を応募しておりますので 下記よりぜひご応募ください！ ChatGPT まずは王道、ChatGPT。 いろんな活用方法があるかと思いますが、今回ご紹介するものは 非課金ユーザーでも全く問題ないものです。 なぜなら、私が非課金だからです。 基本プロンプト ChatGPTに命令を出す際に、言い方で返答の「質」が変わるのは有名な話です。 精度が高い返答が欲しい時には活用しているプロンプトとして、 noteの深津さんが考案された「深津式プロンプト・システム」が効果的です。 その内容としては、 ・命令書 ・制約文 ・入
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy). I had previously done some work to make sure that <figure> and <figcapti
Cloudflare Zaraz adds support for server-side rendering of X and Instagram embeds
Cloudflare Zaraz adds support for server-side rendering of X and Instagram embeds07/10/2024 We are thrilled to announce Cloudflare Zaraz support of server-side rendering of embeds, featuring two Managed Components: X and Instagram. You can now use Cloudflare Zaraz to effortlessly embed posts from X or Instagram on your website in a performant, privacy-preserving, and secure way. Many traditional t
You can now easily link your Polar page under the "Sponsor this project" section on GitHub - it looks absolutely beautiful 😍 This is huge and all thanks to @matmair and our wonderful community! You made this happen, together. We're truly honoured and grateful to serve this amazing community of talented, passionate & kind developers. A community united behind the missionOne week ago, Matthias subm
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term. Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well a
Next.js 13.5まとめ
基本的には以下のNext.js 13.5のブログを翻訳してまとめたものになります。 TL;DR ローカル開発環境のパフォーマンスと信頼性の改善がメインです。 ローカルサーバーの起動が22%高速化: App & Pagesルーターでの反復作業が高速化 HMR(Fast Refresh)が29%高速化: 変更保存時の反復作業が高速化 メモリ使用量を40%削減: next start動作時に測定 パッケージインポートの最適化: 人気のあるアイコンやコンポーネントライブリ使用時の更新が高速化 next/imageの改善: <picture>とアートディレクション、ダークモードに対応 438を超えるバグの修正 アップデート詳細 起動とFast Refesh時間の改善 HTTPアーカイブによってクロールされた上位100万（Next.js 13.5のブログでは10 millionと書かれていますが、画像
こんにちは、Webサイト作ってますか？ Webサイトを作っていると、Lighthouseスコアを上げるために画像のサイズやフォーマットにも気を配りたくなりますよね。 筆者は画像のフォーマットにはあまり頓着してこなかったので、「フラットな画像ならPNG」「込み入ったイラストはJPEG」「なんかWebPとかいうのもあるらしいけどよくわからん」くらいの解像度で適当に使っていました。しかし、最近の開発でLighthouseスコアのチューニングをしてみたところ、色々新しい知見が溜まったので、自分用の備忘録として残しておこうと思います。 3行まとめ ちゃんと複数の解像度の画像を用意しようね WebPやAVIFといった次世代フォーマットも使ってみようね <picture> と <source> は便利 画像のサイズを複数用意する 表示するディスプレイの解像度に合わせて、表示する画像の大きさを調整すること
はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 令和トラベルでは、海外旅行におけるあたらしい体験を目指す海外ツアー・ホテル予約アプリ「NEWT（ニュート）」を提供しています。NEWTではWebアプリを提供しており、Webアプリのパフォーマンスにおいて、画像は非常に重要な要素です。特に、ページの読み込み速度はカスタマー体験に直結するため、画像の最適化は欠かせません。Next.jsのImageコンポーネントは、画像最適化を容易にし、Webパフォーマンスを向上させる強力なツールです。 この記事では、next/imageのコア機能を3つのセクションに分けて解説し、Next.jsで画像最適化を行う方法を具体的に説明します🗺️ ※ この記事はVercel Meeetup #1で共有した内容を記事にしたものです。 next/imageの主要機能 React
今年サボった勉強を冬休みで全部取り戻す計画
どうも、仕事を納めてしまうと、何も予定がない人になってしまった人です... てなわけで、公式ドキュメント、リリースノート、信頼できる情報源全部読んじゃうぞという計画を立てました。計画倒れしないようにちゃんと読むことをブログで宣言します！ 何をするのか マジでやること何もないので、日頃サボったプログラミングの勉強を一気にしようと思っている。「勉強していない」なんていうと「嘘つけ」と言われそうだが、いつも必要になったことをその都度調べて誤魔化しているだけであり、読むのは本や記事といった誰かの二次三次情報なので、実は一次情報には触れていない。なので以下に挙げるドキュメントは実はちゃんと読んだことがない。全て雰囲気で使っている。 そのため自分は歳の割には未知になっている範囲がとても多く（この構文ってフリーレンぽくてなんかかっこいいよね）、未知の未知にとても弱いため、わかっている人から見るとおかしな
Next.js の API Route で動的コンテンツを配信して静的部分を CloudFront でキャッシュしてみた | DevelopersIO
西田@CX事業本部です。今回はNext.js を使って、ほぼほぼ静的サイトだけど一部だけ動的なサイトを低いコストでキャッシュさせる方法を考えてみました 作成するアプリ 今回ホストするサンプルアプリは、簡易なECサイトをイメージした Next.js を使って作成された、WEBアプリケーションです。商品一覧と商品の詳細ページがあり、ヘッダ部分にログインしたユーザーの情報が動的に表示される仕様です ヘッダ部分に動的に変更されキャッシュできない情報が表示されています。そのほかの部分は静的に生成され、キャッシュすることが可能なアプリケーションを想定しています WEBアプリケーションが提供するパスは以下です Path 画面 全体構成 今回作成するアプリケーションの全体構成です Cloudfront を前段に配置し、動的部分を提供する API Routes (/api) を配信する Next.js のプ
Astro 2.x から 3.0 へアップグレードした際に、レスポンシブイメージは対応していないため、ビルトインされている <Image /> コンポーネントの導入は見合わせることにしました。 しかし、本サイトのブログ記事において、パフォーマンスのボトルネックとなっているのは画像ファイルです。また、別のプロジェクトで Astro を使用するときにも、この課題に向き合わなければなりません。 そのため、この記事では Astro でレスポンシブイメージを実装する方法を考えていきます。 以降、Astro の getImage() 関数でレスポンシブイメージを実装する方法を解説していますが、問題点も見つかりました。特に、ホスティングサービス側でビルドする場合には注意が必要です。 本記事における Astro のバージョンは 3.1.4 を前提としています。 まず、候補として挙がるのは「Astro Im
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
要素の幅でレスポンシブ対応を行える！ コンテナークエリーの使い方 - ICS MEDIA
当ブログのレスポンシブコーディングについて ｜ TAKLOG
空世界 〜HTMLの永遠仕様探訪記、或いは、文字なきsrcにまつわる寥々たる考察について〜
Getting started with Web Performance 🚀 - HTMHell
【コーダー必見】効率化のためのChatGPTフル活用戦術+便利ツール集
A Blog Post With Every HTML Element
GitHub Supports Polar in FUNDING.yaml
News from WWDC24: WebKit in Safari 18 beta
解像度とフォーマット対応状況の両方に配慮してWebP画像やAVIF画像を扱う
モダンWEBサイトにおける画像最適化について - Qiita
画像最適化の舞台裏をのぞき見👀してnext/imageを使いこなす
Astro でレスポンシブイメージを実装する | grip on minds