🌊
【初学者によるまとめ】この一冊で全部わかるWeb技術の基本 「Chapter4」＞「02 Webページで使用される画像形式」
目的：「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめ、Qiitaへアウトプットして理解力の向上に努める。
| 注意点 |
|---|
| 🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。 |
| 例）🤔<(感想、考察、疑問点など) |
（参考書籍）
（参考サイト）
画像img要素で表示する
- 画像はimg要素で表示する
- img要素には閉じタグは必要無い
- src属性に「ファイルが配置してあるパス」を指定する
img要素による画像表示
<img src="app/images/image.jpg">
:::note warn
- Webで扱う画像データは「ネットワーク転送量」の観点から、ネットワーク転送量を減らす目的で基本的にはデータサイズが小さい形式が使われる
:::
| 画像形式 | 主な特徴 |
|---|---|
| JPEG | ・主に写真やイラストなど色数が多い画像に使用される ・画像を加工するよりも、そのまま画像を表示する場合に適する |
| PNG | ・主にシンプルなロゴや図など色数が少ない画像に使用される ・JPEGとは異なり画像の透過が可能なので、背景となじませたり、画像を重ねて使用したりと画像の加工が可能 |
| GIF | ・GIFはパラパラ漫画のようなアニメーションが表示可能 ・画像として扱う場合にはPNG形式などそちらを採用した方が良い |
| SVG | ・Webページで使える唯一のベクター形式の画像ファイル ・拡大縮小しても画質が変わらない |
＞ベクタ形式について
複数の点（アンカー）の位置とそれを繋いだ線、色、カーブなどを数値データとして記憶し再現する形式をベクタ形式といいます。数値で管理しているので、描いたグラフィック自体はデータ量も小さく、変形がしやすいです。https://www.asobou.co.jp/blog/web/vector-raster#i-2:~:text=が落ちます。-,ベクタ形式について,-複数の点
Discussion