メニュー

Webデザイナー速報

Web関連の勉強で面白いなと思ったことを配信していきます。
30代前半の未経験Webデザイナー。転職活動中。

画像のRetinaディスプレイ対応について全然理解できていなかった件

|

とりあえず、2倍の画像を用意して、それを2分の1して表示しておけばオッケーかな・・・。

ふとある時、気づいてしまいました。
全然理解できてない・・・。
それは、コーディング中にちょっとわからないことがあり、Retinaディスプレイ対応の仕方についてググっていた時でした。
記事の内容が全然頭に入ってこないw

ピクセルとかdpiとかデバイスピクセル比とか・・・よくよく考えてみたら単語一つ一つの意味をちゃんと理解していなかった・・・

Webデザイン未経験かつ独学者の方は、ここら辺の理解が地獄なのではないでしょうか・・・。私は地獄でしたし、今も完全には理解できていません。
わかりやすいブログや技術書を読めばなんとなくわかった気にはなれます。
しかし、人に説明できるのか・・・というと、とっても怪しいものですw

Web制作について習いたての頃は、CSSのプロパティを書いて三角形を表現したり、Photoshopの描画モードを操作して画像をなじませたり・・・、

結果だけ気にしてしまい、その仕組みを考えたりする余裕ってあまりなかったりします。

なんとなくやってみた!期待通りの動きや表現になった!
になりがちです・・・。

作品っていう成果物がないと始まらないので、基本的にはそれでいいと思うんですが、
いざ困ったときに、私のようにググっても理解できなかったり、実は意味のないことをやっていた・・・になってしまう危険が高いのかなって思いました。

そこで、「画像のRetinaディスプレイ対応」について、安心してググれて、夜もぐっすり眠ることができるように、必要な単語をまとめてみました。

右も左もわからないペーペーな私にとって、その内容は想像以上に多くて複雑だったので、次回から、分割して記事にしていきたいと思います。

内容のソースは、なるべく信頼のありそうなものをチョイスしつつ、それに対して、考察する感じで書いていきます。