ノーコードサイトの画像最適化は、画像を適切な大きさに縮小し、用途に合う形式で圧縮してからアップロードするのが基本です。さらに、表示サイズの調整、遅延読み込み、代替テキストの設定まで行うと、表示速度と使いやすさを改善しやすくなります。
ノーコードサイトの画像最適化で最初にすること
まずは、元画像をそのままアップロードせず、実際に表示する大きさに合わせてリサイズします。スマートフォンで小さく表示する画像に、数千ピクセルの大きな画像を使うと、必要以上にデータを読み込むことになります。
たとえば、サイト上で横幅800px程度に表示する画像なら、横幅を800〜1,600px程度に調整してからアップロードします。表示サイズやサイトの仕様が分からない場合は、画像を複数の大きさで用意するのではなく、まず管理画面のプレビューで実際の見え方を確認してください。
画像を用途に合う形式へ変換する
画像形式は、写真かイラストか、透過が必要かによって選びます。ノーコードサービスが対応している範囲で、次のように使い分けると判断しやすくなります。
| 画像の種類 | 向いている形式 | 特徴 |
|---|---|---|
| 写真、複雑な画像 | WebP、対応していればAVIF | 画質を保ちながらファイルサイズを小さくしやすい |
| ロゴ、イラスト | WebP、PNG | PNGは透過に対応しやすいが、写真では大きくなりやすい |
| 単純な図形や色の少ない画像 | SVG | ロゴやアイコンに向くが、サービスによってアップロードできない場合がある |
| 古い環境への対応を優先する画像 | JPEG、PNG | 対応範囲は広いが、WebPなどより容量が大きくなることがある |
迷った場合は、写真にはWebP、透過が必要なロゴや画像にはWebPまたはPNGを試す方法が現実的です。AVIFやSVGに対応しているかはノーコードサービスによって異なるため、アップロードできない場合はWebPやPNGなど、対応形式へ変更します。
アップロード前に画像を圧縮する
画像は、画質を大きく落とさずにファイルサイズを小さくできる圧縮ツールで処理してから使います。圧縮後の画像を拡大表示し、文字や輪郭がぼやけていないか確認してください。
圧縮率に迷う場合は、画像の見た目を確認しながら調整します。ファイルサイズだけを極端に小さくすると、写真の細部が崩れたり、文字入り画像が読みにくくなったりするためです。
なお、画像の圧縮と画像のリサイズは別の作業です。大きすぎる画像を圧縮するだけでは、不要な画素数が残ることがあります。「表示サイズに合わせてリサイズする」→「圧縮する」の順番で行うと効率的です。
ノーコードサービスの画像設定を確認する
画像を最適化しても、ノーコード側の設定によって読み込み方が変わります。画像ブロックやメディア設定に次の項目があれば、用途に合わせて設定してください。
- 画像の表示幅・高さ
- レスポンシブ表示
- 遅延読み込み
- 画像の品質や自動圧縮
- サムネイルや複数サイズの自動生成
- 代替テキスト
「レスポンシブ表示」は、画面の幅に合わせて画像の表示サイズを調整する機能です。スマートフォンでもパソコン用の大きな画像だけを読み込む設定になっていないか確認します。
「遅延読み込み」は、画面にまだ表示されていない画像の読み込みを後回しにする機能です。ページ下部に多くの画像がある場合に役立ちますが、ページの最初に表示されるメイン画像まで遅延させると、表示開始が遅くなることがあります。ファーストビューの画像は、遅延読み込みの対象外にできる場合があります。
画像の表示サイズと縦横比をそろえる
同じ一覧ページに掲載する画像は、縦横比をそろえると、表示の乱れを防ぎやすくなります。元画像の比率がばらばらだと、カードの高さがそろわなかったり、画像が意図せず切り取られたりします。
画像を切り取る設定には、主に次の違いがあります。
- 画像全体を表示する：画像が切れにくい一方、上下や左右に余白が出ることがあります。
- 枠いっぱいに表示する：余白は出にくい一方、画像の端が切れることがあります。
商品写真や人物写真など、端が切れると意味が変わる画像は全体表示を優先します。カード一覧の背景画像など、多少のトリミングが問題にならない画像は枠いっぱいの表示が向いています。
画像には内容が分かる代替テキストを設定する
代替テキストは、画像が表示されないときや、読み上げ機能が使われるときに画像の内容を伝える文章です。ノーコードサイトの画像設定に「代替テキスト」「ALT」「画像説明」などの項目があれば、画像の役割に合わせて入力します。
たとえば、商品画像なら「白い陶器のマグカップ」、店舗案内の画像なら「店舗外観と入口の写真」のように、画像の内容を簡潔に書きます。単なる装飾画像で、文章の内容を補足しないものは、設定画面に応じて空欄にすることもあります。
ファイル名も「IMG_1234.jpg」のままにせず、「白いマグカップ.jpg」のように内容が分かる名前にしておくと、管理しやすくなります。ただし、ファイル名を変えるだけで表示速度が大きく改善するわけではありません。
画像最適化後に表示速度を確認する
画像を差し替えたら、パソコンだけでなくスマートフォンでもページを確認します。特に次の点を見てください。
- ページ上部の画像がすぐ表示されるか
- 画像がぼやけていないか
- 画像の一部が意図せず切れていないか
- スマートフォンで横スクロールが発生していないか
- 画像の読み込み中にレイアウトが大きくずれていないか
- 画像が表示されない場合でも内容を判断できるか
表示速度を数値で確認したい場合は、サイトのURLを速度測定ツールで調べます。数値は画像だけでなく、動画、外部フォント、埋め込み機能、JavaScriptなどにも左右されるため、画像を軽くしただけで問題がすべて解決するとは限りません。
ノーコードサイトで避けたい画像の使い方
次の使い方は、表示速度や見やすさを損ねる原因になりやすいため注意が必要です。
- スマートフォンで小さく表示する画像を、必要以上に大きなサイズで登録する
- 写真をすべてPNGで保存する
- 同じ画像をページ内で何度も別ファイルとして読み込む
- 画像の中に重要な文章を詰め込む
- ファーストビューに大容量の動画や背景画像を重ねる
- 画像の縦横比を確認せずに自動トリミングする
特に、画像内の文字はスマートフォンで小さくなりやすく、検索エンジンや読み上げ機能にも内容が伝わりにくくなります。重要な案内文は、できるだけ通常のテキストとしてページに入力します。
画像最適化の実行手順
具体的には、次の順番で進めると設定漏れを減らせます。
- ページ上で画像が表示される幅と用途を確認する。
- 元画像を表示サイズに合わせてリサイズする。
- 写真やイラストに合う形式へ変換する。
- 画質を確認しながらファイルを圧縮する。
- ノーコードサイトへアップロードし、必要なら既存画像と差し替える。
- 表示幅、レスポンシブ設定、遅延読み込みを確認する。
- 画像の内容に合う代替テキストを入力する。
- パソコンとスマートフォンで表示と読み込みを確認する。
まず着手するなら、ページ上部にある大きな画像と、ページ内で数が多い画像から見直します。これらは、画像の大きさや枚数が読み込みデータに影響しやすいためです。
ノーコードサイトの画像最適化で判断に迷ったとき
画像形式や設定は、利用しているノーコードサービスの対応状況によって変わります。そのため、すべてのサイトで同じ形式や容量を目標にするのではなく、表示サイズ、画質、読み込み速度のバランスで判断してください。
基本は「表示サイズに合わせてリサイズ」「WebPなど対応形式へ変換」「圧縮」「レスポンシブ表示と遅延読み込みを確認」「代替テキストを設定」です。画像を軽くしても表示が遅い場合は、動画や外部サービスなど、画像以外の読み込み要素も確認します。
