画像が表示されなくなったのですが教えてください。

質問

今回、画像の表示方法を変えたら一部の画像が表示されなくなりました。
HP上には、20枚くらい画像を表示しており「旧方法」では正常に表示できました。
「新方法」を取ってからは、開くたびにランダムで表示できない画像が発生します。
「旧方法」
<a href="P01.JPG" target="_blank"><img src="P01s.JPG" /></a>
「新方法」
<a href="P01.JPG" target="_blank"><img src="P01.JPG"　style="width:320px" /></a>
画像の説明
P01.JPG・・・800*600の元画像
P01s.JPG・・・800*600の縮小版で320*240

「旧方法」は元画像の縮小画像を作ってそれを表示してました。
しかし、縮小画像作るのはめんどいし容量もとるので、出来れば元の画像だけで小さく表示できないかと思っていました。
そんな時、「新方法」では、元の画像だけで小さく表示できたので使ってみたら表示できない画像が出て来て困っています。

使い方が間違っているとか、どんな些細なことでもいいので表示されない原因を教えて頂けないでしょうか？
宜しくお願いします

回答No.4

syagain · ベストアンサー

jpg画像の表示を小さくしても、画像のデータ量自体は変わりません。
元の画像を、ぎゅっと小さく圧縮して表示しているようなものなので、
サムネイル画像を別に作るより、却って読み込みが遅くなることもあるようです。
もしかすると、元の容量が大きい画像が、
圧縮し切れずに映らなくなっているのではないでしょうか。

以下、参考URLより引用です。
※しかし、データ量そのものは変化しないので、巨大な画像を扱う際（サムネイルとして縮小する場合など）には注意が必要です。また、この属性で表示サイズを変更すると、画質が悪くなってしまう場合があります。（画像サイズの変更には、画像編集ソフトを使用した方がいいでしょう）

引用終り。

また、念のため"height"も指定してみてはいかがでしょうか。
表示速度にも多少の変化があると思います。

他の画像も全く同じタグを用いているのであれば、タグに間違いは無いと思います。
一番最後の「;」は省略できるはずなので、これが直接的な原因とも思われません。

参考URL：

http://www.tagindex.com/html_tag/img/img_width.html

お礼

回答ありがとうございます。

syagain様が言われている通りかと思いました。

画像が表示できないのは、タグのせいではなくてデータ量の問題だということが分かりました。

少し手間がかかりますが、縮小画像を用意しようと思います。

本当にありがとうございました。

回答No.5

nnjj

とりあえず↓で、コピペして、写真ファイル名だけ入れ替えてみてください。イケるはずです。

<A href="○○.jpg" target="_blank"><img src="○○.jpg" style width="320px"　></A>

他にもやり方、やり用などはありますが、一応ご希望に添える結果にはなるかと思います。

お礼

回答ありがとうございます。

早速試してみたいと思います。

回答No.3

fujillin

styleで指定するなら
　style="width:320px;"　（←「;」）

width属性で指定するなら
　width="320"
のどちらかでいけると思いますが…？

＞　whidth="320px"
　→　width　みたいなのにもご注意。

お礼

回答ありがとうございます。

style以外でも試してみます。

回答No.2

freepacket

単純に、
<img src="P01.JPG" width="320" />
で良いのでは？

お礼

回答ありがとうございます。

その方法でやってみます。

回答No.1

nnjj

style="width:320px"

↑ここ、ちがってます。

style width="320px" これでやってみてください。

スタイルの後ろのイコールはいらず、Widthの後は＝です。
ダブルクォーテションで囲むのはサイズの数字のところのみです。

補足

早速の回答ありがとうございます。

早速変更しましたが、今度は全部表示されますが800*600のサイズで全部表示されてしまいました。

縮小表示されませんでした。

変更したソースは以下の通りです。
<a href="P01.JPG" target="_blank"><img src="P01.JPG" style whidth="320px" /></a>