WordPressでサイズの違うアイキャッチ画像をPC用とスマホ用で出し分ける - 魔ッドアングラー
WordPressでサイズの違うアイキャッチ画像をPC用とスマホ用で出し分ける スマホ用にメディアクエリを設定してひと息ついた頃、PageSpeed Insightsを確認してみたら「モバイル」の速度がガタ落ちしていました。記憶では80点くらいあったのに、50点になっていました。 原因は画像。特にアイキャッチに使用している「722 × 234」ピクセルの元画像が大きすぎるようです。 メディアクエリで「max-width: 100%;」にしているだけなので毎回読み込みに時間が掛かっているようです。 PageSpeed Insightsはこれを『横幅 320px にリサイズしろよ』と迫ってきます。 ご丁寧にもリサイズされた画像のダウンロードすらできます。非常に親切です。 しかしそう簡単に置き換えるわけにもいかない、PC用の画面で見ると今度は小さくなってしまうからです。 さらに考えてみれば、この
画像サイズを「サムネイル」「中」「大」「フルサイズ」から選択または任意のサイズを指定する
ブロックエディタでは記事に「画像」ブロックを追加し画像ファイルをアップロードすることで記事に画像を表示することができますが、追加された画像をどのサイズで表示するのかを選択することができます。ここではブロックエディタを使っている場合に記事に追加した画像のサイズを選択する方法および任意のサイズを指定する方法について解説します。 画像のサイズを「サムネイル」「中」「大」「フルサイズ」から選択する 画像サイズの選択方法を確認するため、新しい記事を作成し「画像」ブロックを追加しました。 「アップロード」をクリックして、表示する画像ファイルを選択します。今回は画像サイズが 4800 x 3200 の画像をアップロードしました。 画像を記事のなかでどれくらいの大きさで表示するのかの設定は、サイドバーオプションの中の「画像設定」で行います。 「画像サイズ」の下にあるドロップダウンメニューをクリックすると、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hublog.biz
