WordPressで使用する画像と設定方法

WordPressでWebサイトを制作する際に使用する画像について、種類やサイズ、設定方法を初心者の方向けに紹介します。

画像アップ時に注意すべきポイントや設定したほうがいい項目をまとめて解説します。

Webサイトに最適な画像を準備

画像サイズと容量

Webサイトにアップする画像のサイズに明確な決まりはありません。

大きい画像を小さい画面で見ても問題ないので画像サイズはなるべく大きく、表示スピードが速くなるようファイル容量はなるべく小さいファイルが理想です。

モバイルで見ることを考えると、画像の配置はなるべく横幅いっぱいがおすすめです。

いろいろ調べてみた結果、本サイトでは 画像サイズ 1600×900px、ファイル容量 200kb以下を基本にしたいと思います。

トータルのページ容量は1.6MB以内に収めることをGoogleが推奨しています

ファイル形式

ファイル形式は、基本的に次のように使い分けます。

• JPG：写真、グラデーションを含むイラスト
• PNG：色数の少ないイラスト

サイズ変更と形式変換

Macで操作する方法を紹介します。

画像サイズが大きい場合、1600pxに縮小します。

複数ファイルを選択して、右ボタン＞開く で、プレビューを開きます。

⌘＋aで全てのファイルを選択した状態で、ツール＞サイズを調整 でサイズを変更します。

ファイル形式が「.HEIC」形式の場合、「.JPG」形式に変換します。

⌘＋a で、全てのファイルを選択した状態で、ファイル＞選択中のイメージを書き出すを選択します。

オプションを表示で、フォーマットがJPEGになっていることを確認して書き出します。

画像圧縮とExif情報の削除

Google Squoosh を使って、画像圧縮とExif情報（緯度経度等）の削除を行います。

Webサイトに関する画像を設定

Webサイトに設定する各画像の推奨サイズと設定場所を紹介します。

サイトアイコン（ファビコン）

ブラウザのタブ、ブックマークのアイコン 512×512px（PNG推奨）

WordPressメニュー：外観＞カスタマイズ＞WordPress設定＞サイト基本情報＞サイトアイコンを設定

ヘッダーロゴ

ヘッダーに表示されるサイトタイトル画像 1600×360px

WordPressメニュー：外観＞カスタマイズ＞ヘッダー

メインビジュアル

トップページ上部に表示される画像・動画 1600×900px（複数設定する場合は、1600×600px）

WordPressメニュー：外観＞カスタマイズ＞トップページ＞メインビジュアル

コンテンツヘッダー

固定ページ等の記事タイトル背景画像 1600×900px

WordPressメニュー：サイト全体設定＞コンテンツヘッダー（SWELL公式マニュアル）

OGP画像

アイキャッチ画像未設定時に使用するSNSシェア画像 1600×900px

画像中央の630×630のエリアにテキストなどの重要な要素が入るように

チェックツール（OGPシミュレータ　アイキャッチ画像サイズチェッカー）

WordPressメニュー：SEO PACK＞OGP設定

NO IMAGE画像

サムネイル、アイキャッチ等が未設定時に使用される画像 1600×900px

WordPressメニュー：外観＞カスタマイズ＞サイト全体設定＞NO IMAGE画像（SWELL公式マニュアル）

プロフィール画像

プロフィール背景画像　1600×600px

プロフィールアイコン画像　150×150px

WordPressメニュー：外観＞ウィジェットで、表示したいエリアに[SWELL]プロフィールをドラッグ＆ドロップし設定（SWELL公式マニュアル）

記事に設定する画像

アイキャッチ画像

記事トップ、サムネイル、SNSシェアで使用される画像 1600×900px

記事作成時の投稿パネルで設定

画像アップ時に設定する情報

代替テキスト

画像が表示できない場合に表示されるテキスト　SEO的にも重要なので必ず設定

タイトル

画像のタイトル　デフォルト：ファイル名　カーソルを合わせると表示されることも

キャプション

画像の下に表示される画像の説明文　必要な場合、設定

説明

メディアライブラリ内の管理・検索用　必要な場合、設定