-
ID:K/3Y1U さんの質問

ウェブ用画像の解像度について困っています。
HPに載せる画像として、400px×200pxほどの画像(文字と写真)を作成したいのですが、どうしても仕上がりが荒くなってしまいます。
使用ソフトはphotoshop・illustratorともにCS5
新規作成で
幅400px・高さ200px・解像度72px・カラーRGB
として内容を作成後、
ウェブ及びデバイス用に保存 でgif、png、jpegすべて試してみました。
現状、表示させたい大きさの2. 5倍~3倍くらいの大きさで画像を作成し、
htmlで縮小させて表示させる方法なら荒くならず綺麗に表示されるのですが、
原寸で作成しても解像度を保つ方法を知りたいと思っています。
初心者で申し訳ありませんが、アドバイスを頂きたくお願い申し上げます。

みんなの回答 7 件

ID:HG3utH さんの回答

それretinaモニタの仕様です。retina モニタなどで検索かけるとわかります。retinaモニタでキレイに表示させるには大凡二倍の画像サイズにして縮小するか、JSで画像を差し替えるか、srcsetで差し替えるかしかありません。

ID:K/3Y1U

コメントありがとうございます。
Retinaはアップル製品の高精細ディスプレイと認識しており、現在自分が使用しているPCは数年前発売のごく普通のwindowsノートなので、あまり関係ないと思っておりましたが、関係あるのでしょうか・・・?

ID:ZUg/pA

別のPC モニタでみたらどおなのかな。

ID:ZUg/pA

ちなみに、Retina用じゃなくて大きく画像を作ってhtmlで縮小させてんのは何故?(私もデザインの調整の為よくやるけどね。)

ID:N6uwje さんの回答

イラレとフォトショで作ったのは分かるけど、書き出してるのはどっちのソフトでしょう。
.
フォトショと想定して、
「Shift」+「Ctrl」+「Alt」+「S」の「WEB用に保存」で、
この画像のような「PNG24」ではどうでしょうか。
Winでの画面です。
細かい設定も同じにしてみてください。
.
もしイラレで書き出しているようでしたら、
1:イラレ上でオブジェクトをコピー
2:フォトショ上で新規カンバスにスマートオブジェクトで貼り付け
でやってみてください。
原因なんだろう~?
解決できますように。

ID:N6uwje

画像初めて貼ってみたのですが、小さいですね…ありゃりゃ。見えるかしら

ID:K/3Y1U

コメントありがとうございました。
書き出しはフォトショです。
ご提示いただいた方法を試してみましたが、設定後、ブラウザプレビューした時点で既にもやもやっと荒くなってしまいまして・・・
イラレで作った物をフォトショ(スマートオブジェクト)もやってみましたが同様の結果でした。
何か根本的な初期設定が間違っているのですかね・・・
ご回答ありがとうございましたm(__)m

ID:3sq8EV

もやもやっとっていうのは、色数減・ノイズ・モアレ・低解像度のどれでしょう?あとブラウザプレビューじゃなくて、Windowsフォトビューワーで開いた時はキレイですか?

ID:FBPpxZ さんの回答

jpegの書き出しの品質は最高レベルになってますか?
デフォルトだと80%くらいの品質になっているので、劣化しますよ。

ID:K/3Y1U

コメントありがとうございます。
jpegで試した際には最高画質・画質100でやってみましたが、結果変わらずでした・・・

ID:FBPpxZ

下にもあるけど、ブラウザプレビューした時点って事は、書き出した画像を再びフォトショで開けば、キレイに見えるって事?
そうなら、ブラウザが原因だと思うので、別のブラウザでプレビューしてみたらどうでしょう。

ID:N6uwje

たしかに。
書き出した画像をフォトショで再表示して問題なければ、ブラウザですね。
ちなみに「書き出したいもの」以外を仮にテストで作って同じ方法でやっても、ギザギザしちゃってるのかしら?

ID:ci0Cbt さんの回答

実はIEとかクロームの設定で拡大75%とかなってないよね?

ID:FBPpxZ

そういえば、110%になってたことあったわ。

ID:K/3Y1U

コメントありがとうございます。
その可能性を考えてみたのですが、確認しても100%でした・・・
80%にしてみたら荒が目立たず綺麗になりましたが^^;

ID:4fuZrI

クローム width:100%;でレスポンシブにしててぼやけるのはよくあります…

ID:4fuZrI

//w3q.jp/t/7852 これかしら?

ID:67jxyM さんの回答

>荒くなってしまいます。
なんかこれがものすごく主観が入ってる気もするので、サンプル画像(photoshop上のスクショ and 書き出し後png)をどこか適当なところに貼りなさい。

ID:67jxyM

そもそもプレビューはどうやって確認してるの?
主題は画像なんだから、まさかhtml上の画像なんかで確認してないよね?

ID:/78Wfq さんの回答

おそらくフォントの大きさが小さいか、あれでしょうアンチエイリアスの設定がされてないとかでしょう

ID:/a/xEU さんの回答

トピ主音信不通で回答が出ないのがモヤモヤするw

最終更新日:2017-02-27 (7,334 views)

関連するトピックス

ページ上部に戻る