経験知ロゴ

ブログの画像をRetinaディスプレイに対応させる方法

retina画像iPhoneやMac Bookなどの高解像度ディスプレイが増えています。

高解像度になると、ひとつひとつのドットが小さくなることで文字や画像が滑らかに表示されてとてもWebサイトもキレイに表示されます。

しかし、その恩恵を受けられるのは高解像度の画像を用意してあるサイトだけで、今までどおりの画像では逆にぼやけて汚く見えてしまいます。

そこで高解像度ディスプレイに対応させる方法を紹介します。

対応方法

高解像度のディスプレイに対応させるには主な方法を紹介。

CSSのMedia Query

CSSのMedia Queryを使い画面サイズごとに画面に合った解像度の画像を「background-image」で表示させる方法。

JavaScript

Retina.js」を使い、高解像度ディスプレイの場合「@2x」のプレフィックスが付いた画像を自動で読み込ませる方法。

pictureタグ

pictureタグを使い「source」属性で各画面サイズ、解像度に合わせた画像を指定する方法。「HTML Standard

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The president giving an award.">
</picture>

srcset 属性

「img」の「srcset」属性を使い各画面サイズ、解像度に合わせた画像を指定する方法。「HTML Standard

<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, 
     /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">

「picture」タグと「srcset」属性の違いは「なんでもかんでも<picture>要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点 – Rriver」で詳しく説明されている。

srcsetの使い方

このブログでは、上記4つの方法で書き方と実装方法が簡単だった「img」タグの「srcset」属性を使う方法を採用した。

まず、通常画像と解像度が2倍の画像を用意する。ファイル名の規則は特にないので自分が分かりやすいファイル名にする。
画像の指定属性は「src」と「srcset」の2つで行う。

src

「srcset」に対応していないブラウザ用に通常の「src」属性で画像を指定。

srcset

「ファイルパス」+「スペース」+「解像度」で画像を指定し、読み込みたい画像を「,」で区切り追加していく。

srcset="/uploads/150-marie-lloyd.jpg 1.5x, 
        /uploads/200-marie-lloyd.jpg 2x"

1.5倍の解像度の時は「/uploads/150-marie-lloyd.jpg」を読み込み、2倍の解像度の時は「/uploads/200-marie-lloyd.jpg」を読み込む。

因みに解像度指定の「1.5x」や「2x」の「x」はエックス。

タグの全体はこのようになる。

<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, 
     /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">

未対応ブラウザへの対応

Picturefill.js」を使うことで未対応ブラウザへの対応が可能。

ダウンロードして使っても良いがCDNでも使えるので

<script src="//cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>

をタグの前など書けば良い。

最新版URLは「jsDelivr – Free open source CDN for javascript libraries, jQuery plugins, CSS frameworks, Fonts and more」で。

週3日の副業で月50万

月50万稼げたら年収は600万で、普通の人以上の生活ができます。

それが週3日で稼げたら、残りの4日をどう過ごしますか?

  • 自分の趣味に全力を注ぐ
  • 家族との時間を増やし、子供の成長をしっかりと見守る
  • 毎週海外へ旅行へ行く
  • 新しいことに挑戦する
  • 何もせず、のんびり自由な時間を過ごす

週の半分以上が自分の好きなことに使えるのなら、人生は楽しい物になりますよね!

週2日の休みが増えるということは、

52週(1年) × 2日 = 104日

年間104日も増え、365日のうち208日も自分の時間に使えるのです!

更に、今30歳だとして、65歳まで働いたら、

104日 × 35年 = 3,640日

3,640日も変わってきます!!10年以上ですよ!10年!!

週2日の休みのために5日を無駄にする生活をいつまで続けますか?

週4日の自由たった3日で稼いで、自分のために自由に時間を使う生活をはじめましょう!

週3日で50万円稼げる案件は、業界最大級の案件を保有しているレバテックフリーランスで見つけられます。

1分で完了する無料登録で、時間の自由への一歩を踏み出しましょう!

おわりに

Retinaディスプレイなどの高解像度ディスプレはとてもキレイですが、このようなことをしっかり行わないとその恩恵を受けられません。

HTMLの仕様でもまだ定まっておらず、ブラウザの対応状況もまちまちなので、はやく決定的な指定方法が確立されて欲しいですね。

▼役に立ったらシェアをお願いします