Retina imagesで4k/レティナ(Retina)ディスプレイを切り替える

Retina-images

Retina-imagesを利用して画像を切り替える方法を紹介します。
こちらは慣れない方にはスキル的にかなり厳しい内容です。
phpファイルの作成と設置、.htaccessにリダイレクト設定を書く、
scriptを2種類対応させる。

phpファイルと.htaccessの意味をのせておきます。

phpファイルとは

PHP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般的には PHP と省略して用いられており、これは「個人的なホームページ」を意味する英語の “Personal Home Page” に由来する。出典Wikipedia

 

.htaccessとは

.htaccess(ドットエイチティーアクセス)とは、Apacheを用いたWebサーバにおいて、ディレクトリ単位で設置及び設定を行える設定ファイルである。Apacheではhttpd.confという設定ファイルでApacheの設定を行うが、Webサーバの要となる設定ファイルであるため、Webサーバの管理者でないと設定を変更することができない。.htaccessはhttpd.confで.htaccessの利用を許可している場合、Webサーバ管理者のみならずウェブサイトの管理者レベルでApacheの一部設定を行えるようにしたものである。出典Wikipedia

 

メリットはRetina.jsのデメリットを解決しているので、アクセスが一度で済みますからアクセスの効率はさがりません。

デメリットは初心者には設定はむずかしいです。
phpファイルも.htaccessもscriptもミスをするとサイトのデザインが狂うか、アクセスができなくなるので注意が必要です。
必ずバックアップを準備をしてからはじめていただくことをおすすめしています。

 

Retina-imagesの設置手順の流れ

  1. tetinaimages.phpを作成してサーバー内に設置します。
  2. mod_rewriteモジュールを利用して画像がtetinaimages.phpに参照するように.htaccessにリダイレクト設定を書きます。
  3. headの最初にcookie確認と生成用のスクリプトを入れます。
  4. <body>タグ(</body>ではありません)のすぐ後にretina imagesのスクリプトをいれます。

とても簡単に書いてありますが、単語一個ずつの意味もなれない方にはむずかしいですね。
困りましたら問い合わせください。

 

2種類の画像を切り替えて表示

picturefill1picturefill2

疑問・質問はメールフォームでご連絡ください。