HTML文書 画像の保存の仕方

HTML文書に画像を入れるためのテンプレまでは理解しているのですが、それ以前に画像の保存の仕方が分かりません。

具体的にいうと、Webページ上で使いたい画像をどこのファイルにいれるか、どのような名前を付けて保存すればいいか、圧縮はするかなどの手順を知りたいです。

ちなみに、学校から指定されているテンプレは以下の通りです。

<img src="画像が格納されているフォルダの名前/画像の名前" alt="画像の説明">

初心者のため、調べてたりその通りに試してみたりしても、ブラウザに画像が表示されず困っています。
非常にあいまいな質問で申し訳ございません。お時間のある方からのご回答お待ちしております。

No.4 ベストアンサー 回答者： zircon3 回答日時： 2021/06/30 11:19

えっと。

。。(^^;

写真などの画像ファイルを用意し、HTMLのイメージタグ（<img>）でファイル名を指定するだけです。


> <img src="画像が格納されているフォルダの名前/画像の名前" alt="画像の説明">

画像ファイルがHTMLファイルと同じフォルダにあるのであれば、src=の右側は"画像ファイルの名前"だけでOKです。「画像が格納されているフォルダの名前/」は不要です。
HTMLファイルとは異なるフォルダーに置く場合はHTMLファイルを置くフォルダを基準とした相対指定となります。
つまり、HTMLファイルを置くフォルダ内に「IMG」というフォルダを設けてそこに画像ファイル（例えばimage001.gifとでもしましょう）を置くのであれば、
　　　<img src="IMG/image001.gif">
となります。
altで説明を入れる決まりならそこはそれにしたがって説明文を自由に入れて下さい。

ちなみにこういったことは非常に基本的な事ですので教科書（？）にもしっかり書かれているはずです。読み直してみられるとよいと思います。

参考まで。

この回答へのお礼

ありがとうございました！

お礼日時：2021/06/30 11:42

No.3 回答者： dyna_1550 回答日時： 2021/06/30 11:18

＞どのような名前を付けて保存すればいいか、圧縮はするかなどの手順を知りたいです。

WebでHTMLを表示するには、以下の３層構造であることをまず理解しましょう。

　ブラウザ　ー　HTTPサーバー　ー　コンテンツ（HTML、画像）

画像の場所は、HTTPサーバーから参照できる相対パスか、別のHTTPサーバーのパス（URL)になります。

HTMLは、画像のパスを書くだけなので、そのパスがブラウザで見れる場所を記入します。

画像の形式は、ブラウザが対応している形式です。一般的には、jpg, png, gifなど。

簡単に言うと、HTMLの中に画像があるのではなく、
　HTMLが画像の場所を教え、その場所をブラウザが探しに行く
という動きになります。

No.2 回答者： cametan_42 回答日時： 2021/06/30 11:17

> 具体的にいうと、Webページ上で使いたい画像をどこのファイルにいれるか

どのフォルダに画像を保存したいのか、ってのは任意ですね。好きなトコに保存すれば良いです。
必要なのはimg srcで引っ張ってくる画像が保存されてるフォルダのアドレスをキチンと書く事でそれ以上でもそれ以下でもないです。

> どのような名前を付けて保存すればいいか

それもお好きなように。

> 圧縮はするかなどの手順を知りたいです。

例えば教えて!gooなんかは圧縮してますが、現代的にはHDDの容量がクッソ増えてるので、個人サイトなんかはわざわざ自分で新しく圧縮せんでも構わんですよ。
昔、要圧縮、って言われてたのは、特に回線スピードが今よりも遅かったから、ですが、今どき基本的に光回線が当たり前なんで、ページがロードされてから随分と経ってから写真がジワジワと読み込まれる、なんつー昔の「あるある」は殆ど無くなりました。
ぶっちゃけた話、写真の容量なんかは動画とかJavaScriptのロードに比べると全然速い範疇になっています。
まぁ、デファクトスタンダードのjpgだったら充分速いですよね。尖ってて先端の流行り物が好きだったらwebpにしてみる、とか。あるいは画質の良さを重視するならちょっと重そうだけど(でも今どきの基準なら大した事はないでしょうが)pngにしてみる、とか。その程度です。殆ど趣味の範疇です。
また、画像の「大きさ」ですが、画像を直接縮小するより、HTML側で表示サイズを指定する方がスマートですね。教えて!gooなんかは投稿画像を勝手に縮小しちまうんで、写真だけ開いても画像が小さく汚くなってしまいます。今の世の中、こんな事やっちゃだめでしょう(笑)。
まぁ、もちろん、サーバーの容量との兼ね合いもありますが、基本、写真の本体そのもののサイズはいじらないようにして、HTML側で表示調整はすべきだと考えます。

No.1 回答者： wellow 回答日時： 2021/06/30 11:14

＞<img src="画像が格納されているフォルダの名前/画像の名前" alt="画像の説明">

「画像が格納されているフォルダの名前」は、そのWebサーバで決められているルートからのパス。パスの区切り文字はＯＳによって違う。
「画像の名前」は、その画像ファイルのフルの名前。例えば、fooじゃなくて、foo.jpgとか。

画像はフォーマットによっては表示できないブラウザもあるので、jpg、gifが無難。

この回答へのお礼

ありがとうございます！

お礼日時：2021/06/30 11:30