[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

215users がブックマーク コメント 22

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

215 users coliss.com

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント22件

  • 注目コメント
  • 新着コメント
オーナーコメントを固定しています
coliss
オーナー レスポンシブ対応のwebp画像を実装するHTML。スニペットにどうぞ。

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

その他
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/

その他
オーナーコメントを固定しています
coliss
オーナー coliss レスポンシブ対応のwebp画像を実装するHTML。スニペットにどうぞ。

2021年05月26日 リンク

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

その他
ducktoon
めんどくさ!

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

2021年05月27日 リンク

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

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

2021年05月26日 リンク

その他
shimasoba
こうまでするメリットはないな。

その他
Helfard
いまいちメリットが分からない。

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

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

2021年05月26日 リンク

その他
solidstatesociety
まだまだ歪だな

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

2021年05月26日 リンク

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

その他
h_taiji
まゆこっち

その他
kijtra
まるで悪夢だな

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

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

2021年05月26日 リンク

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

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

2021年05月26日 リンク

その他
underd
あとでよむ

その他
samehadax
ウェッピ〜

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「これが完全版!レ...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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

ブックマークしたユーザー

  • yggdra_w2023年06月15日 yggdra_w
  • gazza0692022年07月25日 gazza069
  • lapin06172021年09月28日 lapin0617
  • kasahi2021年08月10日 kasahi
  • TempFile2021年07月29日 TempFile
  • heatman2021年06月25日 heatman
  • asa_kaz_x2021年05月28日 asa_kaz_x
  • tanupig2021年05月28日 tanupig
  • inazuma20732021年05月27日 inazuma2073
  • bleu-bleut2021年05月27日 bleu-bleut
  • shimbaco2021年05月27日 shimbaco
  • herakures2021年05月27日 herakures
  • ducktoon2021年05月27日 ducktoon
  • cometnote2021年05月27日 cometnote
  • hitomi01052021年05月27日 hitomi0105
  • kuyo2021年05月27日 kuyo
  • tokigami2021年05月27日 tokigami
  • internetkun2021年05月27日 internetkun
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /