CSS image-set() ジェネレーター

レスポンシブ画像のためのCSS image-set()関数コードを生成

プリセット:

CSSプロパティ:

フォールバックURL:

image-set()未対応ブラウザ用のフォールバック画像

画像バリエーション:

image-set()について:

デバイスの解像度に応じて最適な画像を自動選択
WebP/AVIFなど最新フォーマットに対応
ブラウザが対応形式を自動判定
Safari用に-webkit-プレフィックスが必要
未対応ブラウザ用にフォールバックを指定

生成されたCSS:

.element {
  /* フォールバック */
  background-image: url("image.jpg");

  /* Webkit (Safari) */
  background-image: -webkit-image-set(
  url("image.webp") 1x type("image/webp"),
  url("image@2x.webp") 2x type("image/webp"),
  url("image.jpg") 1x type("image/jpg"),
  url("image@2x.jpg") 2x type("image/jpg")
);

  /* Standard */
  background-image: image-set(
  url("image.webp") 1x type("image/webp"),
  url("image@2x.webp") 2x type("image/webp"),
  url("image.jpg") 1x type("image/jpg"),
  url("image@2x.jpg") 2x type("image/jpg")
);
}

完全なHTMLサンプル:

<!DOCTYPE html>
<html>
<head>
  <style>
.element {
  /* フォールバック */
  background-image: url("image.jpg");

  /* Webkit (Safari) */
  background-image: -webkit-image-set(
  url("image.webp") 1x type("image/webp"),
  url("image@2x.webp") 2x type("image/webp"),
  url("image.jpg") 1x type("image/jpg"),
  url("image@2x.jpg") 2x type("image/jpg")
);

  /* Standard */
  background-image: image-set(
  url("image.webp") 1x type("image/webp"),
  url("image@2x.webp") 2x type("image/webp"),
  url("image.jpg") 1x type("image/jpg"),
  url("image@2x.jpg") 2x type("image/jpg")
);
}
  </style>
</head>
<body>
  <div class="element" style="width: 400px; height: 300px; background-size: cover;"></div>
</body>
</html>

ブラウザサポート:

Chrome/Edge:113+

Safari:14+ (-webkit-)

Firefox:90+