あれっ、私のブログ重い? WordPressのメディア設定で画像を最適化

WordPress

こんにちは、るこです。

WordPressでブログを始めるとき「メディア設定」ってしっかりやってますか?
何も設定しないと、画像をアップロードしたときに元画像 + 下記の3サイズの画像が出来ちゃうんです。

  • サムネイルのサイズ:150×150
  • 中サイズ:300×300
  • 大サイズ:1024×1024

media-setting_02さらに、テーマにあわせて生成されるサムネイルがあったり、気がついたときには「upload」フォルダの中身がすごいことに! なんてことも。

←プチグラのuploadフォルダの中身です(笑)

すると、「ゴミファイルが増える」「重くなる」などの不具合がでてきます。

スポンサーリンク

メディア設定を怠ると、どうして重くなるの?

テーマの幅より大きな画像を記事に貼り付けると、記事が無駄に重くなっちゃうんです!
どうしてかというと……。

幅1000の画像が200kbあったとします。
幅780の画像は150kbだったとします。

記事の幅は780。
すると元々は幅1000ある画像を780pxに合わせてリサイズされます。

どっちでも見栄えは同じ。なら別にいっか?

ノンノン!
表示される画像の幅は同じなのに、ファイルが「50kb」も重い!
50kb分、ページを読み込むスピードが遅くなってるんです。

きゃ〜〜〜!!!

ナイスなメディア設定はこちら!

blanc note.をお使いの場合は、このように設定していただくと、無駄画像が発生しなくなります。

media-setting_01
  • サムネイル:300×300
  • 中サイズ:375×500
  • 大サイズ:780×1040

サムネイルは、一覧で表示する際に出てくる画像のサイズに合わせる

blanc note.では、一覧表示のサムネイルは250x250pxで表示されています。
余裕を持たせて300×300の画像をサムネイルに使っています。

サムネイルのサイズ:幅の上限300x高さの上限300に設定。

中サイズは、回り込みして使う画像に合わせる

中サイズの記事を使う場面って、なにげに少ないと思います。
「パソコンで見たときに、文章の左や右に回りこむ画像」
以外には必要ではないんじゃ……。と考えています。

blanc note.の場合、記事の最大幅が780px。
回り込みする場合は、半分程度のサイズだと美しく見えます。

780/2=390なので390!

と言いたいところですが、画像と本文の間に余白を取らないとくっついてしまいます。

そこで、中サイズは
780/2-15(余白)=375で設定します。
中サイズ:幅の上限375x高さの上限500に設定。

大サイズは記事の最大幅に合わせる

ブログ記事の場合、画像を一番大きく使うのはどんな場面でしょう?
目を引きたいときに記事の「最大幅」で表示するときではないでしょうか。

blanc note.の記事の最大幅は780px。

大サイズ:幅の上限780x高さの上限1040に設定。

サイズを設定しておくと記事への画像挿入もラクチン

media-setting_03

記事を挿入するときに、よく使うサイズをダイレクトに選べるように。

回り込みさせたい画像が大きくて、挿入したあとにちまちま調整……。

なんてこともなくなりますよ〜。

おわりに

「私のブログ重いかも……」とお思いでしたら、
一度、メディアの設定を見直してみるといいかもしれません。

それでは〜!

スポンサーリンク

メルマガはじめました

WordPressでのブログ運営に興味のあるあなたへ♡

プチマガでは、井戸端会議のおばさん風味の軽〜いノリで、
「今週のblanc note.(WordPress無料テーマblanc noteのアップデート情報)」
「\これであなたも耳年増/ブログよもやまばなし」
「メルマガっておいしいの?」
など、ゆる〜〜く発信しています。

メンバー特典 blanc note.のテンプレートも鋭意開発中。 ほぼ週1配信です〜。

ご登録はこちらから

ご登録はお名前(ハンドルネームOK)とメールアドレスのみ。
フォームへ入力後、仮登録のメールが届きます。
メール内の「リンク」をクリックすると登録完了です。
フリーランスママデザイナー るこ

コンピューターは道具だよ。息を吸うみたいに、手足のように、使っちゃおう!
幼少期から自分自身が目立つことが苦手で「写真を撮られると魂が抜ける〜!」と、逃げ回ってました。
そんなこんなで、ただいま、顔を出さずにどこまで信頼度を得られるか、実験中です!
あっ、作品が目立つのは大歓迎!(笑)

WordPress

この記事がお気に召したら……

最新情報をお届けします