ワードプレス(WordPress) 3 日目にして早くも壁にぶち当たりました。
それはアイキャッチで設定する画像のサイズ。
この画像は「新着」や「関連記事」の一覧に一緒に表示されます。
(ちなみに JIN という有料のテーマを使用しています)
ただ記事内のアイキャッチ画像と違い見た目は小さいので、当然リサイズされたサムネイル画像だと思っていました。
しかし、外出先のスマホから 4G(LTE)の回線で閲覧してみると画像の展開が明らかに遅い・・・。
そう、表示サイズが縮小されているだけの画像だったのです。
今回はその問題の一時的な対処法について紹介します。
アイキャッチ画像が使われる場所
冒頭でも書いた通り、アイキャッチ画像はあらゆる場面で使用されます。
記事の上部
記事の一覧
OGPの画像(og:image)
OGPの設定を最優先した理由
私は og:image で利用されるなら、ある程度大きい画像がいいと思い 1920x1080px くらいの画像をアップしていました。
綺麗なベース画像に記事タイトルを載せただけのシンプルなものですが、1MB 前後の容量がありました。
OGP の設定はこの画像が使われるとして、記事内や記事一覧の画像はそれぞれの大きさにリサイズされ別画像で保存されるだろうと思い込んでいたのです。
実際、「メディアを追加」から画像をアップロードする時は、その画像の扱いについて細かな設定ができます。
しかし、アイキャッチ画像にはそんな設定がありませんでした・・・。
各SNSで推奨されている画像サイズ
私がスマホのメディアの仕事をしていたのは今から 4 年ほど前のこと。
この頃、Facebook の共有用には 1200px くらいの画像を使っていた記憶があったのです。
さて、あれからインスタや Youtube のブームを経て最近はどんな状況なのでしょうか。
このサイトの説明では、「OGP設定の注意点」の項目に Facebook と Twitter について言及しています。
どうやら、推奨ではなく最小サイズというものもあるようで、見る限り 600x600px くらいの画像でも良さそう。
意外にシェア用の画像サイズについては最小のサイズがそれほど大きくなくてもいい様子。
Twitter は特に最小サイズが小さめの設定なので、こちらも 600x600px もあれば十分すぎる。
(理想は 16:9 の比率で真ん中切り取られても綺麗に見える画像)
そして、こちらは 2 年近く前の記事ですが Twitter についてはこの頃から最小サイズは変わっていない様子。
サイズが大きくなくてもいい
それほど大きな画像を設定しなくてもいいよねという考えにこの時点で傾き始めます。
SNS のシェア画像よりもサイトの見栄えや記事の見やすさが重要です。
ただ、メディアでアップした画像についても表示サイズ指定はしない方が無難です。
width属性とheight属性は指定しない
alt属性に画像の説明を入れる
style属性に「max-width: 100%」を設定
画像の情報を調べる
そこで、まずは大きな容量のアイキャッチ画像を回避すべく、300KB くらいの画像をアップロードします。
そして、これを 1 つの記事に設定します。
この記事について、ワードプレスのデータベースの中身を見てみましょう。
ワードプレスについては無知なのですが、テーブル構造を見て想像して対応する作戦です。
ザッと調べた結果、以下のテーブルに該当の情報が存在します。
記事データ：wp_posts
画像紐付けデータ：wp_postmeta
先ほど容量の少ないアイキャッチ画像を設定した記事の投稿 ID を確認します。
(投稿画面に表示されているパーマリンクの数値)
そして、その ID を元に画像データを探っていくことにします。
画像IDの特定
wp_postmeta を「投稿ID」で検索します。
今回は、Xserver の phpMyAdmin を利用します。
実際に実行された SQL だと以下になります。
SELECT * FROM wp_postmeta WHERE post_id = 610
この結果が以下の通りで、「_thumbnail_id」の項目が該当してそうです。
そして使われている画像の番号が「600」ということになります。
一括で小さな画像に変換する
今回は急ぎなので、この「600」の画像 ID にすべての記事のアイキャッチ画像を統一します。
本来なら、せめてカテゴリ別に画像を分けたいところですが緊急時は仕方ありません。
せっかく、「@soramemo777」さんに「canva」という画像作成サイトを教えてもらって、画像を 1 記事ずつ作ってたのになぁ・・・。
では、ここまでの 100 記事ちょっとのアイキャッチ画像を一括更新します。
SQL で以下を実行。
UPDATE wp_postmeta SET meta_value = 600 WHERE meta_key = ‘_thumbnail_id’
おかげで、すべての記事がネコちゃんになりました(笑)
どうしてもカテゴリ別に画像を変更したい場合は、wp_terms テーブルがカテゴリを管理しているので、その term_id を wp_term_relationships テーブルの term_taxonomy_id に当て込んで一気にアップデートします。
UPDATE wp_postmeta SET meta_value= [画像ID] WHERE post_id IN
(SELECT DISTINCT object_id FROM wp_term_relationships WHERE term_taxonomy_id = [カテゴリID]) AND meta_key = ‘_thumbnail_id’
複数カテゴリに紐着く記事もあると思いますが、そこまで考慮すると一括は辛いので運用にあわせて使ってください。
まとめ
ここまで、以下のことを紹介してきました。
アイキャッチに容量の大きな画像はタブー
OGPの画像サイズはそれほど気にするな
理想としては 100KB 以下で見やすいアイキャッチ画像を作れるように canva にアップロードするベース画像に気を付けたいところですね。
