今回も最近のＷｅｂでの動向を踏まえた技術的なお話しをしていきます。
前回も少しお話ししましたが、スマートフォンやタブレットでの画像表示は増えてきています。見やすさや理解への手助けという点ではとても有効です。
最近の屋外でのネット環境は４Ｇ（第４世代移動通信システム）がほぼ標準となり、以前のように画像を表示する時間を気にするようなことはいらなくなりました。２年後の2020年には５Ｇ（第５世代移動通信システム）の商用化も進んでいます。４Ｇの１００倍の速度ですから、高精度の画像でもすぐに表示されると思います。
しかし、容量的な制約はまだ残っています。大容量プランは提供されていますが、料金は決して安くありません。格安スマホと呼ばれる低価格の月額料金ですむサービスはだいたい３ＧＢ以下です。パソコンサイトのように普通の画像はもちろん、ちょっとした表までデザイン優先で画像にするのはあまり好ましいことではありません。
少し話が脱線しますがスマホでの画像サイズはちょっと曲者です。最近のスマホは高解像度になりました。昔の低い解像度のスマホと歩調を合わせるための工夫が必要になります。
そのため、パソコンのように画面サイズ（画素数）とブラウザで表示される画素数が一緒ではありません。デバイスピクセルと呼ばれる物理的な画素数とＣＳＳピクセルと呼ばれる表示用の画素数が異なっているのです。これはiPhone、Androidスマホの両方とも同じで年々差が大きくなっています。つまり、解像度の高いスマホに対応するにはＣＳＳの設定をきちんと行い、高解像度の画像を用意し、低解像度のスマホでも困らないように低解像度の画像も用意するといった複数の画像を用意しないときれいに見えないのです。
結果的に容量の制限を気にしながら、スマホの解像度に応じた画像を提供するのはなかなか大変なのです。かといって、パソコンの高解像度画像をそのままもってきて、表示サイズ(width、height)を変更させるのも望ましくありません。容量が大きくなるので通信量が増えるうえに表示に時間がかかるからです。
そこで今回紹介するのが、ＡＭＰ(Accelerated Mobile Pages)という手法です。アンプと呼びます。
ＡＭＰはGoogleとTwitterが共同で策定しているモバイル端末でのホームページを高速に表示させる仕組みです。表示速度をあげるためにいくつかのＨＴＭＬタグが禁止されていたり、専用のタグを使ったり、非同期スプリクトのみ許可されていたりと制約があります。ただし、対応しているページはGoogleにキャッシュ（一時的な保存）をしてもらえるので、高速なサーバーからページを見てもらうことができます。４倍の速度で表示されるとの話ですので、時間かかって表示されるページには大きな効果だと思います。
しかし、準備が意外と大変なせいか思ったより普及していません。読込速度を気にしなくていいような画像が少ないページでは効果も大きくない可能性があります。
facebookもInstant Articlesと呼ばれる仕組みがあります。こちらも設定することで読込スピードが速くなるそうです。サイトによっては10倍との話もありますがそこまでは早くないとの話も出ています。こちらも専用の手続きが必要なためにさらにひと手間かかりそうです。
Word PressのようなＣＭＳの場合は専用のプラグインがあるのでそれほど手間はかかりませんが制約はあります。
いずれにしても表示速度が速いと記事をきちんと読んでくれて、結果として離脱率が減るなどの効果はあるようです。画像が多めの記事を多く投稿するようなサイトの場合は検討する価値はありそうです。