TOOL便利ツール
レスポンシブデザイン・Retinaディスプレイ対応 IMGタグ生成ツール
■ IMGタグの出力結果 ■
<img>画像のURL・サイズ
imgタグを対応させる範囲を選択します。各デバイスごとにサイズを指定する方法(幅指定)かretainaディスプレイのみに対応させる方法(倍率指定)かを選択してください。
デバイスごとに画像を追加
WEBサイトを高速表示させるため、ブラウザの画面幅に応じて表示されるサイズ違いの複数枚の同じ画像を登録しましょう。
メイン画像に一番大きいサイズの画像を登録します。
画像幅は必須です。
Retina対応画像を登録
retinaディスプレイに対応するため、通常のサイズの画像と2倍のサイズの画像を登録しましょう。
- 1x
- 2x
画像の最適化
各タグ属性を付与して画像の読み込みをコントロールします。
decoding属性
ブラウザが画像のデコード（解釈）をどのように行うかを指定します。
fetchpriority属性
ブラウザが画像の取得にどの程度の優先度を持たせるかを指定します。
loading属性
画像の遅延読み込み（レイジーローディング）を制御します。