web制作初心者です。貼り付ける画像を細かい文字まできれいに表示させたいのですが、どんな風に作れば良いでしょう？

質問

DreanWeaver・イラレ・フォトショップを使って制作しています。
Fireworksはソフトはありますが、あまり使えません。
Webページの画像は写真であれば「jpg」、イラレは「gif」で保存した画像を貼り付けしています。
以前、知り合いにイラレのデータをフォトショップで開いてjpg保存するときれいに表示すると聞いたのですが…
確かにそのほうが細かい文字なども多少きれいに出ますが、大差は無い様に思います。http://www.bellemaison.jp/gift/specially/keirou.html
のページは細かい文字もとてもきれいに表示していますが、どんな風に作っているのでしょう？
ソースを見てみてもgifのデータを貼り付けてある様ですが、何故でしょう？
すみません。まだ初心者でよく解りません。よろしくおねがいします。

回答No.3

SortaNerd_ · ベストアンサー

とりあえず今回の問題に限った答えは、「画質を上げてください」です。

が、折角ですのでもうちょっと説明します。
まず、Web上で扱える画像形式は「jpg」「gif」とあともう一つ「png」、この3つだけと考えておいて良いです。また、この3つであれば表示できない環境はまずありません。昔はpngが表示できない環境もあったようですが。
この3つはそれぞれ次のような特徴を持ちます。

・jpg
この中で唯一、圧縮率(すなわち画質)を変えることができる。
写真画像を非常に小さいファイルサイズで保存できる)。
文字や図形に弱い(文字や図形の周りに劣化が目立つ)。
ただし、画質を上げればわりと万能。
・gif
可逆圧縮であり、劣化を生じない。
ただし使える色は256色までなので、フルカラーの画像をgifに変換すると劣化する。
少ない色数で書かれた文字や図形を非常に小さなファイルサイズで保存できる。
写真は256色に減色する過程で汚くなるので不向き。
アニメーションが扱える。
・png
可逆圧縮で劣化を生じず、さらにフルカラーが扱える。
アニメーションが扱えないこと以外、gifより優れている。
少ない色数で書かれた文字や図形を、gifよりわずかに小さいファイルサイズで保存できる。(減色した場合。フルカラーで保存すると同じ画質でgifよりファイルサイズが大きくなる)
写真も無劣化で保存できるが、非常にファイルサイズが大きくなるので不向き。
別にベクタ画像ではない。念のため。

なお例示されたサイトの画像はただのjpgですが、画質を極限まで上げています。
画質を上げたjpgは実用上ほぼ無劣化と見なせますので、写真も文字や図形も何でも扱える万能の画像形式ということができます。
ファイルサイズはかなり大きくなりますが、今の時代さほど気にするほどでもありません。

補足

親切な説明でありがとうございます。
すみません。質問ですが、「画質を上る」というのは、フォトショップで「Webで保存」を選んでプリセット”JPG－高画質－画質１００”で保存ということでしょうか？
因みにフォトショップのバージョンはCSです。
何も知らなくてすみません。お願いします。

回答No.4

noname#119957

*ＪＰＧ中心でいいです。回線が早いのでＧＩＦにしなくても大丈夫です。
ＸＰのユーザでＩＥ６を使っている人もけっこう居ますので、ＰＮＧは避けた方が無難です。

*デザインは、イラレまたは、foreworksで75dpiで作成します。
fireworksの場合は、写真・ベクトルが混在できます。
イラレの場合は、ベクトル描画がfireworksよりも良いようです。
　効率性ではfireworksが上ですが、デザイナには不評です。

*カンプが出来上がったら、foreworksで読み込んでフライスすれば、スライスに名前がつけられて、変更時には選択したスライスのみ簡単に書き出せて、いろいろ効率的です。

*あとは、dreameaverでコーディングすればいいです。

お礼

ありがとうございました。
foreworksのフライスにチャレンジしてみます。

回答No.2

suzuko

URLのほとんどの画像はJPGですよね。GIFは「アイテムを選ぶ」などのアイコンだけのようですが。^^;

初心者と言うことで詳しく説明しますね。

画像にはベクター画像とラスター画像があります。
簡単に言えば、パスの位置を指定し「線」と「線で囲われた中の色」で表示するのが、ベクター画像。色つきの点のドットで表示するのが、ラスター画像と言えます。イラレの画像はベクター画像。写真はラスター画像とも。

で、GIFはべた塗り（グラデーション無し）のベクター画像をラスター画像にするのに向いています。JPGはグラデーションのあるベクター画像をラスター画像にするのに向いています。

折角Fireworksをお持ちならば、１度イラレの画像を読み込み、「最適化」で設定を色々試されてはいかがですか？２ウィンドウぐらいで見比べれば、よく分かりますよ。

また、ラスター画像でなくベクター画像のままWebに上げたいならば、PNGという選択もあります。（１部のプラウザでは表示されませんが）

お礼

ありがとうございました。
Fireworksもトライしてみます。

回答No.1

mendokusa

フルカラーで作成してGIFで保存するだけです。
リンク先もとてもきれい・・・では無く普通ですね。