プロが教えるわが家の防犯対策術!

ホームページビルダーでホームページを作っています。
画像サイズ(1300,800) 解像度300
のjpeg画像を(340,225)に縮小して表示すると,
画像の乱れが大変ひどくなります。

画像をきれいに表示させるには,何か良い方法はないでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

画面の解像度である72dpiに変換した上で、ビルダーに貼ると綺麗になります。


解像度300dpiともなると、印刷業界レベルの解像度ですから、
モニタ上で綺麗に見せるだけなら、そんな解像度、まったく必要ありませんものね。

あとは、ビルダーで縮小し、そのサイズで画像を上書きすれば、綺麗になります。

この回答への補足

素早いご回答ありがとうございます。
モニターで見る分には,72dpiでうまくいきました。
しかし,印刷をすると,きれいにみえません。
印刷をすることまで考えた場合,いい方法はないのでしょうか。

補足日時:2002/07/05 19:42
    • good
    • 0

元画像は解像度等をそのままにして,別途縮小画像を用意し,ページに貼ります。


あとはその縮小画像に元画像をリンクさせれば問題は解決出来ると思いますよ。
画像閲覧サイトでは良く使われている手法ですから,見たことがあると思います。

1.元画像をリサイズし,解像度を皆さんが書かれているように72dpiにします。ファイル名の最後(「.jpg」の直前)に「s」(smallのs)を入れて新たに保存します。
2.元画像をローカル(パソコン内の)サイト内にコピーします。
3.ページに縮小画像を貼り,これにもと画像をリンクさせます。

ホームページビルダーを使っている場合ですと,これでは画像がリンクできないと心配されるかもしれませんが,ファイル選択するダイアログボックスの「ファイルの種類」で「すべて」を選択することで画像ファイルやその他のファイルもリンクの対象として選択可能になります。
    • good
    • 1

もともと大きなサイズの画像をHTML上で小さいサイズにすると、画像が汚くなったりします。


他の皆さんも書いてらっしゃるように、WEB用の画像は72dpiで全く問題ありません。

画像をHTML上で小さいサイズに表示されるように指定するのではなく、画像のサイズ自体ををsaranokinさんが指定されている340×225にして画像の解像度を72dpiにしたものを組み込めば、画像は汚くなりません。

sanocchi2001さんも書いてらっしゃる通り、ホームページを読み込む際、ホームページで表示している画像のサイズがどんなに小さいものだったとしても、実際にそのサーバに上げてある画像のサイズが大きいととてもストレスになり、時間がかかります。
出来るだけ表示サイズと大元の画像サイズを同じサイズにする事をオススメします。
(背景画像などのパターン画像は表示サイズよりももっと小さく出来ますので、それは例外とします)

頑張って下さい。
    • good
    • 0

こんにちは。

見る側としては、あまり大きいサイズのファイルは困りますね。見かけは小さい写真だけど実は大きなファイルというような作り方をしている人もいます。
表示を考えれば72dpiで十分なので、印刷したい場合は、別ファイルで300dpiのファイルを置いといて、「印刷される場合はコチラ」等とリンクを張れば良いと思います。
    • good
    • 0

回答してから気づいたのですが、


1300×800→340×225というと、縦×横の縮小率が違うのでは?
必ず正比で拡大・縮小をすることをお勧めします。

あと、解像度を替えるにはアプリケーションが必要になると思います。

補足ですが、ビルダーで縮小したら縮小したサイズで上書きする手順は下記の通りです。

縮小した画像を選択した状態で右クリック
    ↓
「画像の編集」
    ↓
「保存時オプション」の「表示サイズで保存」にチェック
    ↓
    OK

ではがんばってください!
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q【WEB制作】画像ファイルの解像度は72?96?

WEB画像を作成するとき、MacのPhotoshopで72DPIで作成していましたが、最近制作環境がWindowsに変わりました。Winの画面解像度は96DPIですが、作るものは以前のまま72DPIの設定で作成しています。
できあがったものに問題はないのですが、どうもそのへんの違いがよくわかりません。MacとWin、いったいどっちの解像度で作成するのがいいんでしょうか?
初歩的な質問ですみませんが、教えて下さい。どうぞよろしくお願いします。

Aベストアンサー

一般的にホームページ上で使用する画像の解像度は 72dpiです。仮に72dpi以上の解像度で作られていても、画面上では同じに見えますが、解像度の高い画像ファイルは容量が大きくなるので表示に時間がかかります。

モニター解像度が大きいほど、 より広いデスクトップ環境を得ることができます。ホームページなども同様で同じサイトを閲覧していても、それぞれのモニター解像度によって見え方が異なるということになります。最近のMACのモニタもWINと同じ96dpiが標準になりつつあります。

QHPに画像をアップすると粗くなりぼやける。

お世話になります。
HP作成初心者です。

【使用ソフトなど】
イラストレーターVer9・フォトショップVer6・Win XP

【手順】
イラストレーターで絵を描いて、
文字等を入れ(アウトラインやアンチエイリアス加工をしています)
完成した画像をフォトショップで解像度を調節してから
「WEB用で保存(jpg/高画質)」を選択して保存し画像をアップ
しています。

HTMLでの画像サイズのタグは、小さな画像を大きく設定している訳ではないのですが(大きなサイズを小さくする事はあります)、画像がぼやけたり粗くなってしまいます。

初心者で、このサイトを見て色んな保存形式に変えてみました。
png形式でもダメでした。

手順は間違っているでしょうか?
宜しくお願いします。

Aベストアンサー

> 「WEB用で保存(jpg/高画質)」を選択して保存し
この時点ではぼけとかは気にならないですか?
Jpegは最高画質で保存しても少しはぼけます。
色数が少ない、ハッキリしたものならGIFで保存。
写真のような色数多いのはJpegで。

> 小さな画像を大きく設定している訳ではないのですが(大きなサイズを小さくする事はあります)
ブラウザにもよるけど、本来のサイズ以外で表示すると汚くなります。
小さいのを大きく見せるのはもちろん、逆に大きいのを小さくしてもです。
1/2や2倍のようなきっちりとしたサイズではなく、中途半端な拡大/縮小では特に顕著です。

Photoshopの画像解像度の【バイキュービック法】での拡大縮小するような高度な処理は行われていません。
ブラウザでは【ニアレストネイバー法】のような単純な方式で行われます。


面倒でも適切なサイズの画像を用意することをお勧めします。

Qweb制作 画像がぼやける

初めてHPの制作をしています。

今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。
ですが、イラストレーターで作った地図(主に線と文字、モノクロ)はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。
.jpegで保存すると全体にぼんやりしてしまうので.pngの方がいいと思ったのですが…
さらに、それをプリントアウトしてみると結局は全体にぼやけてしまっている事が判明しました。

web上でもきれいに見えて、プリントアウトなどをした時にも画面に見えているクオリティーを保つには、どんな処理をすればいいんでしょうか…?
ちなみに、.jpegで保存した写真画像はweb上ではきれいに見えていますが、プリントアウトするとやっぱり少しぼけて見えます。

HP制作初心者で初歩的な質問ですが、どうぞよろしくお願いします!

初めてHPの制作をしています。

今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。
ですが、イラストレーターで作った地図(主に線と文字、モノクロ)はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。
.jpegで保存すると全体にぼんやりしてしまう...続きを読む

Aベストアンサー

勝手に減色されるために起きている
と推測されます。
Web用PNGで保存すると
使用色数は256色に抑えられます。

そのためそれ以上の色数を使っていると
勝手に色数が減らされるのでこの現象が発生しているはずです。

ではどうすればいいか
・最初から256色の画像を用意すればいい
のです。

http://help.adobe.com/ja_JP/Illustrator/14.0/WSEFB85FE0-1C50-4b02-8392-D30DF1962EF5.html
このへんの
・GIF および PNG-8 最適化オプション
・GIF および PNG-8 画像のカラーテーブルのカスタマイズ
辺りを参考にしてください。

QWEB用の文字画像を綺麗に作るにはフォトショップとイラストレータどちら

WEB用の文字画像を綺麗に作るにはフォトショップとイラストレータどちらが良いでしょうか?
いつもお世話になります。
イラストレーターCSを使ってホームページの見出し部分を作成していますが、実際にWEB上に表示させると、文字が若干滲んだようになってしまい、綺麗に表示されていない気がします。
同様にフォトショップで出力してみても大差はありませんでした。

一般的にはフォトショップもイラストレーターもDTP目的で使うと思いますので、WEB用に使うのが間違っているのかもしれませんが、できればFireworksではなく、上記どちらかのソフトで作成したいと考えております。

もしイラストレーター、もしくはフォトショップから画像に落とし込んだ際に文字を綺麗に(くっきり)出力させる方法があればご教授いただけないでしょうか?
もしくは、上記以外のフリーのソフト等でオススメがあれば是非教えてください。

初心者質問で恐縮ですが、宜しくお願いいたします。

Aベストアンサー

こんばんは。

フォトショップとイラレならフォトショの方が向いてます。
というより専門のソフトですよ。

フォトショには強力なスライスツール(バージョンによってはimage ready)があるので、
webサイトをデザインしてそのままパーツ分けして、gifとかjpgの圧縮率などを指定してアウトプットできます。
希望ならテーブルコーディングしたものをアウトプットすることも可能です(使い物にはなりませんが)

実際マクロメディアを買収してファイヤーワークスがcsに加わるまでは、
アドビはフォトショ+ゴーライブ(アドビ版のドリームウィーバー)でwebしましょうって感じだったんですよ。
なのでフォトショで全然問題ないです。

実際現場でもフォトショ使う人も多いし、もちろんファイヤーワークス使う人も多いです。

イラレは…webってピクセル単位で気を使うというか、ドット絵的な作業もあるので、
正直向いてないと思います。(ベクターやラスターで調べてください)

まぁ、逆に印刷ものつくるならイラレベースじゃないとできませんね。
(画像処理だけフォトショ→イラレに貼り付け)

それと、ロゴなどを作る場合は、イラレで作ってフォトショに貼り付けて微調整しますね。
フォトショのパスツールやシェイプはヘボイので。。

まぁ・・今はフォトショのが素材とかも多いし、高機能だしやりやすいかもしれません。
ただ、ファイヤーワークスのが簡単につくれます。

あとフォトショで作るときに注意する点は、シェイプを使うときにオプションの「ピクセルにスナップ」にチェックしましょう。
じゃないと稜線がぼけます。

さらに、ぼけずに作っても大きさを変更するとまたぼけるので注意です。

フォトショ素材等
http://weblibrary.s224.xrea.com/weblog/photoshop/photoshop_2.html

こんばんは。

フォトショップとイラレならフォトショの方が向いてます。
というより専門のソフトですよ。

フォトショには強力なスライスツール(バージョンによってはimage ready)があるので、
webサイトをデザインしてそのままパーツ分けして、gifとかjpgの圧縮率などを指定してアウトプットできます。
希望ならテーブルコーディングしたものをアウトプットすることも可能です(使い物にはなりませんが)

実際マクロメディアを買収してファイヤーワークスがcsに加わるまでは、
アドビはフォトショ+ゴーライブ(ア...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

QPhotoShopにて、解像度を落とさずjpg保存する方法を教えてください。

PhotoShop 7を使用しております。
知人からイラスト制作の依頼を受けており、
jpg形式、解像度350dpiでの提出を求められているのですが、
解像度350dpiにて作業をしていても、保存の際
「Web用に保存」にてjpg形式で保存すると、解像度が72dpiになってしまいます。
(調べて、Web用に保存ではそれが固定であることは分かりました。)

これを、解像度を落とさずjpg形式で保存するには、どうしたら良いのでしょうか?
どうかご助力をよろしくお願い致します。

Aベストアンサー

所定の作業が終了したら、(1)「ファイル(F)」→「別名で保存(A)」→(2)「ファイル名」を入力したら、ファイル形式を「JPEG(*.JPEG、*.JPE)」を選択して、「保存(S)」をクリックする。(3)すると、「JPEGオプション」のウィンドウが開くので、「最高画質(低圧縮率)」を選択して、「OK」をクリックして完了です。

以上は「Photoshop 6」の操作手順ですが、「Photoshop 7」でも同じと思います。

Qイラストレーターに取り込んだ画像の白い部分を透明にできますか?

例えば図面などのデータがあったとした場合、その線の部分、つまり黒い部分だけを残し、残りの白紙部分を全て透明にすることはできますか?
以前フォトショップで白紙部分をDeleteして透明にし、それをtifで保存すればイラストレーターに持ってきてもその部分は透明なまま作業ができると聞いたことがあったのですが、やってみてもできませんでした。
画像の白紙部分を簡単に透明にできる方法がありましたら教えていただければと思います。

Aベストアンサー

Illustrator 上に、すでに配置されている白黒画像であれば、画像を選択して、透明を「乗算」 に変更してみてください。
画像の下のパスが、透けて見えます。


人気Q&Aランキング