ブログの記事を書くとき、文章やテーマには気をつかうのに、画像の扱いはなんとなく後回しになりがちだったりします。
私もブログを始めたころは、画像の縦横比やサイズは整える程度。写真はJPG、イラストはPNG。記事に合うサイズにリサイズしてからアップする。そんな形で運用していました。
ただ、からだカフェの記事数が増えてきたころ、ふと気づいたことがありました。
ページが、少し重いかもしれない。
そこで改めて画像の容量を見直してみると、まだ軽くできる余地がありました。そこから取り入れるようになったのが、WebP形式の画像です。
※WebP
最初は「ウェブピー？」と読んでいたのですが、実は 「ウェッピー」 という、ちょっと可愛い響きの拡張子でした。
ブログ記事の画像を軽くする方法として、最近よく使われているのが WebP形式の画像です。
画像形式はWebP（ウェッピー）を使うようにしています
WebPは、Googleが開発した画像形式で、JPEGやPNGよりも 容量を小さくできるのが特徴です。同じ見た目でも、ファイルサイズがかなり軽くなることがあります。
そのため最近は、ブログやWebサイトの画像として主流になりつつある形式とも言われています。からだカフェでも、少し前から、作成する画像はできるだけWebP形式で保存するようにしています。
ほんの小さな工夫ですが、記事が増えてくると、こういう積み重ねがサイト全体の軽さにつながっていきます。
スマホ写真は想像以上に大きい
もうひとつ気をつけているのが 画像サイズ（解像度）です。
最近のスマートフォンは本当に性能が高く、解像度の高いとてもきれいな写真が撮れます。
その分、画像サイズもかなり大きいことがあります。
スマホやパソコンの性能は上がっていますが、だからといって必要以上に大きな画像をそのまま使うのはよくありません。ブログ記事で表示されるサイズは実際にはそこまで大きくないことがほとんどです。
そのため私は自分って撮影した写真やAIで作成した画像等々、記事に使う前に必ず画像のリサイズをするようにしています。
例えば
・横幅を記事サイズに合わせる
・不要に大きい画像を小さくする
こうするだけで画像容量はかなり軽くなります。
ちなみに、からだカフェの記事では画像サイズもある程度そろえるようにしています。
例えば
・キャッチ画像
横1200px × 縦675px
・記事内画像
横800〜1200pxくらい
このくらいのサイズにしておくと、見た目も整いやすく、容量も大きくなりすぎません。もちろん、絶対にこのサイズでなければいけないわけではありません。
ただ、
「必要以上に大きな画像を使わない」
これを意識するだけでも、サイトの軽さはかなり変わってきます。
私が使っている画像編集ツール「Photopea（フォトピー）」
画像のリサイズや簡単な編集には Photopea（フォトピー） を使っています。
ブラウザで使える画像編集ソフトで、操作感はPhotoshopにかなり近いのが特徴です。
以前はAdobeのソフトを使っていたこともありましたが、サブスクリプション形式になり、私の場合は使用頻度を考えると少しもったいない気もしていました。
そこでフリーで使えるツールを探して、いくつか試した中で一番しっくりきたのがPhotopeaです。画像のリサイズ程度であれば、無料でストレスなく使えます。WebPへの書き出しももちろんできます！
最近はCanvaも人気で、デザインや画像作成など幅広い用途で使えますよね。私もCanvaを含めていろいろ試しましたが、個人的には、画像リサイズや書き出しにはPhotopeaが一番使いやすいと感じています。
ブラウザで開いてすぐ使えるのもとても便利なところです。DL版のソフトもあって、メインのPCにはDL版を。ノートPCではWeb版を使用してます。
TinyPNGで画像を軽くする
画像を書き出したあと、もうひとつよく使っているのがTinyPNG というサービスです。
画像をアップロードするだけで、自動で容量を圧縮してくれます。
操作はとてもシンプルで、画像をドラッグして入れるだけ。見た目の品質はほとんど変わらないのに、容量がぐっと小さくなることもあります。
私の場合は
- Photopeaで画像編集
- WebP形式で書き出す
- TinyPNGで圧縮
- WordPressにアップ
という流れで使っています。
例えば、からだカフェの記事で使っている画像は、先ほどの加工をおこなっているので20KB〜50KBくらいのものが多いです。キャッチ画像でも40KB〜100KB程度に収まることがほとんどです。
最近のスマートフォン写真はそのままだと数MBあることも珍しくないので、リサイズや圧縮をするだけでかなり軽くすることができます。もちろん、必ずこのサイズにする必要はありません。
ただ
「必要以上に大きな画像を使わない」
これを意識するだけでもページの軽さは大きく変わってきます。
ファイル名も迷子にならないように
もうひとつ、地味だけれど大切なのが画像のファイル名です。
でも記事が増えてくると、どの画像がどの記事なのかわからなくなってしまいます。
そこで今は
・記事テーマ
・内容
がわかるように、記事のslag名と同じファイル名をつけて保存しています。
例えば、、、
記事のURLが、https://karadacafe.com/blog-image-light-habit/ ならば画像のファイル名は、
blog-image-light-habit.webp
blog-image-light-habit_img.webp
blog-image-light-habit_※画像内容をあらわす単語※.webp
等々のような形です。
小さなことですが、あとで画像を探すときにとても助かります。
記事公開前にしている小さな画像チェック
記事を書き終えたあと、最後に画像まわりを軽く確認するようにしています。難しいことではなく、ほんの数分のチェックです。私が見ているのは、だいたいこのあたり。
・画像サイズは大きすぎないか
・WebP形式になっているか
・TinyPNGで圧縮しているか
・ファイル名がわかりやすいか
たったこれだけですが、このひと手間があるだけでページの軽さや管理のしやすさが変わってきます。こうした画像の整えは、ブログだけでなく、スマホ写真の整理にも応用できます。
見えない整えが、記事を軽くしてくれる
画像を整える作業は、記事の中ではあまり目立たない部分です。
でも
・画像サイズ
・容量
・ファイル管理
こうした小さな整えがあると、記事全体がとても扱いやすくなります。
画像が軽いと、ページの表示がスムーズになります。読む人にとってもストレスが少なく、サイトの読みやすさや快適さにもつながります。
ブログを長く続けていると、こういう 見えない部分の習慣 が少しずつ効いてくるように思います。ほんの少し整えるだけでサイトも作業も軽くなる。そんな小さな習慣です。
記事を書くとき、文章ばかりに目がいきがちですが、実は画像まわりの整えも大切な時間。
少し手をかけるだけで、サイトの呼吸が軽くなる気がします。
