sizes 属性関連付けた画像ファイルのサイズを指定する

sizes 属性は、link 要素によって関連付けられた画像ファイルなどのサイズを指定します。

sizes 属性は rel="icon" が指定された link 要素でのみ使用できます。値は 「横幅x高さ」 の形式、例えば 16x16 のように指定します。 16X16 のように 「x」 は大文字でも構いません。

また、値は半角スペースで区切ることで複数指定することもできます。例えばマルチアイコンのように、1つのファイルに複数サイズの画像が含まれているような場合に各サイズを表すことができます。

また、picture 要素内において、複数のイメージソースを指定するために使用される source 要素では、この sizes 属性に加えて、srcset 属性media 属性を組み合わせて指定することで、デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能になります。

サンプルソースを見る

sizes 属性の仕様

この属性を使用できる要素

sizes 属性のサンプルソース

<!DOCTYPE html>
<html>
 <head>
  <title>サンプル</title>
  <link rel="icon" href="favicon.png" sizes="16x16" type="image/png" />
  <link rel="icon" href="windows.ico" sizes="32x32 48x48" type="image/vnd.microsoft.icon" />
  <link rel="icon" href="mac.icns" sizes="128x128 512x512 8192x8192 32768x32768" />
  <link rel="icon" href="iphone.png" sizes="57x57" type="image/png" />
  <link rel="icon" href="gnome.svg" sizes="any" type="image/svg+xml" />
  <link rel="stylesheet" href="lsforums.css" />
 </head>
 <body>

W3C HTML5 仕様書

The sizes attribute