【初心者向け】画像フォルダの作り方とそれぞれの画像データの違い

こばゆた

今回はWebサイトで使う画像フォルダの準備と画像データのそれぞれの違いを軽く説明します

チャッピー

おんなじ画像にも違いがあるのは知らなかったよ

1.画像フォルダの作り方

まず例として以前作成した”sample-site”を開きます。

【初心者向け】Webサイトを作成するためのフォルダとファイルの準備

Webサイトを作るためのフォルダとHTMLファイルを作成し画面に表示するまでをやって行きます。

kbyt-programming.com

2021年10月03日

もしご自身のフォルダがある方はそちらを開いて下さい。

そのあとは以下の図の通りです。

あとはこのフォルダに画像を追加して行けば使いたい時に使えるようになります。

またWindowsも同じ感じでできると思います。

チャッピー

え？これだけ？

こばゆた

それだけだよ(笑)

きなこ

簡単すぎて拍子抜けしちゃったよ

2.画像データによるそれぞれの違い

画像データのそれぞれの違いを軽く押さえておきましょう

2-1.JPG

長所

• 再現できる色が多いため境界線もうまく再現でき、高品質
• データが軽い

欠点

• 保存を繰り返すと画像が劣化していく
• 透過ができない

用途

• 写真に向いている

2-2.PNG

長所

• 透過させる事ができる
• データが軽い
• 画像の劣化がない

欠点

• データが軽いといえど情報量が多くなるとやや重くなる

用途

• イラスト、人工物に向いている

2-3.GIF

長所

• データが軽い
• アニメーションが作れる
• 透過ができる

欠点

• 使える色の種類が少ない(256色)ため写真には向いていない

2-4.SVG

長所

• 拡大、縮小しても画質が変わらない
• アニメーションが作れる

欠点

• 写真には向いていない

用途

• ロゴなどに向いている

こばゆた

本当に簡単に長所と短所をまとめました

3.まとめ