生きやすい人を増やすための働き方のブログ

WordPressのおすすめの画像サイズとアップロード前後の手順

  • 2020年12月5日
  • 2020年12月5日
  • WordPress

こんにちは、ミスターパインです。

一眼レフで撮った写真をフルサイズでアップし続けた前科があります。

この記事では

  1. 当ブログでアップしている画像サイズ
  2. アップロード前にやっていること
  3. アップロード後にやっていること

を紹介します。

[chat face=”mr-pine-maru.png” name=”パインくん” align=”left” border=”yellow” bg=”yellow”] 容量の大きすぎる画像をアップしまくっているとサーバーに負担がかかるので早めに対策しましょう [/chat]

ワードプレスのおすすめ画像サイズ

まずは画像のサイズについて紹介します。

当サイトの画像サイズ

当サイトでは基本的には以下のサイズで収まるように画像をアップしています。

  • 横800×縦600ピクセル以内の
  • JPEG画像

画像によっては800ピクセル以上になる場合もありますが、その辺は臨機応変に対応しています。

おすすめの画像サイズ

厳密に「このサイズがベスト」と言うものはありません。

  • 横600〜1280ピクセル程度
  • 縦450〜800ピクセル程度

に収まっていればいいかなってのが個人的な感想です。

あまり神経質にならず参考程度に考えていみてください。

サイズより容量を重要視

もう一つサイズと同じく気を使うのが画像の容量です。

当ブログではどちらかと言うとこちらを重視しています。

画像サイズの詳細画面

WordPressで画像をアップするとメディアライブラリから画像の詳細が確認できます。

例えば上記画像は以前書いた記事のアイキャッチ画像の詳細です。

この画像の容量は30KBで、サイズは760×428ピクセルということがわかります。

当サイトではこのように、画像容量を「なるべく二桁KB」になるようにしています。

この辺も主観たっぷりですが「あんまり超えたくないけど画像によっては100KB前半くらいまでは許容範囲かな」って考えています。

[chat face=”mr-pine-maru.png” name=”パインくん” align=”left” border=”yellow” bg=”yellow”] 神経質になりすぎなくてOK [/chat]

WordPressに画像をアップロードする前にやっていること

ということでここからは大きな画像をアップしないために、アップロード前にやっている具体的な方法について紹介します。

画像のリサイズ

例えばiPhoneで撮影した画像をそのまま使おうとすると横幅が2,000ピクセル超えの大きな画像がアップロードされてしまいます。

そのため、ワードプレスにアップする前に事前にリサイズという作業が必要になっています。

[chat face=”mr-pine-maru.png” name=”パインくん” align=”left” border=”yellow” bg=”yellow”] ぼくのパソコンは使いたい画像を一括ショートカットができるように設定してあります [/chat]

参考記事:Automatorで画像を一括リサイズできるようにしてショートカットキー割り当てたら便利すぎる

参考記事:iOSアプリ「ショートカット」でiPhone上の写真を一括リサイズする方法

画像の圧縮

リサイズした画像をさらに圧縮して容量を減らす作業です。

当ブログでは、画質の落ち過ぎを考慮してJPEG miniというアプリを使っています。

JPEG miniは有料なので、初心者のうちは無料で使えるTiny PNGというサービスを使うのもありです。

  • ネット環境がないと使えない
  • 一度に圧縮できる枚数が20枚まで

という制限がありますので、ブログを頑張るぞ!って覚悟を決めている人は早い段階でJPEG miniを買ってしまうのももちろんあり。

JPEG miniTiny PNG

以上2点がアップロード前にやっていることです。

WordPressに画像をアップした後にやること

画像をアップロードした後にやることは一つだけです。

altタグ(代替テキスト)を設定する

本文内に挿入した画像にaltタグ(代替テキスト)を入力します。

我々人間であれば写真を見れば視覚的に「あ、花の写真だな」などと理解できます。

しかしサイトを巡回しているのはGoogleのロボットです。

文字の認識はできても、画像を視覚的に判断することはできません。

そこで設定するのがaltタグであり、ロボットにも「この画像はどんな意味か?」を理解してもらうことで優しいサイトであることをアピールします。

SEO的にも良いと言われています。

altタグ(代替テキスト)の設定方法

altタグの設定画面

altタグ(代替テキスト)の設定方法は非常に簡単です。

  • メディアライブラリで使用したい画像を選択
  • 「代替テキスト」の項目に記入

これだけです。

理想的な書き方は「キーワードを含めて書く」ですが、意識しすぎると不自然になるので最初は「猫」「コーヒーカップ」「パソコン」など画像の名刺単体でもOK。

ちなみに上記のスクショ画像は「altタグの設定画面」というaltタグを設定しています。

まとめ

ということでこの記事の振り返りです。

  • 画像の横幅は600〜1280ピクセル程度
  • 縦の高さは450〜800ピクセル程度
  • 画像容量は100KB未満に圧縮
  • 画像の圧縮にはJPEG miniかTiny PNGがおすすめ
  • アップした画像にはaltタグを設定する

これが当ブログで行っている画像をアップロードして使用するまでの手順となります。

[chat face=”mr-pine-maru.png” name=”パインくん” align=”left” border=”yellow” bg=”yellow”] 最初はめんどくさく感じるかもしれませんがチリも積もればなので、少しでも軽い画像をアップできるように工夫しています [/chat]