何も考えずに画像を掲載するとスマートフォンでめっちゃぼやけるよ。
という記事を以前に書き、その原因・対処なども記しています。
その記事だけやたらアクセスが多いんですよね。
つまり多くのスマートフォンユーザーさんが困ってるってことよね。
スマートフォンで画像がぼやける際の対処と画像容量削減
スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・｀) そしてもうひとつ、画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...
上記記事で 掲載幅に対して 2倍 のサイズを準備しないとぼやけますよ！ というのを書いたのですが。
もう2倍じゃ足りないんだッ！
スマートフォンのほとんどは「高解像度ディスプレイ」
「画面解像度」とかさ。「dpi」とかさ。
その仕組とかそういう説明はもういいじゃん。難しいし (´・ｪ・｀) ←
ぼやけサンプル画像を掲載します ↓(クリックで拡大表示)
上の画像がモヤってる。
何度も言うように、原因は 掲載寸と実寸が同じだから。
対処法は 実寸を掲載寸の2倍にすること。
今となっては高解像度ディスプレイ不採用のスマホを探すほうが難しいわけですから、原寸掲載してしまうとほとんどのスマホユーザーさんが「なんかこの画像ぼやけとる。」という印象を持つことになります。
「スマホで〜」という表現をしていますが、パソコンでも同じです。
4K, 5Kなどの高解像度ディスプレイが採用されているものはやはりモヤっとした印象になります。
iPhoneは2倍、Androidは3倍
今のところiPhoneは2倍サイズでOKですが、Androidは機種によっては 1.5倍 もありますし 3倍 必要なものもあります。
3倍というと、スマホ現存機種最大横画面幅は 414px ですから、横いっぱいに表示したいのであれば単純計算で
1242px
必要ってことになります。
えー…。マジで言ってんの？ （￣∀￣；）
でもしょうがないじゃん。そういう仕組みなんだから (∵`)
今後出てくる機種もさらに高解像度になっていくと思うんですよね。
すると必要とされる原寸が4倍とか5倍とかになってくる。
まぁ、どこかで折り合いをつけないとかなわんな、という感じ。
画質を高くしてもぼやける
デバイスの画面解像度とはまた別で、画像自体も解像度というのを持ってます。
混乱しますので「画質」と表現しますね。
じゃあ例えば500pxで掲載する画像の「質」を上げたらどうなるのか。
jpgで容量削減すると100KBだとします。ならば同じ画像をより高画質保存できるpngを選択肢、容量も削減せず800KBで残したらどうか、と。
画質を上げたところでぼやけは解消されません。
この問題に関わりがあるのは画像の「容量」や「画質」ではなく 縱橫のサイズ(寸法) ですので、pngにしようが高画質だろうが関係ありません。容量取られるだけ無駄です。
真逆の方向へ進むwebの常識
現在のwebでは「ページ表示スピードをなるべく速くしよう」という流れがありますよね。
スピードの観点から行くと 画像は掲載寸と実寸を揃えるべき という考え方に落ち着きます。
img要素は横(width)と縦(height)の寸法を明示した方が読み込みが速いですし、サイズが大きければそれと比例して容量も大きくなりますから表示スピードに影響します。
ところがここまで記したように、現在はスマホからの閲覧がパソコン閲覧を上回るような状況です。
そして実際にスマホユーザーさんが「ぼやけるぅ (；ωq｀)」ってことを言ってるわけよ。
こちらの観点で行くと今度は 画像の原寸は掲載寸の倍以上は必要だ という結論に。
それって真逆の理論じゃん。
画像掲載に対するhtml的アプローチ
ここからは提案的な内容になります。
html5の新要素に picture要素 というのがあるんですね。
このピクチャ要素の使い道・目的を簡単に説明すると
- デバイス幅によって表示する画像を変更する(パソコンでは大きい画像を、スマホでは小さめの画像をと振り分ける)
- 高解像度ディスプレイ用と通常ディスプレイ用で振り分ける
- レスポンシブイメージ
最後太字にしています。
<picture> というのは レスポンシブを強く意識したhtmlタグ なんですね。
レスポンシブ「デザイン」というのはデザインの一手法であり、htmlの定義とは直接関わりが無いのですが。
htmlレベルでレスポンシブをサポートするというすごい事態になっております(笑)
まぁもちろんデザインサポートというよりも デバイス別 の意識と言った方が正しいんですけども。
html5.1(2016年11月1日 正式勧告) で追加された新要素ですので、当然ですがhtml4のテンプレートでは利用できません。
そして既に開発が終了している IEは最終バージョンの11でも非対応。
いずれ対応するかと待ってもそれはありません。なにせもうMicrosoftが見切りをつけたブラウザなので。
なのでIEはサクっと無視するとして、各ブラウザの実装を待つばかり。
Google ChromeやFirefoxといった有名どころはとっくに実装済み。つまりpicture要素が使えます。
具体的な使い方(htmlの書き方など)はまた別で記事にします。
例えば2倍の画像が必要というのを遵守して、パソコンで800px掲載するために1600pxの実寸画像を用意したとします。
でもいくら頑張ってもスマホの画面は最大でも414pxなのですから、1600pxも必要ないわけだ。
じゃあ、スマホでは同じ画像のサイズ違い828pxのものを表示しましょう、というのがpicture要素です。
レスポンシブデザインテンプレートを採用している人にとっては朗報だと思います。
使いこなせるかどうかは別として。
次回予告
画像の対策で「遅延読み込み」と「picture要素」について書く予定です。
この2つを組み合わせることで相反する2つの流れになんとか折り合いを、というところでしょうか。
ただ先に告知をしておくと FC2ブログで使いこなすのはすげー難しいよ とだけ ^^;
難解ということではなく、FC2ブログのシステム上のことで。
FC2ブログのクセを攻略しながら画像対策。という予定(あくまでも予定)
There are no comments yet.