media-setting_ec

ワードプレス

知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケンな関係

ひとつの画像をWordPressにアップロードする度に、他のサイズの画像が同時に、自動生成されているって知ってました?つまり・・知らぬ間に、勝手に作られている画像があるんです。

ちゃんと知っておかないと後で大変なことに・・・なるかもしれません。

記事作成時に使う「メディアの追加」画面。その設定方法とあわせて知っておきましょう。

スポンサーリンク

自動生成された画像はどこで使われる?

オリジナルサイズ以外に、自動でどんなサイズが作られているかは、WordPress管理画面内「設定」→「メディア」で確認することが出来ます。

クリックで拡大

display-speed_02

デフォルトでは「サムネイルのサイズ」「中サイズ」「大サイズ」がそれぞれ設定されています。実は、画像をひとつだけアップロードしたつもりでも、追加でこの3種類のサイズの画像が作られているわけなんです。

このサイズの数字、どこかで見かけた気がしませんか?
そう、記事作成時の「メディアの追加」画面です。

 「メディアの追加」画面

display-speed_03

「サイズ」に現れる選択肢

media-setting-ins1

例えばこの場合、アップロードした画像サイズは幅×高さが「1100×430」でした。
「サイズ」のプルダウンを覗くと、先ほどの「サムネイル」「中サイズ」「大サイズ」が追加選択肢として現れています。

これは、「幅の上限」で指定されていたサイズを超えたので、いずれも幅を上限値に合わせ、それを基準に、高さがリサイズされている状態なんです。(※縦横比を維持するため)

「サムネイル」「中サイズ」「大サイズ」の幅が、全て指定されていた上限値になっていることが確認できますね。

クリックで拡大

display-speed_02

display-speed_03

「サムネイル」の選択肢だけ、高さも150pxになっているのは、設定画面で「サムネイルを実寸法にトリミングする」にチェックが入っているためです。

media-setting_101

ちなみに、幅も高さも上限値を満たしていないサイズの画像は自動生成されず、選択肢にも表示されません。例えばアップロード画像が「110×110」の場合、ここでは「フルサイズ」しか表示されないことになります。

display-speed_04

スポンサーリンク

「リンク先」の意味

同じく「メディアを追加」画面での「リンク先」についても再確認しておきましょう。
プルダウンを覗くと、「メディアファイル」「添付ファイルのページ」「カスタムURL」「なし」が選択肢として現れます。

media-setting_100

頻繁に使用するのは「メディアファイル」と「なし」ですね。
画像をクリックすると拡大表示させることができる「メディアファイル」、そのまま貼り付けてあるだけの状態にする「なし」、という認識で大丈夫です。

 なお、「メディアファイル」を選択して ”その画面内で、ポップアップで” 拡大表示させるには、別途プラグインが必要になります。プラグインの種類も豊富ですが、私が利用しているのは『Easy FancyBox』です。

関連記事

例えば先ほどのように、

記事内では下のように表示され、クリックするとオリジナル画像が表示されます。
つまり、”拡大”されます。

クリックで拡大

media-setting_03

ここで、改めて知っておきたいこと

上の画像は「中サイズ(幅300px)」を選択しました。この画像はアップロードしたオリジナル画像ではなく、別途、自動生成されたものでしたね。ということは・・・

記事上に貼られている画像は、オリジナルよりずっと軽い画像

ということ。これはページ表示速度にも関係してくることなので、覚えておきたい知識です。

スポンサーリンク

【問題】ベストな画像挿入方法を答えなさい。

media-setting_ins

あなたは今「1100×430」サイズの画像が手元にいくつもあり、全て記事内に挿入したいと思っています。『幅が1100pxって、ちょっと大き過ぎるのかな、、』とはなんとなく思いつつも、その画像たちの中にある、細かい部分の説明をしたい。あなたなら、どうしますか?

この設定なら、クリックすればオリジナル画像が拡大表示されますし、さらにページ表示速度のことを考えても小さい画像を貼り付けた方がいいことは想像できますね。

そう、クリックすれば分かるものの・・・貼り付けてある画像が小さいと、「そもそもなんの画像なのか?」内容が伝わらない場合がありますまた、特に理由もなく小さすぎる画像が貼られているのも、記事の見栄えとしてイマイチですよね

最近のWordPressテーマでは、ページ幅を超える大きさの画像をフルサイズで挿入しても、きれいに収まってくれることが多いです。だから貼り付けた画像も最大限の大きさで見えるので、その内容も伝わりやすいでしょう。

でも、きれいに収まってはいるものの、画像自体はフルサイズのデータなので、ページの表示は重くなるんです

実は、フルサイズで挿入した時点で、その後どう編集したとしても、その画像はフルサイズのデータ量を持っています

ビジュアルモードから「カスタムサイズ」で指定しなおしたり、テキストモードからwidth指定を加えても、”貼り付けられているデータ自体”は変わりません。

つまり、挿入後のこれらの指定は、「見栄えを縮小しているだけ」なんです

・・・期待させてスミマセン。一言で答えるのは難しいのです。理解するために必要な知識がいくつかあるので、順序立てて説明していく必要があります。(それぞれは単純なこと)

途中、脱線しているように感じるかもしれませんが、この問題の答えにつながっていることだと信じて読み進めてください。そして何より、WordPressサイトを運営するなら、必ず、できるだけ早いうちに知っておきたいことです



次は、記事に画像を挿入したい時、どのくらいのサイズにしてアップロードすればいいのか?その答えを知るために、無料で活用できるブラウザ拡張ツールを紹介します。まずは自分のサイトの特徴を知っておきましょう。WordPress画像の扱いが分かってくるはずです。

知っておきたい拡張機能

関連記事

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方…
  2. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  4. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  5. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…

関連記事

  1. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!BackWPupプラグインで自動保存のタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

  2. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  3. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな簡単さ。小見出しのデザインを美しくしたい?ああ、例え…

  4. tcd-mag_ecmg-ps
  5. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方

    記事を見栄えよく、伝わりやすく。ブログ記事を書き始めると、分からな…

  6. dash_ecmg

    マネジメント

    あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方法と使い方

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. adjust-the-button_ecmg
  2. tcd-theme-user-review_ecmg
  3. extension-tools-for-bloggers_ec
  4. improvement-flow_ecmg
  5. theme-change_ecrt
  6. tcd-mag_ecmg-ps

タスク管理で、自己管理。

todoist

人気記事

  1. chrome-font_ecmg-1
  2. compress-jpeg-png-images-ecmg
  3. screenpresso-initial-setting_ec
  4. child-theme_ecmg
  5. todoist-basic_ec-ps
  6. child-theme-mechanism_ecmg-ps

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. annotation-image-ecmg
  2. todoist-advanced_ec
  3. simple-image-sizes_ec-ps
  4. chrome-full-screen-capture-ecmg
  5. quicktag_ecmg
  6. jpg-gif-png_ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. mailbox-goodbye-newapp_ec
  2. todoist-design_ec
  3. screenpresso-initial-setting_ec
  4. retina-text-widget-ecmg
  5. unroll-me_ec
  6. retina-os-solution_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. compress-jpeg-png-images-ecmg
  2. chrome-full-screen-capture-ecmg
  3. phrase-express_ecmg
  4. like-button-card_ecmg-ps
  5. facebook-fast-display_ecmg
  6. spark-tutorial-ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. improvement-flow_ecmg
  2. tcd-theme-user-review_ecmg
  3. todoist-extension_ecmg
  4. extension-tools-for-bloggers_ec
  5. tcd-mag_ecmg-ps
  6. todoist-tips_ecmg

人気記事

  1. child-theme_ecmg
  2. media-setting_ec
  3. chrome-full-screen-capture-ecmg
  4. jpg-gif-png_ecmg
  5. compress-jpeg-png-images-ecmg
  6. screenpresso-initial-setting_ec
  7. todoist-basic_ec-ps

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  3. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  5. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
PAGE TOP