離脱率30%増、SEO評価DOWNの危機を回避せよ。
ども。Dadです。
拡張子選びミスでサイトが遅くなる。離脱率30%UP、SEO評価DOWNの危機を回避。
画像からプログラムまで、Web実務で必要な拡張子を一挙解説します。
なぜ拡張子を知るべきか？
拡張子は「ファイルの種類」と「最適用途」を決めるラベルなんです。
間違えるとサイト遅延→離脱率UP→SEO低下という最悪パターンに陥ることもあります。
拡張子完全一覧
① 画像系拡張子
| 拡張子 | 主な用途 | 特徴（ざっくり） |
|---|---|---|
| .jpg / .jpeg | 写真 | 軽い・写真向き・画質は劣化 |
| .png | 画像・ロゴ | 透過OK・文字や図向き |
| .gif | アニメ | 簡単な動き・色数少なめ |
| .webp | WEB画像 | 高圧縮・最近の主流 |
| .svg | アイコン | 拡大しても劣化しない |
| .bmp | 画像 | 非圧縮・ほぼ使わない |
| .tiff | 印刷 | 高画質・容量大 |
| .heic | スマホ写真 | iPhone標準・WEBでは変換推奨 |
② 動画・音声系
| 拡張子 | 主な用途 | 特徴 |
|---|---|---|
| .mp4 | WEB動画 | 一番無難・ほぼこれでOK |
| .mov | 動画 | Apple系・容量大 |
| .webm | WEB動画 | 軽量・対応環境に注意 |
| .avi | 古め | 非圧縮多い・重い |
| .mkv | 高画質 | 管理向き・WEB非推奨 |
| .mp3 | 音声 | 軽い・汎用 |
| .aac | 音声 | mp3より高音質 |
| .m4a | 音声 | Apple系で多い |
| .wav | 編集 | 高音質・重い |
| .flac | 保存 | 無劣化・容量大 |
③ ドキュメント・WEB・圧縮系
| 拡張子 | 用途 | 特徴 |
|---|---|---|
| 資料 | レイアウト固定・共有に最適 | |
| .docx | 文章 | Word形式 |
| .xlsx | 表計算 | Excel形式 |
| .pptx | スライド | PowerPoint形式 |
| .txt | テキスト | 超シンプル・メモ向き |
| .md | メモ | Markdown・WEB向き |
| 拡張子 | 用途 | 特徴 |
|---|---|---|
| .html | WEB | ページの骨組み |
| .css | WEB | デザイン指定 |
| .js | WEB | 動き・制御 |
| .php | サーバー | 動的処理 |
| .json | データ | 設定・API |
| .xml | データ | 構造化データ |
| .htaccess | サーバー | 挙動制御・要注意 |
| 拡張子 | 用途 | 特徴 |
|---|---|---|
| .zip | 圧縮 | 一番一般的 |
| .7z | 圧縮 | 高圧縮 |
| .rar | 圧縮 | 専用ソフト多い |
| .exe | 実行 | Windows用・実行ファイル |
| .dmg | 配布 | Mac用インストーラ |
これでサイト速度10-30%改善！
3点を習慣化。
サイト速度10-30%改善が見込めます！
- 画像圧縮→WebP変換：HEIC→WebP（TinyPNG等使用）
- CSS→min化：AutoprefixerやWPプラグイン
- HEIC→即変換：Handbrake等で変換
ではまた。
