画像を設置する IMG

ページ内に画像を配置するにはIMGタグを使います。

<img src="画像のパス" width="横幅(ピクセル)" height="縦幅(ピクセル)" alt="画像が表示できないときの代替テキスト" />

<IMG> 画像を表示する
[参考記事] リンクなどのパスの指定

width属性、height属性による画像サイズ

width属性、height属性による画像サイズの指定を行わなかった場合、画像を読み込んでから画像領域の大きさが確定するため、ページ読み込み中のブラウザ表示が綺麗ではありません。
回線速度の遅いモバイル環境では顕著に影響されます。
特にauのガラケー携帯では、かなりガクガクします。
width属性、height属性は指定するようにしたほうがいいです。

また画像ファイルのサイズとwidth属性、height属性の値が違う場合には拡大縮小がされますが、この拡大縮小は間抜き、間補完によるものが一般的なので綺麗ではありません。
よほどの理由がないとき以外は画像自体のサイズを正しく作成するようにします。

[参考記事] VGA端末の画像表示対応
[参考記事] 画像表示のときに指定サイズにリサイズする(画像の拡大縮小)

画像の種類

表示させるする画像は、画像形式の特徴を踏まえて利用するようにします。
[参考記事] JPEG画像の特徴
[参考記事] GIF画像の特徴
[参考記事] PNG画像の特徴

画像形式JPEGGIFPNG
画質の劣化不可逆圧縮可逆圧縮可逆圧縮
最大色数約1678万色(24bit)256色(8bit)約1678万色(24bit)
約280兆色(48bit)
透過処理不可可能(1色)可能(1色)
アルファチャンネル
半透過
不可不可可能
アニメーション不可可能不可
(APNG、MNGは可能)

一般的には

JPEG画像

写真画像を扱う
ほとんどのブラウザに対応

GIF画像

256色以下のイラストを扱う
256色以下の透過画像
アニメーション画像

PNG画像

256色以上のイラストを扱う
256色以上の透過画像
アルファチャンネル(半透過)

スポンサーリンク

関連記事

スポンサーリンク

各メーカーのルーターのID・パスワードの一覧 G

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る