▼ウェブ用に画像を修正する

かなり基本的な画像製作時の基本です。 Photoshopで説明します。
解像度とピクセル】【画像の色の表現方法】【画像の大きさ】【画像を保存する

【解像度とピクセル】
デジタル画像を語るには、「ピクセル」と「解像度」について知っている必要があります。「ピクセル」は画像のサイズを、「解像度」は画像のきめ細かさをあらわす単位です。
同じ絵柄の画像でも、多くのピクセルが含まれていると綺麗で鮮明な表示が得られます。この画像のつまり具合を「解像度」というのです。
←解像度が低い状態
同じ画像でも、ピクセルが少ない状態だと、この様にぎざぎざが目立ってしまいます。
←解像度が高い状態
ピクセルのつまり具合が多いと、同じ大きさの画像でも、滑らかな画像になります。
ウェブページに表示する画像は、モニタの画像解像度にあわせた設定にします。「windows96ppi」から「machintosh72ppi」なので、「72ppi」で製作するのが基本です。
※余談ですが、印刷に回す場合は、「350ppi」以上が基本です。

【画像の色の表現方法】
画像の表現方法には、光の三原色で表現する「RGB」と4つのインクの組み合わせで色を表現する「CMYK」があります。

ウェブのように、モニタ上でしか表示しない画像は基本的に「RGB」で製作します。Photoshopのフィルタは、基本的に「RGB」対応ですので。ちなみにこの色は、、Photoshopの「カラーモード」で設定出来ます。
ちなみに「CMYK」は印刷用です。まず使いません。

【画像の大きさ】
ウェブ上では、データサイズが大きすぎると、表示するのに時間がかかると言うリスクが生じます。
個人の環境にも夜のですが、私は「50kb」くらいに抑えるようにしています。
画像のデータサイズを抑えるには、画像自体のピクセル数を減らす圧縮度を上げるという二つの方法があります。

【画像を保存する】
ウェブ上で画像を表示する場合、「jpg」「gif」「png」で保存します。今の主流は、「jpg」「gif」です。「gif」はいろいろな問題があるので…使用するには注意が必要です。→GIFの特許問題について
jpg」画像
基本的に、写真や、色をたくさん使っているもの等を圧縮するのに優れています。
ぼかしや、アンチエイリアスを多用しているような画像はこちらで圧縮したほうが美しく、データを小さく出来ます。
gif」画像
ぼかしを使っていないもの(特にこの画像のようにドットで製作したもの)や、回りを透明にしたいもの、画像自体が小さいものを圧縮するのに優れています。
▼ BACK