2019-04-30imgのsrcsetをシンプルにレスポンシブ対応(要は全デバイス)でも大丈夫なルールを我流で定められないか?という思いでまとめました。PCもRetinaディスプレイになってきたし、srcsetが標準になるだろうし、WordPressとか画像自動化じゃない手打ちのレスポンシブHTMLで統合的に扱える簡単な単一方法はないか?と思ったからです。サンプルページを用意しました。PC&タブレット.jpg">上記でカスタムHTMLで手打ちの時もsrcset気兼ねなく使えるようになりました。スマホの横持ちは無視!というより軽さ重視srcsetでいいだろうWordPressの吐き出しもsrcsetになってるし、画像対応はいろいろあって前にも考察したけどsrcsetが今後標準になるだろう。HTMLのimgで画像のファイル・幅・解像度とかを条件指定できて便利なsrcset。マルチデバイス(スマホ・PC・タブレット)全部にしっかり対応しようと思うとsrcsetでもかなり複雑になる。メディア設定でサムネイルサイズに合わせてsrcsetが自動になってくれてますが、手打ちHTMLでは何個もサイズ違いの画像を用意しておくとか、もう無理不可能。手動アップで、かつレスポンシブ時の基準どうしようかな~ということです。@2xとか解像度分岐はレスポンシブでは意味なしsrcsetは2xと設定するとRetinaディスプレイと標準解像度ディスプレイとで分けてくれる。2x">PCサイトのみのRetinaディスプレイ対応には使える。PCとスマホ分岐しているページのPC側で使う分にはいいけど、レスポンシブで両方対応ってなるとスマホは元々RetinaだからPCのドデカイRetina画像をスマホでも読み込むことになって意味なし!PCサイトはもう@2x標準でよくね?PCもこれからRetinaディスプレイがほとんどで、スマホファーストも当たり前だし、PCのだけに条件分岐する面倒は不要かなと。PCはもう@2xを基準にしてしまおう!これはかなり強引な考えかもだけど、スマホ快適と統一srcsetが欲しい!を考えるとPCは2倍標準だけでいいんじゃないかな。パソコンは光やADSL回線が普通だろうし、2倍画像が標準解像度ディスプレイで読まれても変じゃないし。3倍解像度ディスプレイとか肉眼ではね、2倍で十分だしねスマホ含め。あと、CSS背景のbackground-sizeもIE9以上とか分岐も面倒で2倍画像だけにしたりもあるし。スマホとタブレットの境界は6と7インチタブレットの話になる前に、スマホとタブレットの境界の話を少し。MobileのMobileがなくなるのは暫定的に7インチから。Nexus6にはMobileあって、Nexus7にはMobile無いってだけだけど、以前に考察しているのと、体感的にも6インチまでがギリギリスマホかなって感じます。タブレットはいろんなサイズあるがiPad基準にNexus7は市場から消えたようですが、Huaweiのタブレットとか縦型タブレットがちょこちょこあって、Nexus7は縦で幅600pxブラウザサイズでちょっとスマホとタブレットを幅で切り分けるには都合が悪い。iPadの768pxだと何かと都合が良いのです。Plus(6と7は同じサイズ)だと、Android含めランドスケープ時の736pxぐらいがスマホ最大。iPadは768pxだから767px未満をスマホとクッキリ分けられる。縦型タブレットで幅600pxが混ざるとそうでもなくなってしまう。ここは強引にiPadをベースにしてしまえばいいんじゃないかって割り切りです。miniは小さいけどブラウザサイズはiPadと同じ768pxです。タブレットはPC側としよう(スマホ/PC&タブレット)タブレットはPC側にしてしまおうと思う理由は、やはりスマホが特殊だから。使用頻度や通信の軽さとかね、スマホファーストって意味でもスマホだけ特別扱いで考慮してsrcset単純記述にする意味でも理にかなってるのかなと。ProはもはやPCですし。PCサイトをタッチデバイス想定でデザインするのが今後ますます標準になるだろうし、タブレットはPCというよりも、PCはもうタブレットって感じ。何が何でも画像をキレイに見せるってことより、スマホの場合は速度が重要だから横持ち(ランドスケープ)の時の解像度まで考慮する必要はなくて、縦持ちのいつもの見られ方だけ考えれば画像ファイルサイズも肥大しないしいいかなって。スマホわざわざ横向きにした時に、画像の粗さなんて気にならないです。Plusブラウザサイズ幅414px(要は828px画像)以上の画像はスマホでは抑えたい。サンプルページはザックリ800pxです。まとめかなり我流の話になりました。CMS使わない時マジで楽。ホントはね、sizesとかvwとか使えばもっと細かく最適な画像を適用できるけど、画像をそもそも2枚以上作ってられるか!ってのもあるし、レスポンシブの手動ページで使えるimgのsrcsetルールが欲しかった訳で参考になるかどうかは謎ですが、結論こうなったって話でした。PC&タブレット.jpg">WordPress記事内でsrcsetの独自テストができないのでサンプルページでテスト。画像幅1600pxと800pxの2枚を用意。width="800"は紛らわしいので省いてあります。レスポンシブ対応のCSS設定してあります。