ブログ・ライター

画像の最適化! 画像を簡単にリサイズ&圧縮する方法

画像、圧縮、サイズ

使用する画像のせいでページが重くならないか心配。。。

画質は綺麗なままで容量だけ小さくしたい!

新たなソフト等は使用せずに画像リサイズの簡単な方法を知りたい!

分かります!画像のリサイズや圧縮って面倒ですよね。。。
この記事では、簡単な画像リサイズと圧縮の方法をご紹介します。

こんな疑問を解決します!

  • どうやったら画像を簡単にリサイズ&圧縮できるの?
  • そもそもリサイズと圧縮の違いは何?

※管理人はMacを使用しています。

リサイズと圧縮の違い

  • リサイズとは…画像の横×縦のサイズ(ピクセル)を変えること
  • 圧縮とは…見た目が変わらないように容量を小さく変えること

おすすめのやり方は、まずリサイズして、仕上げに圧縮をする方法。

まず、表示させたい大きさ(ピクセル)を決めて、リサイズすることで、ある程度容量は小さくなりますが、それでもまだちょっと大きいなという場合は、仕上げに圧縮をしています。

それでは、それぞれのやり方を順番に紹介していきます。

リサイズの方法

①まず画像をプレビューで表示させる(既存の機能)

画像、プレビュー、リサイズ

リサイズしたい画像をクリックして開きましょう。

(プレビューという既存の機能が起動して開きます。)

②ツールバー → サイズを調整 をクリック

画像、リサイズ
画像、リサイズ

上記の調整画面が出てくるので、ここでコントロールできます!

調整後のサイズも下に出てるので、わかりやすいですね!

単位はピクセルを選ぶとイメージしやすい。

【リサイズのポイント】ブログの横幅に合わせよう!

私は、アイキャッチ含め使用画像は、横幅1200(px)でサイズを統一しています。

Googleは横幅1,200(px)以上を推奨していると言われてます。

どんなブログテーマでも1,000~1,200(px)だと大体対応できると言われています。

いずれ別のテーマに変更する可能性もゼロではないので、大きめのpxにしておくと安心です。(大きいものは自動調整してくれます。)

このブログの記事部分の横幅は780(px)なので、それより横幅の小さい画像は貼らないように注意してます。
※横幅はブログテーマや設定による。

wordpressが自動調整してくれるなら、全部大きめの貼っておけばいいじゃん!と思いがちですが、無駄に容量が大きいとその分読み込みに時間がかかったりして、読者が離脱する原因にもなります。

できるかぎり、最適化した画像を使用したいですね!

圧縮の方法

リサイズして縦幅のピクセルを調整して、それでもまだファイルサイズの容量が大きい場合は、圧縮しましょう。

①まず画像をプレビューで開いて、ファイル→書き出す をクリック!

圧縮方法、画像

②圧縮後のサイズ感を指定する

圧縮、画像

上記の”品質”の項目をコントロールすることで、ファイルサイズが変わる。
品質を決めたら、保存を押下。

目標としては、1枚につき、50kb~200kbくらいの画像にしよう!

きれいな景色など色彩が豊かな写真は、100kbを下回ると、画質が荒いのが目立ちますね。

まとめ

覚えてしまえば簡単なのに、億劫に感じてしまう画像のリサイズ。。。

しかも、しばらくやってないと、あれ?どうやるんだっけ?って忘れちゃうこともあります(笑)

他にもたくさん画像を小さくする方法はあります。

自分が楽だと感じる方法を見つけておくといいですね。

今回は画像を1枚ずつリサイズする方法を紹介しましたが、まとめて一気にリサイズする方法もあります!
また別記事で紹介しますね♪
読んでくれてありがとうございました。

  • この記事を書いた人

ハナエ

商社で働きながら、Webライターをしています。 転職・働き方・暮らしなどのジャンルを執筆しています。 夫と文鳥と暮らしながら、PC1台で、自由に幸せを追求する働く主婦。合い言葉は「ゆるく楽しく生きやすく」。たまにnote書いてます。

-ブログ・ライター