AFFINGER5

自分のブログに合った画像サイズの決め方

 

ケント
自分のブログ内の画像サイズが大きすぎるのですが、最低限の大きさにする方法はありますか?

今回は、こんな悩みに答えます。

 

 

ブログ内の画像サイズを適切にするには、少し工夫をするだけでOKです。

 

何もしないと、読み込み速度に影響し、SEO的にも評価が下がってしまいますので。

 

今回の内容

  • 画像サイズを最小限にする方法
  • 画像サイズの確認方法

 

 

画像サイズを最小限にする方法

 

以下の手順で、画像サイズを適切にしていきます。

 

  1. 開発者ツールでサイトの横幅をチェックする
  2. アップロード前に画像を編集する
  3. そのままアップロードする

 

一緒に見ていきましょう。

 

手順①:開発者ツールでサイトの横幅をチェックする

 

まずは、やるべきことがあります。

 

 

記事の編集画面から、右上の「プレビュー」を押します。

 

 

 

記事のどこでもいいので、右クリックをして、上画面のようなメニューを開きます。

 

 

 

「開発者ツールで調査する」を押します。

 

 

 

開発者ツールを開くと、右側にコードがずらりと出てきますが、右画面の左上のマークを押します。

こうすることで、記事の横幅をすぐに確認することができます。

 

 

 

上の画像を参考に、緑色の枠で囲まれた"main"の横幅を覚えておきましょう。

このブログの横幅は、787pxですね。

 

 

手順②:アップロード前に画像を編集する

 

サイトの横幅を確認できたら、実際にサイト内に使う画像を編集していきます。

 

新たなアプリやプラグインは必要ないので、すぐにできますよ。

 

 

 

 

使いたい画像を右クリックして、「編集」を選択します。

画像を3Dペイントなどで加工したい場合は、「加工する」→「編集」の順番でしましょう。

 

 

 

編集の画面を開いたら、上にある「サイズ変更」を押します。

 

 

 

サイズ変更を「パーセント」→「ピクセル」にします。

 

 

 

水平方向の部分に、先ほど確認したサイト横幅の値を入力します。

垂直方向は変えなくても、勝手に変わります。

 

「OK」を押したら、サイズが変わります。

 

 

 

サイズ変更が終わったら、保存していきます。

 

左上の「ファイル」を押して、

 

 

 

「上書き保存」を選択します。

「名前を付けて保存」でもOKです。

 

 

ここまでで、編集と保存は完了です。

 

 

手順③:そのままアップロードする

 

最後は、wordpressで画像を使うために、アップロードしていきます。

 

画像サイズの変更は、ここまでの過程で終えているため、ただアップロードするだけです。

 

一応アップロードの手順も載せておきますね。

 

 

ワードプレスの左側にあるメニューから、「メディア」を選択します。

 

 

 

上に出てくる「新規追加」を押します。

 

 

 

「ファイルの選択」をクリック。

 

 

 

先ほどサイズ変更をした、使いたい画像を選択します。

選択したら「開く」を押しましょう。

 

 

 

「アップロード」でサイズ変更した画像が、記事に使えるようになります。

 

 

画像サイズの確認方法

 

ここまで頑張ってサイズ変更をしたので、どのくらい軽くなっているのか確認してみましょう。

 

 

 

 

 

なにも編集せずにアップロードした画像と、編集済みの画像では、かなりのサイズ縮小ができていきますね。

 

 

-AFFINGER5

© 2021 カレッジ・ルート Powered by AFFINGER5