2020年現在のコスパのいい画像サイズ（持論）

コスパいい = 最小限の画像サイズで現在普及しているデバイスになるべく対応する。という意味。

結論：下記の4サイズ

画像の使用シーンがウィンドウいっぱいまで広げるものの前提。
アイコンなどの場合は適宜小さいサイズにする（mediaQueryの条件は流用できると思う）

• 750px
• 1440px
• 2048px
• 4096px

SCSS （PC/SPで画像の画角共通、AutoPrefix前提）

// ベーシックなスマフォ用
// eg:iPhoneX 375@2x = 750
.image {
  background-image: url(750.jpg);
}

// ノートPCと高解像度スマフォ用
// eg:iPhoneXProMax 414@3x = 1242
@media (min-width: 768px),
       (min-resolution: 3dppx) {
  .image {
    background-image: url(1440.jpg);
  }
}

// デスクトップPCとタブレット用
// eg:iPad 768@2x = 1536
// eg:iPadPro 1024@2x = 2048
@media (min-width: 1441px),
       (min-width: 768px) and (min-resolution: 2dppx) {
  .image {
    background-image: url(2048.jpg);
  }
}

// 高解像度外部モニター用
@media (min-width: 1025px) and (min-resolution: 2dppx) {
  .image {
    background-image: url(4096.jpg);
  }
}

img（PC/SPで画像の画角共通）

• cssのmediaは最後に条件のあった設定が適応されるが、sourceのmediaは最初に条件のあった設定が適応されるので定義の順番に注意
• imgのsrcにはsourceタグに対応していないのは旧デスクトップPCと仮定し、通常デスクトップPCの最大サイズである1920pxを想定して 2048.jpg を指定しておく

<picture>
  <source media="(min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1025px) and (min-resolution: 2dppx)" srcset="4096.jpg" />
  <source media="(min-width: 1441px), (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 768px) and (min-resolution: 2dppx)" srcset="2048.jpg" />
  <source media="(min-width: 768px), (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx)" srcset="1440.jpg" />
  <source media="(max-width: 767px)" srcset="750.jpg" />
  <img src="2048.jpg" />
</picture>

SCSS （PC/SPで画像の画角別々、AutoPrefix前提）

まだ調整中

// ベーシックなスマフォ用
.image {
  background-image: url([e-mail]);
}

@media (max-resolution: 1dppx) {
  // ノートPC
  @media (min-width: 768px) {
    .image {
      background-image: url([e-mail]);
    }
  }

  // デスクトップPC
  @media (min-width: 1441px) {
    .image {
      background-image: url([e-mail]);
    }
  }
}

// 高解像度外部モニター用
// max-resolutionをサポートしていない古いデスクトップはどうする？ -> IEは dpi のみサポート
//@media (min-width: 1025px) and (min-resolution: 2dppx) {
//  .image {
//    background-image: url(4096.jpg);
//  }
//}

@media (min-resolution: 2dppx) {
  // タブレット用
  @media (min-width: 768px) {
    .image {
      background-image: url([e-mail]);
    }
  }
}

// 高解像度スマフォ用
@media (min-resolution: 3dppx) {
  @media (max-width: 767px) {
    .image {
      background-image: url([e-mail]);
    }
  }
}