画像のサイズを最適化しよう!レッツ、リサイズヽ(*´∀`)ノ

この記事は約7分で読めます。

こんにちわ!ブログ初心者の仏の顔もT.Tですヽ(´▽`)/

[TwitterhotokeT_T  CTime:仏の顔もT.T(仏の顔で検索!)]

「ねぇねぇ奥さん!知ってる??実は、圧縮とリサイズは違うんですよ|゚Д゚)))」

画像圧縮に関する記事をたくさん書いてきましたけど、リサイズ(画像の最適化)に関しての記事を書いてなかったので、書きまーす!

仏くん
仏くん

ホトケ、書きまーす!

親父にもブッダれたことないのに!

アムロ・〇イΣ(゚д゚lll)!?

初心者難易度は50%

慣れれば簡単♪難しく考えるのはやめましょう!

<こんな人にオススメ>
・画像サイズをそのままアップロードしてる方
・自分のサイトの画像サイズを知らない方
・サイトを軽くしたい方
スポンサーリンク

画像のサイズを最適化する方法

流れとしては

1、自分のサイトのサイズを調べる⇒最適なサイズを知る

2、リサイズする!
  • ブラウザでする
  • WordPressでする
  • プラグインでする

こんな感じです♪

自分のサイトの最大画面サイズを調べる

これは色々な方法がありまして、今回はちょっと難しいけどみんなが使える方法を紹介します。

「検証」というツール(道具)を使います。(開発者用デべロッパーツールと言います)

これならWindowsでもMacでも、利用できます。

Internet Explorer、Microsoft Edge、Chrome、Firefox、Safariなど、様々なブラウザで利用できます。

※Safariの場合は設定が必要となりますので、こちらのサイト↓を参考にして下さい

Safariの開発者用デベロッパーツールの表示と簡単な使い方 | Hep Hep!
Mac用Safariの開発者用デベロッパーツールの表示と簡単な使い方の紹介。初めての人は少し戸惑うかもしれないSafariのデベロッパーツール。iPhoneとつなぐことでiPhoneのWebページのWebインスペクタも開くことができる。

「検証」の使い方

まず、自分のサイトの画面サイズを調べたい部分を開いた状態で右クリックをします。

そうすると「検証/要素を調査/要素の検査」という項目があると思うのでそれをクリック!

<例>
Chrome:検証
FireFox:要素を調査
Internet Explorer(IE)・Edge:要素の検査
※Safariの場合、初期設定ではこれが表示されていません

すると、↓のような画面になりますので、右側のタブにある「Computed」をクリックします。

右側に四角がいくつも重なってるのが表示されます↓

この四角の中心に書いてあるサイズ「横幅×縦幅」が、今指定している画像のサイズになります。

つまり、画像を画面枠いっぱいにしておけば、そのサイトの枠の最大サイズがわかります。

↑の通り、私のサイトは最大横幅が786pxという事がわかりましたヽ(´▽`)/

ちなみに指定してる場所を変えたい場合は一番左の「四角+矢印」のマークを押して、上の画面上で好きな所を押せば、違う場所のサイズを知る事もできます♪

横幅さえわかれば、縦幅は好みで大丈夫ですが、YouTubeやツイキャスなど、最近よく使われている比率は16:9なので、それに合わせて作るのが一番理想的ですね。
参考サイト↓

ちなみに私のサイトは786pxでしたが、わかりにくいので800px×450pxで作っています。

仏くん
仏くん

昔は4:3の比率がスタンダードだったんだけど、テレビのアナログ放送4:3⇒デジタル放送16:9にもなりましたし、今では16:9がスタンダードだよ♪

リサイズする!

色々な方法がありますので、自分に合ったやり方を選びましょう!

ちなみに私は、WordPress上でリサイズやトリミングを行っています。

慣れると簡単だよ♪

ブラウザ上でリサイズする(Bulk resize photos)

Bulk Resize Photos (日本語)
最速のオンライン画像リサイザー。

特徴:無料、早い、簡単、細かい設定可能、JPG/PNGに対応

150枚の画像を60秒でリサイズ!と書いてある通り、とにかく早い!大量にまとめてリサイズしたい人はこれが一番オススメです!

簡単にですが、使い方も説明しておきますヽ(´▽`)/

まず、リサイズしたい画像をドラッグアンドドロップするか、緑色のボタンからファイルを選んで指定します。

そうすると、編集画面に進みます↓

規模:縦横比を変えずに、縮小・拡大します

ファイルサイズ:画像の容量を指定して、それに合うようにリサイズします

正確な寸法:縦・横を自分で自由に設定できます


:横幅を指定し、リサイズします


高さ:縦幅を指定し、リサイズします


最長の辺:縦・横の長い方を基準に指定し、リサイズします

設定したら、スタートリサイズをクリックすれば、勝手にリサイズしてダウンロードまでしてくれます♪

仏くん
仏くん

めっちゃ簡単だし、早い!これが無料なんだからすごいよね!

WordPressでリサイズする(画像編集)

特徴:無料、早い、簡単、拡大はできない、比率は変えられない、同じ画面でトリミングできる

まずは、ダッシュボードのメディア⇒新規追加からリサイズしたい画像をWordPressにアップロードしておこう!

すでにアップロードしてある場合はそのままで問題ないです。

メディアライブラリを開き、画像の下にある「編集」をクリック!(カーソルを合わせると表示されます)

左下に画像を編集のボタンがありますので、さらにそこをクリック!

そうすると画像編集画面になります↓(トリミングなどもここでできます)

赤い〇で囲った、「画像縮尺の変更」でサイズを指定し、縮尺変更で、リサイズできます。

元の縦・横サイズ比率を保ったまま縮小します。
また、拡大はできません。
私の場合は、↑のようにパソコン画面の画像を使って説明する事があるので、個人情報が載ってしまう上の部分はトリミングでカットして、ついでにリサイズして、このブログにあげていますので、これが1番使いやすいです♪
細かいリサイズ設定できませんが、基本的には必要ないですからねー(´∀`)
仏くん
仏くん

WordPress使ってる人はこれが一番わかりやすいかもね!
ただ、拡大や比率を変えられないから気をつけて!

プラグインでリサイズする(Imsanity)

特徴:無料、早い、設定が必要、アップロードしたら自動でリサイズ、アップロード済みの画像を一括リサイズ

色んな種類のプラグインがありますが、一番人気はこれのようです↓

Imsanity
Imsanity automatically resizes huge image uploads. Are contributors uploading huge photos? Tired of manually scaling? Imsanity to the rescue!

インストールして、初期設定をしておけば後は自動でWordPressにアップロードする度、リサイズしてくれます♪

手動がめんどくさい方や、毎回同じサイズに変更する使い方の方にはオススメです!

さらに、WordPressにすでにアップロード済みの画像もまとめてリサイズする事もできますので、すでに大量に画像をアップロードしてる方にもオススメです!

Compress JPEG & PNG imagesでもできる!

ちなみに、前回紹介した圧縮プラグイン↓

Compress JPEG & PNG images
Speed up your website. Optimize your JPEG and PNG images automatically with TinyPNG.

でもリサイズができます!

こちらの場合は、すでにアップロード済みの画像のリサイズはできませんが、これからアップロードする画像の最大サイズを指定できます。

例えば、横幅の最大サイズを1300pxに設定しておけば、横幅2000pxの画像をアップロードしても自動で1300pxに調節してくれます。

リサイズの目的にもよりますが、サイズが大きすぎてサイトが重くなってしまうのを避けたいだけなのであれば、これでも全然、大丈夫だと思いますヽ(´▽`)/♪

仏くん
仏くん

まあ、結局使い分けだよね。普段はプラグイン使ってるけど、細かく指定したい時はブラウザ上でリサイズするとか!

色んな方法がある事を知っておく事のが大事だよね♪

まとめ

  1. 画像のサイズを最適化する方法
  2. 自分のサイトの最大画面サイズを調べる
    1. 「検証」の使い方
  3. リサイズする!
    1. ブラウザ上でリサイズする(Bulk resize photos)
    2. WordPressでリサイズする(画像編集)
    3. プラグインでリサイズする(Imsanity)
      1. Compress JPEG & PNG imagesでもできる!

 

自分に合ったやり方を選んで見てね♪

どれも操作はけっこう簡単だから、一度やってみれば覚えられると思うよ(*゚▽゚*)

とりあえず、やってみる!それが大事だよヽ(´▽`)/♪

仏くん
仏くん

よし、じゃあ私もとりあえず、お腹周りをリサイズしてもらおうかな♪

そ、それは自分でエクササイズでもしてΣ(゚д゚lll)!

コメント

タイトルとURLをコピーしました