画像を挿入する 画像の調整 （任意）
Picasaウェブアルバム、Imgur、Flickr、Photobucketなど、無料で利用できる画像ホスティングサービスは数多くあります。どのサービスを使うかは、利用上の注意をよく読んで決めましょう。中には低画質でしか保存できなかったり、閲覧者があまりにも多くなると（ホストの帯域幅の使用が一定の値を超えると）、画像の表示を停止するサービスもあります。  ブログのホスティングサービスには、ブログ管理ツールで画像をアップロードする機能を提供しているものもあります。 有料のウェブホストを利用している場合は、FTPサービスを使用してサイトに画像をアップロードします。「images」ディレクトリを作成し、画像ファイルはまとめて整理するようにしましょう。  他のサイトに掲載された画像を使用したい場合は、サイト作成者から許可を得ます。使用許可が下りたら、画像をダウンロードし、画像ホスティングサイトにアップロードします。 画像を貼りたいページのHTMLファイルを開きます。 ウェブフォーラムで画像を挿入する場合は、投稿する記事に直接画像のURLを入力することができます。ほとんどのフォーラムでは、HTMLではなく独自のシステムを使用しています。画像が上手く貼れない場合は、他の投稿者にやり方を聞きましょう。 画像を挿入したい部分のHMTLコード内での位置を確かめます。そこに<img>と入力します。このタグは空要素なので、終了タグは入力せずに単独で使用します。画像の表示に必要な指定はすべて、2つの山括弧の間に記述します。 <img> 画像をアップロードしたホストサイトにアクセスします。貼り付けたい画像を右クリックし（Macの場合はControlキーを押しながらクリックし）、「画像の場所をコピー」を選択します。また、「画像の表示」をクリックし、画像だけを表示させ、アドレスバーのURLをコピーすることもできます。 自分のサイトの画像ディレクトリに画像をアップロードした場合は、「/images/画像ファイル名」と入力してリンクを張ります。正常に表示されない場合は、恐らくimagesディレクトリが別のフォルダの中にあります。ルートディレクトリの直下にimagesディレクトリを移動させましょう。 周知でしょうが、HTML属性はタグの中に挿入します。src属性は「source」の略で、画像の場所をブラウザに指示するものです。「src = ""」と入力し、画像のURLを引用符の間に貼り付けます。以下は参考例です。 <img src="http://www.exampleimagehost.com/my-cute-dog.jpg"> ここまでの作業だけでも画像は表示されますが、もし可能であればalt属性を追加しておきましょう。画像の表示に失敗した場合、alt属性で指定したテキストが代わりに表示されます。他にも、検索エンジンに画像の内容を認識させたり、文字読み上げソフトに読ませることで視覚障害を持つユーザが画像の内容を理解できるなどの、重要な役割があります。 下記の例を参照にして、引用符の中のテキストをカスタマイズしてみましょう。  <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="飼い犬がミカンを食べている写真"> ページの中でその画像がさほど重要な意味を持たない場合、alt属性のテキスト部分は（alt = ""）のように未入力のままにします。 変更したHTMLファイルをサイトに保存します。編集し終わったページを開くか、既にページを開いている場合は表示を更新すると、画像が追加されているはずです。画像の表示サイズがおかしい場合、あるいは別の不都合を見つけた場合の処理方法を次のセクションで説明します。 無償の編集ソフトウェアを使用して画像のサイズを変更し、更新したファイルをアップロードするのが一番いい方法です。HTMLでwidthやheightを指定して画像を縮小あるいは拡大させることもできますが、この方法ではブラウザの種類によって表示形式が違ってくるので、ページの一貫性が失われてしまいます。場合によっては（ごくまれに）表示エラーが発生することもあります。 すぐに画像調整が必要な場合は、以下の形式を使用しましょう。   <img src="http://example.com/example.png" alt="display this" width=200 height=200> （HTML5のピクセル数、または携帯電話対応の「CSSピクセル」を使った指定）  あるいは <img src="http://example.com/example.png" width=100% height=10%> （ウェブページのサイズに対するパーセンテージあるいは画像を含むHTML要素のパーセンテージを使った指定） 属性（widthあるいはheight）のどちらか一方のみを入力した場合、ブラウザは幅と高さの比率を維持したまま指定のサイズで表示します。 title属性を使用して、画像に関する追加のコメントや情報を表示することができます。例えば写真家のコピーライト表記を追加する場合は、以下のようになります。ここで指定するテキストは通常、カーソルを画像の上に置いた際に表示されます。 <img src="http://example.com/example.png" title="J. Godfrey氏 撮影"> 画像をリンクにするには、imgタグを <a></a> のハイパーリンクタグの中に挿入します。以下は参考例です。 <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
画像をアップロードする　 HTMLファイルを開く　 imgタグを使って画像を貼る　 画像のURLを確認する　 src属性にURLを指定する　 alt属性を追加する　 変更を保存する　 画像サイズの変更　 ツールチップを追加する　 画像をリンクにする　
https://www.wikihow.com/Insert-Images-with-HTML https://www.wikihow.com/Insert-Images-with-HTML
Inserting the Image Optional Adjustments