スマートフォン・デスクトップそれぞれに最適な画像を表示する -Adaptive Image
Post on:2011年9月2日
sponsors
画像を自動判定して、スマートフォンやデスクトップなどそれぞれの表示サイズに合わせて、最適なサイズに変更して画像を表示するPHP&JavaScriptを紹介します。
導入も簡単で、5分くらいでできる感じです。
[ad#ad-2]
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 ライブラリ
[ad#ad-2]
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」を参照ください。
sponsors
