Photoshopを購入しよう♪

もっとPhotoshopのことが知りたい!


web サイト内

 

JPEGデータの作成

製作バージョン:PhotoshopCS2

Web用に使用するフォーマットに「JPEG」があります。

普通に保存するだけですが、特性についてご紹介します。

最終更新日:2006年04月22日

普通に保存

まず、「Web用に保存」ではなく、普通に保存してみます。

カラーモードが「RGBカラー」になっているか確認してください。
「インデックスカラー」などですと、「JPEG」形式で保存することが出来ません。

また、ウェブ用に使用する場合は解像度を「72ppi」にしておきましょう。(理由

ではメニューバーの「ファイル」から「別名で保存」を選択します。

※古いバージョンのPhotoshopでは「画像を統合」して1枚の「背景」だけにしてなかったり、チャンネルに「RGB、レッド、グリーン、ブルー」以外のものがあると「JPEG形式」で保存できない場合があります。
保存形式で「JPEG形式」が選べなかった場合は、以上のことを確認してみてください。

「別名で保存」のウィンドウが開きましたら、「ファイル形式」の中から、「JPEG」を選んでください。

選択しましたら、「保存」を押して決定します。

すると「JPEGオプション」が開きますので、画質の設定などをして「OK」を押します。

この「画質」の設定というのは「JPEG形式」の特徴になります。

「JPEG形式」は、非可逆圧縮(不可逆圧縮とも言われる)という圧縮形式で画像を小さく保存します。
これは「多少データが欠落するかわりに、高い圧縮率でデータを保存する」という形式です。
そのため、保存前のデータとまったく同じデータに保存することが出来ません。
ウェブ上では、より軽い小さい容量の画像が好まれますのでよく使用する形式です。

ですので「JPEG」では「画質」を設定します。

ファイルサイズが小さければ画質は悪く、ファイルサイズが大きければ画質はよくなります。
「プレビュー」のチェックボックスにチェックをいれて、自分で納得のいく具合を調整してみてください。

ちなみに保存後のデータが80KB以上ですと、画像サイズとしては大きい部類だと思います。

Web用に保存

比較的新しいバージョンのPhotoshop(ver6.0以降くらい?)にはメニューの「ファイル」の中に、「Web用に保存」という項目があります。

これがあるバージョンの方は、ウェブ用に使用する画像は出来るだけこちらを使用してください。(理由は後述)


こちらは特別な事前準備はなにもいりません。

メニューの「ファイル」から「Web用に保存」を選びます。

右側に「プリセット」とかかれた画像を設定する場所がありますので、そこで「JPEG」を選び、画質を設定します。
これは通常の保存と同じように「画質が低ければデータ容量は小さく」「画質が高ければデータ容量は大きく」なります。

上図のように、左下に画像サイズが表示されますので、こちらを参考にしながら調整しましょう。

調整できましたら「OK」を押して画像を保存します。

ちなみに「Web用に保存」を使用すると、自動的に解像度が「72ppi」に変更されます。

普通に「保存」と「Web用に保存」の違い

一見両方同じように保存されているように見えます。

ですが実はかなり異なる部分があるのです。


Web上では画像サイズが小さいほど表示するまでの時間が短くなり、 ユーザーにストレスを与えにくく、親切なサイトといえます。

(Web上では特に)同じ画質なら、当然サイズが小さい方がよいですね。

実は通常「JPEG」というファイル形式は、画像データのほかに「サムネイル」や、余計な予備データなどの「おまけ」をいっしょに保存してしまいます。

この「おまけ」というのがかなり大きく、「30KB」前後は使用してしまします。

ナローバンド(ISDNなどの低速通信回線)が主流だった時代、サイトの1ページの容量は50KBほどでなければ表示にとても時間がかかっていました。

そう考えると、画像の「おまけ」データとして「30KB」余計なデータがあるというのは、どれだけ無駄なことかご理解いただけると思います。

「Web用に保存」では、この「おまけ」データを使用せず保存します。
「JPEG形式」で保存するときは、普通に「保存(別名で保存)」を使用するより、「Web用に保存」を使用する方が格段に容量(ファイルサイズ)を小さく抑えることができるのです!


実例

↓通常の「保存」47KB

↓「Web 用に保存」7KB

フリーウェアを使用したJPEG画像のシェイプアップ

さて、昔のPhotoshopには「Web用に保存」はありませんでした。

ですのでフリーウェアなどを活用して、「JPEG」をサイズの小さい「JPEG」を作成しましょう。

オススメフリーウェア->「JPEG Cleaner

 

Copyright 2002-2007 らくがき本舗 All Rights Reserved.