スマホが登場してから、WEB画面の構造が複雑になってきたりしています。
パソコン、ガラケー
の2つの切替でよかったのが
スマホ
という画面サイズが異なるデバイスが登場してから、「アクセスしてくるデバイスによって切り替える画面」てのが増えて来ました。
現在では、アクセス数をみると スマホ > パソコン > ガラケー ということになってきているので、WEBサイトのスマホに向けての最適化は避けて通ることができません。
このスマホが厄介で、画面レイアウトやフォントのHTMLやCSS部分はそれなりにスマホブラウザが見やすく表示してくれるのですが、画像についてはうまくサイズ調節はしてくれなかったりします。
スマホは、画面サイズは端末によって違うので、HTMLをいくらレスポンシブにしたとしても、スマホ画面に合わせての「画像の切替」などという処理が必要になってきます。
切替 ということは、いくつかの画像サイズを実際に作成することになるのですが、面倒なので、WEBサイトへのアクセス時にサーバ側で画像を書き出しすることにします。
画像の処理というのは、サーバの負荷を上げますので、キャッシュの機能は必須だと思われます。
ということで、「Adaptive Images」というPHPライブラリを使ってやってみます。ライブラリといってもPHPスクリプトはひとつです。