こんにちは。高知県高知市で「営業」に強いホームページ制作を行っている、株式会社ICUの川島です。

最近、AIで画像を生成してホームページやブログに使う方が増えてきました。挿絵やイメージ写真をすぐに作れるので、とても便利です。

ただ、ひとつ気をつけたいことがあります。

こんなご相談がありました。

「AIで作った画像をホームページに載せたら、ページの表示がすごく遅くなりました」

結論としては、AI生成画像はそのままではホームページ向けとしては大きすぎます。サイズと形式を調整するだけで、表示速度はぐっと改善します。

AI画像はなぜ重いのか

AIが画像を作るとき、ほとんどの場合PNG（ピング）という形式で出力されます。PNGは画質がまったく劣化しない保存形式で、いわば「描いたまんまの状態」です。せっかく作った画像を最高の品質で渡したい、という考えでAIはこの形式を選んでいます。

ただ、劣化しない分、ファイルサイズが大きくなります。高画質の設定で生成すると4MB近くになることもありますし、小さめの設定でも1.4MB程度はあります。ホームページに載せる画像としては、はっきり言ってオーバースペックです。

しかし私は、この仕組み自体は理にかなっていると思っています。きれいな状態で画像を受け取れるので、用途に合わせて自分で調整すればいい。問題は「調整せずにそのまま載せてしまう」ことです。

やりがちな落とし穴

一番多いのは、生成した画像をそのままアップロードしてしまうケースです。1枚4MBの画像が3枚あれば、そのページだけで12MB。スマートフォンで開いたら、表示に何秒もかかります。

次によくある失敗は、画像の縦横サイズは縮小したものの、ファイル形式をPNGのまま残しているケースです。PNGは劣化しない代わりにファイルサイズが大きい形式なので、縦横を小さくしてもまだファイル容量は重たいのです。ピクセルのサイズを小さくしたリサイズだけでは、思ったほど軽くならないことがあります。

2つの手順でPNGを調整する

AIで出力したPNG画像の調整方法を解説します。

まず、画像の縦横サイズを調整します。横幅または高さの大きいほうを950ピクセル程度にしてください。ホームページの本文エリアは多くの場合700〜1000ピクセル幅ですので、それより大きな画像を載せても、ブラウザが縮小して表示するだけです。見た目は変わらないのに、データだけが大きいという状態になります。お使いのホームページやブログのシステムが自動で縮小してくれることもありますが、元の画像が大きいとアップロード自体に時間がかかるので、先に整えておくほうが確実です。

次に、ファイル形式をJPEG（ジェイペグ）に変換します。品質の設定は80で十分です。見た目はほとんど変わらないのに、4MBあった画像が0.4MB以下になることも珍しくありません。

慣れてくると、用途に合わせてどのくらいのサイズにすればよいかがわかってきます。たとえばこのブログの挿絵は横幅690ピクセルのJPEGで、1枚あたりのファイルサイズは0.05〜0.1MB程度です。最初は950ピクセル・品質80を目安にしておけば十分ですので、まずはそこから始めてみてください。

画像編集ソフトやウェブの変換サービスを使えば、リサイズとJPEG変換はまとめて行えます。

画像を軽くした先にあるもの

画像を軽くすると、ページの表示が速くなります。それは単に「待たされない」というだけの話ではありません。

見ている方がスマートフォンで通信しているなら、データ量にも影響します。画像が軽いほど、見る側の負担は小さくなります。ページがスムーズに開けば、次のページにも進んでもらいやすくなります。

私は、画像をきれいに作ることと、快適に届けることは同じくらい大事だと考えています。その積み重ねがサイト全体の品質を上げ、検索エンジンの表示順位にもプラスに働くことがあります。

リサイズとJPEG変換、覚えてしまえば大した手間ではなくなります。ファイルサイズが目に見えて小さくなると、ちゃんと効いている実感が持てますよ。当社のサービスをご利用中のお客様で、わからないという方はお気軽にご相談くださいね。