【Studio】画像の扱い完全ガイド！追加・形式・サイズの基本

カッパ子

画像の扱い方？普通に使えるけど…

ユウ

それでもいいけど、もっと良い方法があるかもしれないよ！

Studioで画像は、直感的に使用することができますが、最適な画像形式やサイズで使用することで、サイトの表示速度の改善に繋がります。

本記事では、Studioで扱える画像の形式やサイズ、画像の追加方法といった基本について解説します。

画像形式とサイズについて

Studioでアップロードできる画像は5つです。

それぞれの形式の細かい使い分けについては、別記事で詳しく解説していますので、そちらもあわせてご覧ください。

反対に、アニメーションWebPやAPNG（動くPNG）には対応していません。

この2つは動きのある画像を軽いサイズで表示できる新しい形式ですが、Studioではアップロードしてもうまく動かないため、動く画像を使いたい場合はGIFや動画を使用しましょう。

サイズについては共通の上限として、1ファイルあたり最大1GBまでとなっています。

とはいえ、これはあくまで上限の話で、実際は大きすぎる画像はサイトの読み込みを遅くしたり、エディタの動作を重くしたりする原因になります。

また、プランごとにアップロードできるファイルのストレージ容量も決められているので、画像の綺麗さを求めて上限ぎりぎりを狙うのではなく、後ほど解説する「軽くするコツ」を意識して、適切なサイズに整えてからアップロードするのがおすすめです。

Studioでは、追加したい画像をアップロードして、画像ボックスを使えば配置可能です。

アップロードはパソコンのフォルダから画像をドラッグ＆ドロップ、アップロードパネルの追加ボタンを押すことで追加可能。

アップロードパネルは左のアイコンをクリックすることで開くことができ、フォルダで整理したり、画像を削除することができます。

一度アップロードした画像は繰り返し使い回せるので、同じ画像を何度も入れ直す必要はありません。

そして、画像をアップロードパネルから該当の画像を選んで追加するか、画像ボックスをあらかじめ配置してから該当の画像に切り替えることで配置できます。

アップロードパネルから直接追加する方が早いですが、サイト制作では仮の画像を置いてレイアウトだけ完成させてから正式なデザインを作り込んでいくことも多いので、どちらの方法も覚えておくことをオススメします。

最後にサイト制作では意識しておきたい画像を軽くするコツについて話します。

画像を軽くするメリットはサイトの表示速度が上がること。

いつまで経っても表示されないサイトはユーザーの離脱にもつながるので、できることなら対策しておきたいところ。

Studioには画像を自動でWebP形式に変換してくれるという仕組みがありますが、画像によっては変換されないこともあるらしく、どんな画像を使っても確実に軽くなるわけではありません。

なので、自分でも画像を表示したいサイズに合わせて対策しておくと安心です。

具体的には400 × 500pxで表示したい画像なら、2倍の800 × 1000px程度で作っておくと、画質と軽さのバランスが取れます。

さらに軽くしたい場合は、アップロード前に圧縮ツールを通しておくのもおすすめです。

また、画像にはalt属性（代替テキスト）を設定しておくのもおすすめです。

alt属性は、画像が何を表しているかを説明する文章で、検索エンジンに画像の内容を伝えたり、音声読み上げに対応したりする役割があります。

SEOやアクセシビリティの観点でもプラスになるので、サイトに配置する画像は全て設定しておきましょう。

Studioでの画像の扱い方の基本として、使える形式・追加方法・軽くするコツについてまとめました。

綺麗だからという理由でJPGの綺麗な写真をサイトに配置しているせいでサイト全体の表示速度が落ちるといったこともあるので、画像の知識は身につけておいて損はありません。

代替テキストの設定なども、最初は忘れてしまったり、面倒に感じたりするかもしれませんが、小さくても重要なことなので、しっかりと理解して画像を正しく配置できるようになっておきましょう。