メニュー ネットショップのコツ |
画像のデータ量を節約するには [戻る] 画像のデータ量を減らすには主に下記の方法があります。 1.縦横の長さを小さくする。 2.解像度を下げる。 3.保存形式を変える。 4.画質を下げる(圧縮率を上げる)。 5.色数を減らす。 1.縦横の長さを短くする これは誰でもわかると思います。長さを縮めればピクセルの総数が減りますから、データ量は少なくなります。ただし、その分見た目が荒くなりディテールが落ちますので、やりすぎないように。 2.解像度を下げる 上記の1とさほど変わりませんが、画像加工のソフトによっては別途解像度も設定できるものもあるので、この数値によってデータ量を減らせます。デメリットも1と同じで、ディテールが荒くなります。 3.保存形式を変える グラフィッカーとして働いたことがある人ならご存知でしょうが、そうでない方には何のことって話だと思うのでご説明します。 画像を保存する際に保存形式(ファイル形式とも)を選択できます。画像はデータ量が元々多いので、軽くするために圧縮するのですが、その方法が形式によって違うのです。結果、保存形式によってデータ量と画質が変わってきます。 WEB上で使われる形式は主に3種類。GIF、PNG、JPG(JPEGとも)。
私の経験からデータ量が概ね一番小さくなるのはGIFの気がします。ただし、上記の表にあるように色数が256色しかないため、グラデーションを綺麗に表示するのは難しいです。べた塗り限定でバナーに使用するのに向きます。 一般的にはJPGが使用頻度が多いかもしれません。フルカラーに対応しているので、写真やグラデーションの表示に向きます。ただし、圧縮の性質上べた塗りの部分にノイズが入るため、シンプルなデザインには向きません。特に圧縮しすぎると、ノイズが増えます。 LINEはPNGしか対応していないので、必然的に使うことになります。フルカラー対応で透過処理もできて、ノイズも入らずグラデーションも綺麗でいいとこ取りな感じですが、サイト側がサポートしていないことも多いのが痛い。 4.画質を下げる(圧縮率を上げる) これは、主にPhotoshopに関わることですが、JPGの場合は圧縮段階が1~12まであります。1が最も圧縮されて、12が原本に近くなります。私個人としては12では気分的に大きい気がするので、普段レベル10でやっています。 ちなみに、圧縮が強いとその分ノイズが増えたりや輪郭がぼやけたりします。レベル7以下だとぱっと見で見栄えが悪いのがわかってしまうので、圧縮しすぎにはご注意です。 5.色数を減らす フルカラーの画像、特に写真や細かい模様が入っていると、必然的にデータ量が大きくなります。LINE着せ替えを作っていると、背景画像(22番・23番)が1GBを超えてしまい、容量オーバーなんてことも。 これも、Photoshopのやり方になりますが、「ポスタリゼーション」という機能を使うと色数を減らせて、データ量も小さくなります。 例えば、上のような細かい模様が連続した画像はデータが大きくなりやすいので、試しにポスタリゼーションをしてみたいと思います。 1.フィルタをクリック、ポップアップ表示 ↓ 2.ポップアップ内の色調補正にマウスポインタを合わせる、さらにポップアップ表示 ↓ 3.ポップアップ内のポスタリゼーションをクリック ↓ 4.階調数を入力 そうすると、階調数を入力するウインドウが出てきますので、数値を入力します。この時にプレビューのマスにチェックを入れておくと、数値に合わせて画像が変化しますので設定しやすいです。 ポスタリゼーション後のほうが色数が少ないので、グラデーションが荒く縞模様みたいになっています。これも、やり過ぎないように程々にしたほうがよさそうです。ただ、PNG方式で保存して、やる前は888KBだったのが537KBに減っています。どうしてもデータ量を落としたいときには使えるでしょう。 |