srcsetはなぜ必要?
同じ画像でも、モバイルとデスクトップで実際に必要なピクセルサイズは大きく異なります。大きな元画像だけを使うとモバイルでもデスクトップ用の重いファイルをそのまま読み込んで表示が遅くなり、逆に小さい画像だけを使うと大画面で画質が崩れます。srcsetとsizes属性を組み合わせることで、ブラウザがビューポートサイズと画面密度に合った最適な画像ファイルを自動的に選択して読み込みます。
この計算機は元画像の幅と画面で占める比率（%）を入力すると、モバイルから大画面まで主要なビューポートごとに必要な画像幅を計算し、標準サイズに合わせて整理します。生成されたsrcsetとsizesのコードをそのままimgタグに貼り付けて使用できます。
よくある質問
srcsetとsizes属性はなぜ必要ですか?
ブラウザが画面サイズに合った画像ファイルを選んで読み込むようにし、不要に大きな画像のダウンロードを防いで読み込み速度を最適化します。
画像は何段階に分けて用意すべき?
通常は3〜5段階で十分です。細分化しすぎるとサーバーリクエストや管理コストが増えることがあります。