画像を設置する IMG
ページ内に画像を配置するにはIMGタグを使います。
<img src="画像のパス" width="横幅(ピクセル)" height="縦幅(ピクセル)" alt="画像が表示できないときの代替テキスト" />
<IMG> 画像を表示する
[参考記事] リンクなどのパスの指定
width属性、height属性による画像サイズ
width属性、height属性による画像サイズの指定を行わなかった場合、画像を読み込んでから画像領域の大きさが確定するため、ページ読み込み中のブラウザ表示が綺麗ではありません。
回線速度の遅いモバイル環境では顕著に影響されます。
特にauのガラケー携帯では、かなりガクガクします。
width属性、height属性は指定するようにしたほうがいいです。
また画像ファイルのサイズとwidth属性、height属性の値が違う場合には拡大縮小がされますが、この拡大縮小は間抜き、間補完によるものが一般的なので綺麗ではありません。
よほどの理由がないとき以外は画像自体のサイズを正しく作成するようにします。
[参考記事] VGA端末の画像表示対応
[参考記事] 画像表示のときに指定サイズにリサイズする(画像の拡大縮小)
画像の種類
表示させるする画像は、画像形式の特徴を踏まえて利用するようにします。
[参考記事] JPEG画像の特徴
[参考記事] GIF画像の特徴
[参考記事] PNG画像の特徴
画像形式 | JPEG | GIF | PNG |
---|---|---|---|
画質の劣化 | 不可逆圧縮 | 可逆圧縮 | 可逆圧縮 |
最大色数 | 約1678万色(24bit) | 256色(8bit) | 約1678万色(24bit) 約280兆色(48bit) |
透過処理 | 不可 | 可能(1色) | 可能(1色) |
アルファチャンネル 半透過 | 不可 | 不可 | 可能 |
アニメーション | 不可 | 可能 | 不可 (APNG、MNGは可能) |
一般的には
JPEG画像
写真画像を扱う
ほとんどのブラウザに対応
GIF画像
256色以下のイラストを扱う
256色以下の透過画像
アニメーション画像
PNG画像
256色以上のイラストを扱う
256色以上の透過画像
アルファチャンネル(半透過)
関連記事
- HTMLの構造
- 文字コードの指定
- HTMLファイルを作って、ブラウザで表示してみる
- 『開始タグ』と『閉じタグ』
- テキストに意味づけをする マークアップ
- 子要素として許可される要素 内包可能要素
- ブロック要素(ブロックレベル要素)とインライン要素
- 見出し H1 H2 H3 H4 H5 H6
- 文章のまとまり、段落 P ADDRESS BLOCKQUOTE
- 表組みを作成する TABLE TH TD
- リストを作成する UL OL DL
- 横罫線を引く HR
- 改行する BR
- 文章中のテキストに意味を付ける インライン要素のマークアップ
- テキストの装飾をする
- 上付き文字、下付き文字を表示する SUP SUB
- 追加された部分、削除された部分であることを示す INS DEL
- リンクなどのパスの指定
- 別のページへのリンク 同ページ内のリンク A
- 他のページを参考にする ソースを見る
- HTML特殊文字 HTMLエスケープ 実体参照
スポンサーリンク