Studioで画像を軽くする基本——公開後の表示速度を落とさない3つの工夫

Studioに限らず、公開したサイトを開いたときに「なんとなく重い」と感じる原因の多くは画像です。文章やレイアウトの調整に比べて見落とされがちですが、効果は大きく出やすい部分でもあります。

この記事では、画像をアップロードする前に確認しておきたい3つの工夫を整理します。特別な知識やツールが無くても、今日から意識できる内容です。

表示速度の多くは「画像の重さ」で決まる

同じページの中で、文章のデータ量はごくわずかです。ページ全体の重さのほとんどは画像が占めていることが少なくありません。

つまり、画像を軽くするだけでページ全体の表示速度が目に見えて変わることがあります。デザインや文章を作り込む前に、まず画像の扱い方を見直しておくと効率がよい部分です。

工夫1：表示する大きさに合わせて書き出す

スマートフォンのカメラで撮った写真や、大きな画面のスクリーンショットは、そのままだと実際に表示するサイズよりもずっと大きな画像データになっていることがほとんどです。

Studioは閲覧環境に応じてある程度サイズを自動で出し分けてくれますが、その基準になるのはアップロードした画像そのもののサイズです。表示される大きさより極端に大きい原本をアップロードするほど、そのぶんデータ量や表示速度に影響します。ページで実際に表示する最大サイズ（多くの場合はパソコン向けの横幅）に近いサイズで書き出しておくと、無駄なデータを減らせます。

工夫2：写真とロゴ・アイコンで形式を使い分ける

画像の形式（拡張子）は、写真のような色数の多い画像と、ロゴやアイコンのような色数の少ない画像とで向き不向きが分かれます。

写真はJPEGやWebPのような、色の情報を上手に圧縮できる形式が得意です。一方、輪郭のはっきりしたロゴやアイコン、文字を含む画像は、PNGやSVGのほうがくっきりした輪郭を保ちながら軽く仕上がりやすい傾向があります。

工夫3：似た写真を並べすぎない

1枚あたりを軽くしても、同じような写真を何枚も1つのページに並べれば、合計のデータ量は結局大きくなります。

ギャラリーのように写真を並べたいセクションほど、本当に見せたい枚数まで絞り込む価値があります。似た構図の写真が続く場合は、いちばん伝わる1枚に絞るだけでも合計の重さはかなり変わります。

確認の仕方

公開前に、次の順番で確認すると見落としを減らせます。

• ブラウザの開発者ツールで、ページ全体の通信量を確認する
• 通信量の内訳のうち、画像が占める割合が大きくなっていないか見る
• 極端にファイルサイズの大きい画像が紛れていないか、1枚ずつ確認する
• スマートフォンでの表示も、パソコンと同じ画像がそのまま使われていないか確認する

まとめ

画像はページの重さのほとんどを占める一方、書き出し方ひとつで軽くできる伸びしろの大きい部分でもあります。表示するサイズに合わせて書き出す、形式を使い分ける、枚数を絞る——この3つを意識するだけで、公開後の体感速度は変わってきます。