media-setting_ec

ワードプレス

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

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

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

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

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

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

display-speed_02

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

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

display-speed_03

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

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

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

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

display-speed_02

display-speed_03

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

display-speed_04

「リンク先」の意味

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

media-setting_100

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

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

例えば先ほどのように、

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

 クリックで拡大

media-setting_03

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

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

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

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

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

media-setting_ins

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

A  中サイズで貼って、リンク先を「メディアファイル」にして拡大させる

B  おれはいつだってフルサイズ。リンク先だって「メディアファイル」

C  フルサイズで「メディアファイル」。でも後から幅指定でギリギリまで小さくする

クリックすればオリジナル画像が拡大表示されますし、さらにページ表示速度のことを考えると小さい方がいいことは想像できますね。

でも、画像が小さいと何の画像なのか、内容が伝わらない場合があります。また、特に理由もなく小さすぎるのも記事の見栄えとしてイマイチですよね

最近のWordPressテーマでは、ページ幅を超える大きさの画像をフルサイズで挿入してもきれいに収まってくれることが多いので、画像も大きくて、内容も伝わりやすいですね。

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

実は、フルサイズで挿入した時点で、記事上に貼られているものはどういじってもフルサイズデータなのです。ビジュアルエディタから「カスタムサイズ」で指定しなおしたり、テキストエディタからwidth指定を加えても貼り付けられているデータは変わりません。

挿入後のこれらの指定は “見栄えを縮小” しているだけなんです

じゃあ、どーしたらいいの!?

この答えを明らかにするためには、順序立てて説明していく必要があります。
理解するために必要な知識がいくつかあるからです。(それぞれは単純なこと)

途中、脱線しているように感じるかもしれませんが、この問題の答えにつながっていることだと信じて読み進めてください!



次は、記事に画像を挿入したい時、どのくらいのサイズにしてアップロードすればいいのか?その答えを知るための手段を知りましょう!(⇒NEXT!

1. サイト表示速度改善計画 2. 設定不要プラグインの導入
 display-speed_ec1_283  unveil-lazy-load_ec_283
4. “WEBサイズマスター”へ 5. メディア問題、さようなら。
 browzer-extension_ec_283  simple-image-sizes_ec_283

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

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  2. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体
  3. 仕事に時間をとられ、何もやる気がでない時。がんじがらめ感をスカッ!と解消するモチ…
  4. “知っているつもり”の拡張子、jpg gif png。画…
  5. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…

関連記事

  1. dash_ecmg

    マネジメント

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

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

  2. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点

    TCDテーマからTCDテーマへ!魅了されてしまった。ついに乗り換え…

  3. LightShot-Screenpresso_ec

    WEBデザイン

    辿り着いたキャプチャーツール、LightShotとScreenpresso。その機能比較と併用の魅力…

    併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャ…

  4. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー

    TCDテーマの、実際の使用感。幅広いユーザーニーズに応える『TCD…

  5. tcd-theme-options_ecmg

    ワードプレス

    理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

  6. favicon-generator_ec
スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. improvement-flow_ecmg
  2. theme-change_ecrt
  3. tcd-theme-selection_ecmg
  4. tcd-theme-user-review_ecmg
  5. retina_ecmg
  6. todoist-extension_ecmg
  7. display-speed_ec
  8. todoist_ec
  9. adjust-the-button_ecmg
  10. tcd-mag_ecmg

ピックアップ記事

  1. original-share-button_ecmg
  2. sns-count-cache_ecmg
  3. todoist-advanced_ec
  4. todoist-class_ecrt
  5. todoist-constitution_ec
  6. media-setting_ec
  7. tcd-css-customize_ecmg
  8. reset-button_ecrt
  9. dash_ecmg
  10. widgetoon-js-count-jsoon_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. Screenpresso(スクリーンプレッソ)を使うなら、や…
  2. メディア問題さん、さようなら。画像サイズを気ままに追加するプ…
  3. 【Retinaディスプレイ対応1】Macで綺麗に。Windo…
  4. アップデートで英語化された!?BackWPupをサクッと日本…
  5. ”WEBサイズマスター”へ。Chrome拡張「Page Ru…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…
  4. いつでもどこでも即タスク化。Todoistの便利すぎる拡張機…
  5. 『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテ…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  2. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  3. adjust-the-button_ecmg

    ワードプレス

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

    ワードプレス

    魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MAG】の有効的な活用方…
  5. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
PAGE TOP