スマートフォン・デスクトップそれぞれに最適な画像を表示する -Adaptive Image

画像を自動判定して、スマートフォンやデスクトップなどそれぞれの表示サイズに合わせて、最適なサイズに変更して画像を表示するPHP&JavaScriptを紹介します。
導入も簡単で、5分くらいでできる感じです。

サイトのキャプチャ

Adaptive Images in HTML

Adaptive Imagesのデモ

オリジナルの画像はサイズ1900x1069px、容量631Kbで、ブラウザのサイズに合わせて、ファイルサイズを変更して画像を表示します。
ファイルサイズの変更に伴い、サイズ自体も最適化されます。

サイトのキャプチャ
ブラウザ
幅:1600px
画像
ファイルサイズ:140Kb
サイトのキャプチャ
ブラウザ
幅:1200px
画像
ファイルサイズ:77kb
サイトのキャプチャ
ブラウザ
幅:600px
画像
ファイルサイズ:51kb
サイトのキャプチャ
ブラウザ
幅:450px
画像
ファイルサイズ:24kb

表示サイズの判定は、下記の4つです。

サイトのキャプチャ
  • 1382px x 778px
  • 992px x 559px
  • 768px x 443px
  • 480px x 271px

Adaptive Imagesの主な特徴

  • さまざまなCMSで動作します。
  • 既存のサイトへの導入も簡単です。
  • サーバー上で動作します。
  • スマートフォンでの表示を考慮しています。
  • 数分でセットアップができます。

必要条件

  • Apache 2
  • PHP 5.x
  • GD ライブラリ

Adaptive Imagesのセットアップ

セットアップは、5分もあれば充分です。

  • 「.htaccess」と「adaptive-images.php」をコピーして、ルートのディレクトリにアップロードします。
  • 「ai-cache」というディレクトリを作成し、書き込み可にします。
  • 使用するページのhead要素内に、2行のJavaScriptを記述します。

JavaScript

このスクリプトは画像より上に記述してください。

var device_width=screen.width;var device_height=screen.height;if(device_width>device_height){ai_width=device_width;}else{ai_width=device_height;}
document.cookie='resolution='+ai_width+'; expires=; path=/';

詳しくは、ダウンロードファイルの「instructions.htm」を参照ください。

top of page

©2017 coliss