スマートフォンで画像がぼやける対策【2倍じゃもう足りない!】

スマートフォンで画像がぼやける対策【2倍じゃもう足りない!】

webのあれこれ
2017/12/14
8
vanillaice (Akira)
vanillaice (Akira)
EducationSmartphoneTipsトラブル対処

何も考えずに画像を掲載するとスマートフォンでめっちゃぼやけるよ。
という記事を以前に書き、その原因・対処なども記しています。
その記事だけやたらアクセスが多いんですよね。
つまり多くのスマートフォンユーザーさんが困ってるってことよね。

スマートフォンで画像がぼやける際の対処と画像容量削減

スマートフォンで画像がぼやける際の対処と画像容量削減

スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・`) そしてもうひとつ、画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...

上記記事で 掲載幅に対して 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ブログのクセを攻略しながら画像対策。という予定(あくまでも予定)

Related post

Comments  8

黒猫
2017/12/14 (Thu) 19:58

こんばんは!

なんかややこしそうですね(^_^;
どんな感じで表示されるのか見てみたいです。あと速度もどれだけ速くなるのか気になります!

次回記事を楽しみにしています(^^)

Akira
2017/12/15 (Fri) 01:12

To 黒猫さん

黒猫さん、こんばんは (●'0'●)/

速度的にはどうでしょうね。
トップページが要約タイプならば私の方で(つまり製作者単位で)なんとか対策できるのですが。
全文タイプの場合にはユーザー個人の記事の書き方に依存します。

・画像掲載が多い
・htmlを記事内で使うことに抵抗がない

この条件下であれば効果が見込めます。
でもねぇ、記事書いてもたぶん実際にやってみようって人居ないと思う(笑)

さっちぃ
2018/02/15 (Thu) 16:00

画像の適性化

こんにちは。
ずっとAkiraさんのテンプレのお世話になっております。

今まで全文表示タイプのテンプレを使用&追記利用で記事を書いてたのですが、要約タイプに挑戦しようかと思いたったわけなんですが…
なるほど、記事毎のトップページに表示させる為に準備する画像は、最低でも横が828px必要になってくるってことですね。

すると、GTスコアだったか、ページスピード何とかで、スケータリングされた画像を適性化云々の指摘はスルーしても良いんでしょうか?

vanillaice (Akira)
Akira
2018/02/16 (Fri) 01:35

To さっちぃさん

こんばんは ( ゚Д゚)ノ

ごめんなさい。明日改めますー!

-------
改めまして。ありがとうございます :)

> スケータリングされた画像を適性化云々の指摘はスルーしても良いんでしょうか〜

スルーしても良いというよりも、スマホでのぼやけ解消を重要視するのであれば「スルーするしかない」という感じですね。
自身がどう折り合いをつけるのか、につきます。メンタル的に(笑)
GoogleでもAppleでも「ページ表示の速さ」と「高解像度ディスプレイでの画質保持」とが相互に上手く働かない点は問題視していると思います。
取り組みとして新しい拡張子(.heic)が登場したり、Googleも画像の遅延ロードをChromeに導入するという話しも出ています。

この2つはどう考えても逆のベクトルなので、どちらか一方を選んでもう一方を切り捨てるのか、それともバランスを考えて両者をほどほどにするのか、現時点ではユーザー選択しかないですよね (´・ω・`)

さっちぃ
2018/02/18 (Sun) 05:56

To Akiraさん

了解しました。

指摘よりも見た目重視でいきます!

vanillaice (Akira)
Akira
2018/02/18 (Sun) 15:23

To さっちぃさん

そうですね。なかなか悩ましい問題ですが、「スマホ 画像 ぼやける」の検索で私のところに辿り着く方が非常に多いのでやはり無視できないと思います(笑)

ye_reeves
2018/02/20 (Tue) 22:44

トップページ写真表示の件、解決致しました。返信③

akiraさんへ

返信遅くなりまして申し訳ございません。
トップページで写真が表示出来ないと質問させて頂いていた者ですが、
解決いたしました。
ありがとうございました。

またHP画面が左に寄っているとのご指摘もありがとうございます。
少しづつ直してみています。

ありがとうございました。
とても助かりました。

ye_reeves

vanillaice (Akira)
Akira
2018/02/21 (Wed) 00:04

To ye_reevesさん

こんばんは。
えーと。ちょっとどんな要件か忘れてしまいましたが解決したということでしょうか。
とりあえずお疲れ様でした (´・ω・`)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)