WEBに画像を掲載したら何故かにじむんだよねっていう話。

WEB制作

そういえば。

WEBページで、告知バナーとか画像に文字入れたりして掲載するじゃない?

なんか、文字、滲んでね(°□°)?
なんで、俺、泣いてるんだ(°□°)?←

って思うとき、無い?

あれね。
真面目にきっちり実寸サイズ」で作ると、なんでか滲むねん(´・ω・`)。

小さいサイズで作ったものを無理やり拡大し表示したら、
そりゃ滲むだろうなってのは想像つくよね。
たとえば、こんな感じ。

んで、これが、表示したいサイズきっちりで作ったもの。

そして。

これが、表示したいサイズの2倍のサイズで作ったもの!

文字の、輪郭に注目してみてね(´ω`)。

表示させたいサイズの2倍のピクセルサイズで画像を作って、
HTML内で「width=”●●●px”」や「width=”●●%”」を
使って指定してあげるとこんな感じで滲まない表示なるんだ(´ω`)。

昔は。

バナーサイズ、指定きっちり作らないと、やり直しさせられてたよね(°▽°)。。。
200px×40pxで解像度72dpi、みたいな。
古のヲタクさん、見覚えのあるサイズじゃないかい(°▽°)?

まあ、昔はそれでよかったの。
そう、昔は。

ディスプレイが多種多様になってきたのもあるね。
これが正解!っていうものが無くなってきてるのよね。

今は、縦横の比率を表示サイズに合わせて、
その2倍以上のピクセルサイズで作れば、大体きれいに表示されるはず。

だから、大きめに作っておけばだいたいOKになる(´ω`)!
くらいに考えておくのがいい(´ω`)。

ピクセルが指定されてる!っていう場合。
…解像度、指定されてなかったら、350dpiで作って提出してみよう…(小声)

ここでは知識的部分の説明は割愛させてもらいますが
詳しく知りたい、っていう方は

バナーサイズ 解像度 72 ぼける Retina

みたいな感じで検索してみると、出てくると思います(´ω`)。
Retinaはあれね、iPhoneとかiPad、MacなどのApple製品のディスプレイね。

ほいじゃーねー(´ω`)。

タイトルとURLをコピーしました