Xや最新のAndroidなど、超高精密度の液晶ディスプレイを搭載したデバイスが続々登場しています。いまや、常に手元に置けるスマホが、Webサイトを閲覧するもっとも身近な端末です。サイズやデータの持たせ方など、スマホで扱う画像にはどのようなトレンドがあるかを調べてみました。この機会にぜひ旧来の常識からアップデートしてください。AMOLED」といった名前を聞いたことがある人は多いと思います。どちらも高精細液晶ディスプレイにつけたニックネームですが、滑らかで美しい表示のディスプレイは、目に優しいことが実感できますよね。液晶の粒子が見えるようなモノクロディスプレイで携帯メールを送信していた筆者のような世代にとっては、隔世の感があります(笑)。このような高精密度ディスプレイは、従来のPCのディスプレイの2倍程度の密度でピクセルが表示されます。模式図にすると、次のようなイメージです。現在、オフィスなどで使われているノートパソコンのディスプレイ解像度は、フルHD(1980×1080ピクセル)〜WQHD(2560×1440ピクセル)程度が一般的です。13インチノートパソコンではこれ以下の場合も珍しくありません。Plus以降はフルHDに対応しており、現在ではさらに上のクワッドHD(2560×1440ピクセル)や4K(3840×2160)ピクセルのスマホも出ています。小さな手のひらサイズにパソコンの画面以上の画面解像度をぎゅっと圧縮して閲覧しているわけです。Xは3倍で458ppiの細かさ(ppiは1インチの中に入るピクセル粒の数を表します。Premium」のように4Kを実現しているディスプレイでは、801ppiという細かさになるのだとか。ここまで来るともはや「肉眼で違いがわかるかな」という世界に入ってきているのかもしれません。ページ表示を軽くするために画像でやるべきこと以前は、モバイル向けの画像は「小さく軽く」、PC向けの画像は「大きめ」というのが一般的な考え方でした。不安定な通信網を使うこともあるモバイルでは「表示を軽く」すべきなのは今でも変わりませんが、決してただ「小さく」すればいいわけではなくなってきました。上記の理由で物理的なスマホサイズに合わせて画像を小さくしてしまうと画像が粗くぼやけて見えてしまうからです。左は画像の解像度が足りている場合、右は足りていない場合の例スマホ画像作成時の基準サイズはどう決める?スマホ画面の高解像度化に対応すべきとは言え、すべてのスマホに最適化したページを作ることはとてもできません。どこまでをターゲットにするか考えるなら、ひと世代前くらいのスマホサイズをカバーするのが一つの目安となるでしょう。スマホサイトは縦方向に持ったときの幅を基準にするので、スマホ用のWeb画像は幅750ピクセルか、1000ピクセルで使うことを前提に加工しましょう。▼スマホ時代の画像サイズについては、詳しく別記事でご紹介しています。大きすぎる画像をそのまま使うのを避ける大きい画像であるほどいいかと言えば、ページが重くなるのでもちろんNGです。気軽に撮影できるデジカメやスマホの写真でも、幅4000ピクセルとか8000ピクセルなど余裕であります。そのままWebデザインに使ってもレイアウト上は縮小されるので気にならなくても、読み込みに何倍も通信量を食ってしまいます。表示されないページにイライラして閉じられてしまうことはもちろん、Googleの評価も下がりSEOにも悪影響を及ぼしかねません。画像でなくても表現できる部分は画像化しない以前から言われていますが、写真やイラストといった画像でなければならない箇所以外、特にボタンや文字の見出しなどを画像で加工するのは避けましょう。表示がボケる、重くなるリスクがある以外にアクセシビリティの面からも使いづらいサイトになるからです。デザイン装飾は、画像の代わりにCSSなどを使って表現しましょう。BiNDでいえば、ボタンパーツは積極的にテキストリンク機能を使いましょう。ボタンをテキストリンクで表現。画像化しないことで更新や修正も簡単になる。3.JPEGだけではない、Web画像で使われる形式Web用の画像形式といえば、写真などを美しいまま小容量に圧縮できるJPEGが定番ですが、ほかにも使われる画像形式が出てきましたので確認しましょう。Googleが開発したWebPGoogleが開発したオープンソースの画像形式でウェッピーなどと呼ばれます。Googleのサイトではよく使われています。JPEGより圧縮率が高いだけでなく、アルファチャンネルが扱えるので透明画像が作れる、アニメーションが作れるというメリットがあります。古い画像編集ソフトで開くことができない・作成できないというデメリットがありますが、オンラインの無料のサービスなどが公開されているので、個別に変換することもできます。Illustratorで描画できるベクターデータと同じく、拡大・縮小をしても画像が粗くなることがありません。Illustratorで作成したイラストや図も、形式を選んで書き出しができます。Magic」のようなものを使い変換することもできます。いまひとつ普及が進んでいないのは、CSSでできる表現も多く、あえてSVGにしなくてもなんとかなるという判断からかもしれません。画像でなければならないが文字を含む図版(家系図や組織図のような複雑なもの)はSVGを使うことはSEO面でも効果が期待できると思います。※これらの画像形式は現在BiNDでは画像パーツとして読み込めません。HTMLタグとして挿入する方法で対応可能です。Web制作の技術は日進月歩ですし、レスポンシブウェブに対応するためWeb画像の扱いもだいぶん変化しています。本業と並行して自社のホームページを管理している場合などは、知識のアップデートをするのも一苦労しますよね。そんな方にはBiNDはおすすめです。レスポンシブサイト対応なので「どの画像幅か」と悩むことなくBiND側で画像サイズを自動調整します。新しくなる、BiNDの画像編集ツール「SiGN」で高度な編集機能もでき、画像加工ソフトの購入も必要なし!ぜひ、お試しください。BiNDupを無料で試してみる記事のポイントスマホ用の画像は「PC画像より小さく」ではなく、むしろ2倍のサイズを用意モバイルでは特にページ表示の軽さを意識。CAMPで最も読まれた記事は?コンセプト。