ツイートするシェアするピンするブクマするあとで読むLINEで送るWordPressで画像を貼り付けたり、the_post_thumbnailとかで画像を取得したりすると、自動設定されているsrcset属性。WordPress4.4からレスポンシブイメージとして実装されたもので、表示されるサイズに合わせて画像を調整してくれるとても便利なものです。(300px以上の場合)記事中に貼り付ける画像については、とても便利なのでそのままsrcset属性をありがたく使用させていただいているのですが、サムネイル画像を使う部分(当サイトのサムネイルは幅400px)には、srcset属性を使わなくてもいいんじゃないかと思いました。そんなことを思ったかというと、スマートフォンで当サイトを表示した時、記事のヘッダー部分にアイキャッチを丸い部分とその背景で表示させており、この部分をテンプレートタグthe_post_thumbnailで取得するとsrcset属性も出力しているのですが、表示までに下図のように若干タイムラグが発生していました。画像とはいえ、ファーストビューなので、できるだけ早く表示したいと考え、この部分はサイズを抑えたthumbnailサイズの画像のみを読み込ませたら、少しでも表示が早くなるかなと妄想し、srcset属性を使わない読み込み方法を試してみました。画像を取得するコードこれまで、the_post_thumbnailを利用して画像を取得していましたが、下記のコードを使い画像を取得するように変更しました。最後の行の<img>タグ内をカスタムすれば自分の思い通りの<img>タグが出力できます。上記コードで画像を取得すると、以下のような<img>タグが出力されるかと思います。まとめもしかすると、自分の環境(iPhone)だけかもしれませんが、上記のコードで画像を取得する方法に変更すると、画像表示までのタイムラグが少なくなりました。今回当サイトでこの変更を行った箇所は、Homeの記事一覧のサムネイル、各アーカイブ一覧のサムネイル、記事と固定ページヘッダー部分の画像です。自分的には今のところこの変更を行った結果表示が早くなったのでしばらく様子を見ていきたいなと思います。Yamamoto広島県広島市育ち、現在岡山でWeb制作の仕事をしています。「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。他にもこんなおすすめ記事がありますPREV「font-family」で游ゴシックを指定したWordPressサイトをWindowsのChromeで表示すると、フォントが細く見える場合の...NEXTWordPressのテーマのJavaScript読み込みをfunctions.phpで制御する方法コメントはこちらコメントをキャンセルコメント名前メールアドレス次回コメントで使用するためブラウザに自分の名前、メールアドレスを保存する。JunJunWeb.Net。