100回に至るまでの道のり（アイキャッチ画像の導入の第一歩）
今回は 「アイキャッチ画像の導入の第一歩」 を振り返ってみます。
Canvaでデザインを作り始める前に、まずは 画像の圧縮と形式変換 をどうするかを整理しました。ここでは、SquooshとEWWW Image Optimizerを使った実践をまとめます。
33. Squooshした写真をアイキャッチ画像に
Squooshを使って写真をWebP化し、アイキャッチ画像として導入。これでファイルサイズを大幅に削減しつつ、表示速度も向上しました。
34. WebP形式で配置と注意点
WebP形式は圧縮率が高く劣化が少ないのですが、WordPressでの画質表示やSNSでシェアしたときのサムネイル表示に注意が必要。
「伝えたい情報を中心に配置する」ことが大事だと学びました。
35. iPhone写真とHEIC形式の壁
iPhoneで撮った写真はHEIC形式が多く、そのままではSquooshが読み込めない問題が…。
解決策はシンプルで、事前にJPEGに変換しておくことでした。
36. 縦向き写真やスクショも圧縮可能
横向き写真だけでなく、縦向き写真やスクリーンショットもSquooshで圧縮可能。
これでどんな画像でも軽量化してアイキャッチに使えるようになりました。
37. アイキャッチ画像の充実と今後の整備
アイキャッチ画像は、記事一覧での印象を決める大事な要素。
今後も画像最適化を続けながら、ブログ全体の整備を進めていきたいと思います。
プラグインを使った次のステップ
38. Akismetの設定
スパム対策の基本プラグイン。無料で設定できるので、WordPressを始めるなら必須です。
39. EWWW Image Optimizer導入
自動でWebPに変換し、サイト高速化やサーバー容量の節約に効果的。
40. EWWWの設定見直し
メタデータ（撮影場所情報など）を削除し、遅延読み込みはCocoonテーマに任せるようにしました。
41. .htaccessの編集で自動変換
EWWWの効果を発揮させるために、サーバーの.htaccessファイルを編集。ちょっと緊張しましたが、無事に自動変換できるように。
42. 圧縮の威力
JPEGの2MBの写真を100KBまで圧縮できるのは本当に驚き。サイトが一気に軽くなりました。
43. 自動圧縮の始動
EWWW Image Optimizerを走らせることで、日常的にアップロードする画像が自動で圧縮される体制に。
これが「画像加工の第一歩」となりました。
📌 まとめ
アイキャッチ画像の導入は、単なる見た目の強化だけでなく、サイトの表示速度やSEOにも直結する大事なポイント。
次回は、Canvaでデザインを加えつつ、圧縮と最適化をセットで進めた経緯を整理します。
