ローディング中

wordpressでサムネイルを出力する際の注意点(wordpreesテーマ作成をする方向け)

目次

wordpressでサムネイルを出力する際の注意点(wordpreesテーマ作成をする方向け)

画像が重い! 困った!

wordpressで最新記事や人気の記事をサムネイル付きで表示したいことってよくありますよね。

その際に画像の大きさの設定を間違うと画像が重たすぎてページ速度に影響を与えてしまっていることがあります。

例えばこんな感じに…

スクリーンショット 2016-06-14 15.29.29

測定はこのサイトで行っています。 → gtmetrix

PCサイトならともかく、回線容量の限られている携帯端末で大量の画像を読みこまされてしまってはたまったものではありません。

これは、サムネイルのサイズが画像をアップロード時のサイズのままになっているからですね。

サムネイルのサイズは大きくても縦横300px(画像サイズは100Kくらい)もあれば十分ですから、1000px2000pxなんていう大きなサイズを使う必要はありません。

サムネイルのサイズ指定はこんな感じです。

弊社のブログ一覧だとこれくらいのスコアになります。

スクリーンショット 2016-06-14 14.45.33

画像の多いページとしてはそこそこ速くなっているのではないでしょうか。

ページサイズもかなり少なく抑えられていますね。

実はwordpressはアップロード時に複数の画像を自動生成してくれている

wordpressはアップロード時に4つのサイズの画像を保存してくれています。

  • ‘thumbnail’ サムネイル用
  • ‘medium’  中サイズ
  • ‘large’  大サイズ
  • ‘full’ 元の画像サイズ

指定方法一覧は以下の通りです。

公式ドキュメント

その他に縦横比を変えたい場合もあるかと思いますが、そこはまた次回。

弊社ではサーバーをhttp/2に対応させたり、nginxのキャッシュ機能を利用したり、gulp等のタスクランナーを積極的に活用することでページの高速化に務めています。

wordpress高速化についても近いうちに書きます!

※2016/09/24 書きました!

自社サイトを高速化してみた(nginx + wordpress on gtmetrix)

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.