これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード

画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版

[coliss]

レスポンシブ対応のwebp画像を実装するHTML。スニペットにどうぞ。

[helldeath]

デフォルトのPhotoshopやIllustratorでかんたんにwebp出力できるならありがたいんだが…。

[spark7]

アホらしくて追従する気にもなれん「こんな大変なことをしなければならないのか」

[w_bonbon]

IEが無くなった後でもBigsur以前のSafariがクソっ。　それさえ解決すればjpg/pngへのフォールバック無しにシンプルにwebp変換かけちゃうんだけど、色んな拡張子のファイル所持するのも中々現実的でなくてね…。

[internetkun]

この後さらにWebP 2が控えているというね

[yarumato]

MozJPEG製のjpgファイルはサイズでもwebpと同等といわれてるし、jpg/pngでいいかな。

[kagioo2uma]

IEも死ぬし、これからは心置きなくwebp使えるということかな

[blueboy]

対応情報は正しくない。iOS 版の safari は対応しているが、MS OS 版の safari が対応したのは 2020年末であり、それ以前のバージョンは対応していない。→　https://www.suzukikenichi.com/blog/safari-on-big-sur-now-supports-webp/

[inazuma2073]

フォトショップの「書き出し」で選べるようになるまでWebpはサーバーサイドで扱うものって思ってる。

[ducktoon]

めんどくさ！

[threetimes]

AkamaiとかCloudflareとかのCDN側で画像を最適化してくれるものが今後主流になってくれることを願う。webpへの変換渡河もしてくれし。まあ費用はそれなりにするけどコーダーさんに頑張ってもらうよりはね

[shimasoba]

こうまでするメリットはないな。

[Helfard]

いまいちメリットが分からない。

[mr_mayama]

“画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。”

[solidstatesociety]

まだまだ歪だな

[ultimatebreak]

金あるならimgix使う、金ないならjpgとpng使い分けでいいよ

[h_taiji]

まゆこっち

[kijtra]

まるで悪夢だな

[cheep-int]

レスポンシブル画像ちゃんとやろうとするとこんなにややこしいのか

[mayumayu_nimolove]

自分の首を絞めてないかなー。jpgだけで済む気がする。gulpとかで高解像度画像ひとつで何でも書き出せるようにしてるなら別だけど。

[underd]

あとでよむ

[samehadax]

ウェッピ〜