Qiita記事に貼れない拡張子の画像ファイルがあるってマ？

# 記事に画像を添付したい！

いざマークダウン記法で記事を書くぞ！
となった時、皆さんはどんな画像の拡張子を使っていますか？

画像の拡張子（ファイル形式※ファイルフォーマット）ってたくさんありますよね。

この記事は、**いろんな画像の拡張子を実験的に貼ってみよう！**
と、試みた記録になっております。
「どれ使えばいいかわかんない！」って人に読んでいただけたらと思います。

# ご安心ください。たくさんご用意しました。
![スクリーンショット 2022-07-26 8.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2105577/42b437bc-005f-2c28-86ae-6f36f6a94543.png)
この記事のためにいろんな拡張子の画像をご用意しました。
- .jpg（jpeg）
- .png
- .gif
- .svg
- .bmp
- .wedp
- .tga
- .tif(tiff)
- .ico
- .icns
- .pdf
- .psd
- .ai
- .clip
- .HEIC
- .rw2

わぁ〜いっぱい……(^^)
調べた限りもっとあるらしいのですが割愛させてください。ﾕﾙｼﾃ……

<font color="red">それでは貼っていきます！</font>
***
**↓.jpg（jpeg）（ジェイペグ）**
<img width="300" alt="オブちゃんqiita01.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2105577/e2bcd961-294f-4c4f-56b3-a3519dfbf1e8.jpeg">
jpgは写真とかに使われますね。
pngと違い透過にすることができません。
***
**↓.png（ピング）**
<img width="300" alt="オブちゃんqiita02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2105577/084985ee-b5fc-9758-8d49-ff13bb235784.png">
透過ができて画像も劣化しにくい！jpgより容量は大きめになるのが多いです。
カラーモードをCMYK（印刷用）に設定することはできませんので、印刷物にはあまり使われません。
***
**↓.gif（ジフ/ギフ）**
<img width="300" alt="オブちゃんqiita03.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2105577/7c897edb-3a35-0683-f875-7493910a72c1.gif">
**こいつ……っ動くぞ……！？（感動）**
データ容量がjpgやpngに比べて軽いのが多いです。
ちょっとしたアニメーションを載せることができます！
***
**↓.tif(tiff)（ティフ）**
<img width="300" alt="オブちゃんqiita09.tif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2105577/b93fcb65-eea3-1520-d1c5-830196e6054b.tiff">
主に印刷に使われる画像形式です。
容量が大きめの画像に使われることが多いです。
***

# 結果

:::note info
記事に貼れる画像の拡張子
- .jpg（jpeg）
- .png
- .gif
- .tif(tiff)

（え……少な……嘘やん……）
:::
:::note alert
記事に貼れなかった画像の拡張子
- .svg
- .bmp
- .webp
- .tga
- .ico
- .icns
- .pdf
- .psd
- .ai
- .clip
- .HEIC
- .rw2

:::
というわけで、このような結果になりました。
「じゃあ記事に貼れなかった拡張子は一体何？？」
を次で簡単に説明しましょう！
# 記事に貼れなかった拡張子の種類
**.svg（エスブイジー）**
簡単なロゴやアイコンのデータに使うと良いです。
CSSやJavaScriptのアニメーションと相性が良いんだとか。

**.bmp（ビーエムピー/ビットマップ）**
圧縮されていないファイル形式。大きめの画像が多いので容量も大きめです。
Webで使うには向いてないそうです。

**.webp（ウェッピー）**
GoogleがWebサイト向けに開発しているファイル形式。
.jpg（jpeg）や.pngより容量を小さくできる。
ブラウザによってはまだサポートされていない。
（「ウェッピー」って個人的にマスコットキャラの名前みたいでかわいいなと思いました）

**.tga（ティージーエー）**
Truevision社が開発したファイル形式。
アニメーション業界で使われていることが多い。
圧縮しないので容量は大きいけど劣化はしない。

**.ico（アイシーオー）**
Windowsでアイコンに使用されるファイル形式。

**.icns（アイシーエヌエス）**
MacOSXでアイコンに使用されるファイル形式。

**.pdf（ピーディーエフ）**
文字、図形、表などを紙に印刷するようにレイアウト（配置）したページの状態を保存するためのファイル形式。テキストを選択・コピーができ、URLを記載すればクリックしたら開くこともできるので資料などによく使用されます。

**.psd（ピーエスディー）**
アドビシステムズが開発した「Adobe Photoshop」というグラフィック作成・編集ソフトで利用されるファイル形式。Adobeのアプリケーション内の他、ペイントツール「FireAlpaca」や「CLIP STUDIO PAINT」でも開けるのでよく使います。

**.ai（エーアイ）**
同じくアドビシステムズが開発した「Adobe Illustrator」というベクターベースのグラフィックデザインソフトのファイル形式。

**.clip（読み方様々）**
セルシスが開発したペイントソフトツール「CLIP STUDIO PAINT」のファイル形式。
他のソフトウェアでは開けません。
呼ぶときは自分はクリスタデータと言ってます。

**.HEIC（ヘイク）**
Moving Picture Experts Groupが開発した、iOS11以降のiPhoneで使われている画像データのファイル形式。高画質でデータサイズは小さい。
pc環境によっては見れないのでjpgやpngに変換する必要がある。
（GoogleドライブやSlackのようなツール上であればプレビューできる）

**.rw2（読み方様々）**
RAW（ロー）データと言われるもの。デジタル一眼、ミラーレス一眼の写真データに使用されるファイル形式で、容量は非常に大きい。
他に「.arw」「.cr2」「.nef」「.raf」 などもある。
pc環境では見れないのでjpgやpngに変換する必要がある。

# 終わりに

今回実験をやってみて、.tif(tiff)も記事に貼れるんだ～！と自分がまだ知らなかった発見がありました！

それ以外は……まぁ……せっかく……全部違う絵で用意したのにな……（；；）という気持ちです……。

記事を書く際はjpg（jpeg）かpngあたりを使うと良いと思います。
ただ、ブラウザや今後によっては貼れる拡張子が増えるかも知れませんね！

画像の拡張子は用途やサイズによってうまく使い分けていきましょう！

<img width="400" alt="ワシャワシャオブちゃん.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2105577/24b6be74-8a39-164a-9302-5d4ddf160b25.gif">

**それでは楽しい画像貼りライフを！！！！！！！！！**

＜参考＞
[画像拡張子・ファイル形式の種類一覧!JPG・PNG・GIF等違いを比較](https://peraichi.com/univ/16#i-3)
[Webサイトに最適な画像形式は何？](https://fastcoding.jp/blog/all/webdesign/website-images/)

＜余談＞
gifを「ギフ」、pngを「ペング」といつも読んでしまうので相手が違う（正しい？）読み方してるとオッフ……ってなります。