img srcsetの最適解！サイズ違い画像いくつも用意してられない

6,435views／投稿 2017-03-01／更新 2019-04-30

imgのsrcsetをシンプルにレスポンシブ対応（要は全デバイス）でも大丈夫なルールを我流で定められないか？という思いでまとめました。

PCもRetinaディスプレイになってきたし、srcsetが標準になるだろうし、WordPressとか画像自動化じゃない手打ちのレスポンシブHTMLで統合的に扱える簡単な単一方法はないか？と思ったからです。

サンプルページを用意しました。

1. 画像の用意は２枚まで
2. とにかくシンプルにしたい（sizesとかvwとか嫌だ）
3. レスポンシブでスマホもPCも全部対応したい
4. タブレットはいろんなサイズあるがiPad基準に
5. タブレットはPC側としよう（スマホ／PC＆タブレット）
6. スマホの横持ちは無視！というより軽さ重視

結論はこれです

<img src="スマホ画像.jpg" srcset="スマホ画像.jpg 767w, PC＆タブレット.jpg">

上記でカスタムHTMLで手打ちの時もsrcset気兼ねなく使えるようになりました。

srcsetでいいだろう

WordPressの吐き出しもsrcsetになってるし、画像対応はいろいろあって前にも考察したけどsrcsetが今後標準になるだろう。

HTMLのimgで画像のファイル・幅・解像度とかを条件指定できて便利なsrcset。でも、マルチデバイス（スマホ・PC・タブレット）全部にしっかり対応しようと思うとsrcsetでもかなり複雑になる。

WordPressだと、
設定 ＞ メディア ＞ メディア設定

でサムネイルサイズに合わせてsrcsetが自動になってくれてますが、手打ちHTMLでは何個もサイズ違いの画像を用意しておくとか、もう無理不可能。手動アップで、かつレスポンシブ時の基準どうしようかな～ということです。

@2xとか解像度分岐はレスポンシブでは意味なし

srcsetは2xと設定するとRetinaディスプレイと標準解像度ディスプレイとで分けてくれる。

<img src="標準解像度ディスプレイ.jpg" srcset="Retinaディスプレイ.jpg 2x">

PCサイトのみのRetinaディスプレイ対応には使える。PCとスマホ分岐しているページのPC側で使う分にはいいけど、レスポンシブで両方対応ってなるとスマホは元々RetinaだからPCのドデカイRetina画像をスマホでも読み込むことになって意味なし！

PCサイトはもう@2x標準でよくね？

PCもこれからRetinaディスプレイがほとんどで、スマホファーストも当たり前だし、PCのだけに条件分岐する面倒は不要かなと。なので、PCはもう@2xを基準にしてしまおう！これはかなり強引な考えかもだけど、スマホ快適と統一srcsetが欲しい！を考えるとPCは２倍標準だけでいいんじゃないかな。

パソコンは光やADSL回線が普通だろうし、２倍画像が標準解像度ディスプレイで読まれても変じゃないし。３倍解像度ディスプレイとか肉眼ではね、２倍で十分だしねスマホ含め。

あと、CSS背景のbackground-sizeもIE9以上とか分岐も面倒で２倍画像だけにしたりもあるし。

スマホとタブレットの境界は６と７インチ

タブレットの話になる前に、スマホとタブレットの境界の話を少し。UAのメディアクエリでAndroidかAndroid Mobileかってことで分岐することが多いと思いますが、Android MobileのMobileがなくなるのは暫定的に７インチから。Nexus6にはMobileあって、Nexus7にはMobile無いってだけだけど、以前に考察しているのと、体感的にも6インチまでがギリギリスマホかなって感じます。

タブレットはいろんなサイズあるがiPad基準に

Nexus7は市場から消えたようですが、Huaweiのタブレットとか縦型タブレットがちょこちょこあって、Nexus7は縦で幅600pxブラウザサイズでちょっとスマホとタブレットを幅で切り分けるには都合が悪い。iPadの768pxだと何かと都合が良いのです。

大きいスマホのブラウザサイズiPhone Plus（6と7は同じサイズ）だと、Android含めランドスケープ時の736pxぐらいがスマホ最大。iPadは768pxだから767px未満をスマホとクッキリ分けられる。でも縦型タブレットで幅600pxが混ざるとそうでもなくなってしまう。ここは強引にiPadをベースにしてしまえばいいんじゃないかって割り切りです。

ちなみに、iPad miniは小さいけどブラウザサイズはiPadと同じ768pxです。

タブレットはPC側としよう（スマホ／PC＆タブレット）

タブレットはPC側にしてしまおうと思う理由は、やはりスマホが特殊だから。使用頻度や通信の軽さとかね、スマホファーストって意味でもスマホだけ特別扱いで考慮してsrcset単純記述にする意味でも理にかなってるのかなと。iPad ProはもはやPCですし。

さらに、PCサイトをタッチデバイス想定でデザインするのが今後ますます標準になるだろうし、タブレットはPCというよりも、PCはもうタブレットって感じ。

スマホの横持ちは無視！というより軽さ重視

何が何でも画像をキレイに見せるってことより、スマホの場合は速度が重要だから横持ち（ランドスケープ）の時の解像度まで考慮する必要はなくて、縦持ちのいつもの見られ方だけ考えれば画像ファイルサイズも肥大しないしいいかなって。スマホわざわざ横向きにした時に、画像の粗さなんて気にならないです。

iPhone 7 Plusブラウザサイズ幅414px（要は828px画像）以上の画像はスマホでは抑えたい。なので、サンプルページはザックリ800pxです。

まとめ

かなり我流の話になりました。でもCMS使わない時マジで楽。

ホントはね、sizesとかvwとか使えばもっと細かく最適な画像を適用できるけど、画像をそもそも２枚以上作ってられるか！ってのもあるし、レスポンシブの手動ページで使えるimgのsrcsetルールが欲しかった訳で参考になるかどうかは謎ですが、結論こうなったって話でした。

<img src="スマホ画像.jpg" srcset="スマホ画像.jpg 767w, PC＆タブレット.jpg">

WordPress記事内でsrcsetの独自テストができないのでサンプルページでテスト。

• 画像幅1600pxと800pxの２枚を用意。
• width="800"は紛らわしいので省いてあります。
• レスポンシブ対応のCSS設定してあります。img { max-width: 100%; height: auto;}

⇒ サンプルページへ