【バグ対策】Retinaディスプレイ機種で見ると「ぼやける」画像ファイルの対処方法

2019.03.20　最終更新：2023.06.25
CATEGORY : WEB関連

WEBページのアクセス速度アップ対応しているときに、やっぱり壁になってたこの問題(；・∀・)

実際の表示サイズより画面サイズの大きいファイルを表示しない限り、Retina対応が出来ないので…。

とりあえず結論だけ…

アクセス速度アップも考えた完全対応する手段が見つからないので、好きに対応しましょう(ノД｀)

一応Retinaディスプレイってなんぞよ？って方向けの説明と、一応対応方法を残しておきます。

Retinaディスプレイってなんぞよ？(´・ω・｀)

ウィキペディアの専用ページにこういう風に意味を書いてました(´・ω・｀)つ◎

Retinaディスプレイ（英語：Retina Display）は、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。

Retinaディスプレイ – Wikipedia

ようするに、一部のアップル製品で採用されている液晶の規格で、通常の液晶よりも2倍密度が集まってるので写真画像とかキレイにみえますよーーー＾ｘ＾

って市場に流してるのですが、WEBサイト用の画像ファイルの規格が合わなくて、非対応画像ファイルは「ぼやける」というね…＿|￣|○

まーーーアップルの暴走ですわ！！(;°ロ°)

この対応機種が

◎iPhone
iPhone4が以降に発売された全モデルに搭載されている。

◎iPad
第3世代iPadとそれ以降のモデルに搭載されている。また、iPad miniシリーズは第2世代iPad miniとそれ以降のモデルに搭載されている。

◎Mac
「iMac」2015年モデルからは27インチiMac全機種搭載。
「MacBook Pro」2012年6月発売モデルから搭載。
「MacBook Air」2018年モデルから搭載。

Retinaディスプレイ – Wikipedia

はい。最上位クラスではないiMacを除いて、ほぼ全部「Retinaディスプレイ」です(´；ω；｀)

とくに日本はiPhoneユーザーが多いので、この問題をまずまず解決させないと、キレイなWEBサイトが出来ないという訳でございます(´・ω・｀)

Retinaディスプレイへの対応方法【不完全】(´・ω・｀)

タイトルに【不完全】と入れたのは、今現在どの方法を試してもアクセス速度アップの障害になるからです(；・∀・)

一番簡単な方法を伝えますね(´・ω・｀)

まず表示するサイズより２倍サイズの画像ファイルを用意します。
その画像ファイルの「imgタグ」に指定している「Width要素」もしくは「height要素」に表示する数値を入力する。

例：【画像サイズ】300px ✕ 300px　　【画像ファイル表示設定】width:150px; height:150px;

※CSSで指定してもOK。「Width要素」、「height要素」片方でもOK。

注意点として、画像ファイルの解像度を150dpiとかにあげても、強制的に72dpiで表示される仕様は変わらないので、画像サイズは倍化せずに解像度で調整！という方法は意味ないです(´・ω・｀)

ほかの方法として、JavaScriptでRetinaディスプレイ用に用意した対応画像（画像サイズ倍化）に差し替えたり、CSSの「media screen」を使って対応画像（画像サイズ倍化）に差し替える方法、「imgタグ」の「srcset要素」をつかって対応画像（画像サイズ倍化）に差し替える方法になるので、どのやり方でも『画面サイズ倍化』した画像に差し替えるといった方法しかないのです…