画像が重いだけで表示が遅くなります。
最低限の「圧縮」と「読み込み指定」だけで、体感は大きく改善します。
デモ / リポジトリ（公開後に差し替えOK）
- デモ（GitHub Pages）：
https://ユーザー名.github.io/リポジトリ名/ - リポジトリ（GitHub）：
https://github.com/ユーザー名/リポジトリ名
この記事でできるようになること（3行）
- 画像を軽くする「順番」と「目安」が分かる
- HTMLで読み込みを最適化できる（
loading="lazy"） - 初心者でも無理なく改善できる範囲だけ実施できる
0. まずは結論（これだけでOK）
- 画像サイズを小さくする（最重要）
- WebPなど軽い形式を使う
-
読み込みを遅延させる（
loading="lazy"）
1. 画像を圧縮する
無料のオンライン圧縮でOKです。
- TinyPNG
- Squoosh
目安：
- 1枚あたり 200KB 以下
- できれば 100KB 前後
2. 画像のサイズを合わせる（超重要）
表示サイズと画像サイズを近づけるのが基本です。
例：横560pxで見せたいなら、画像も横560pxで作る。
よくある失敗：
- 2000pxの画像を、560pxで表示している（無駄に重い）
3. HTMLで読み込みを軽くする（loading="lazy"）
img に loading="lazy" を追加します。
<img src="works-1.webp" alt="作品1" loading="lazy">
画面に入るまで読み込まないので、最初の表示が速くなります。
4. WebPを使う（できる人だけ）
JPEG/PNGより軽い形式です。
- 画像名を
xxx.webpにする - HTMLの
srcを変えるだけでOK
<img src="works-1.webp" alt="作品1" loading="lazy">
5. 最低限のチェックリスト
- 画像は 圧縮した（100〜200KB目安）
- 表示サイズに近い大きさで用意した
-
loading="lazy"を付けた - 余裕があればWebPにした
よくあるつまずき
-
画質が悪くなる
→ 圧縮しすぎ。品質を少し上げる（Squooshで調整） -
画像がぼやける
→ 表示サイズより小さい画像を使っている -
WebPが表示されない
→ ファイル名だけ変えていて、実体がWebPになっていない（変換できているか確認）
まとめ
- まずは「圧縮」と「サイズ合わせ」だけで十分
-
loading="lazy"は簡単で効果が大きい - WebPは余裕があれば導入
次に読む
- 【超初心者】ポートフォリオの信頼感を上げる実績の書き方（数字で語る）
→ 表示が軽くなったら、次は「実績の伝え方」を整えると説得力が上がります。
https://qiita.com/ko_nagai_0801/items/63f132371587ce5903cb