こんにちは、WordPress絶賛勉強中のなおやです。
画像のサイズを変更したいけど、どのやり方がいいのかわからないと思っている方は結構いるのではないでしょうか？この記事では無料で、簡単に、安心して画像のリサイズを行う方法を説明していきます。
WindowsでもMacでもできる方法を紹介するので、ぜひ最後までご覧ください。
目次
画像のリサイズとは
まず前提確認をします。リサイズとは、
画像や画面の表示要素などを拡大・縮小して大きさを変更すること。
出典：IT用語辞典 ｜ リサイズ
と記載されています。
もっと噛み砕くと、単純に「大きさ」を変更するということです。画像の「大きさ」にはどんなものがあるでしょうか？
- 面積的な大きさ（大きい画像、小さい画像）
- 容量的な大きさ（重たい画像、軽い画像）
上記の２つがあります。今回は上記の２つのやり方をWindows、Macに分けてそれぞれ解説していきます。
面積的な大きさを変更する場合 （拡大、縮小）
Windowsの場合
ペイントを使用します。ペイントへ進む順序は「スタート」→「アクセサリ」→「ペイント」で開きます。
ペイントを開くことができたら「開く」を押し、サイズを変更したい画像を出します。
サイズを変更するにはメニュバーの中にある「サイズを変更」を選択します。そうすると次の画面が開きます。
ここで寸法の変更ができます。絶対に忘れてはいけないのは縦横比を維持するにチェックを入れることです。これを忘れると画像が歪んだり、ぼやけることがあります。
下にあるOKをクリックし、「名前をつけて保存」を押します。これで面積的なリサイズの完成です。
Macの場合
Macに標準で内臓されているアプリである「プレビュー.app」を使っていきます。サイズを変更したい画像のクリックして拡大させます。
右上にプレビューと出ればプレビュー.appで開いているという意味になります。その中の「ツール」→「サイズを調整」をクリックします。
下記の赤枠内の要素を変えたいサイズに変更させ,OKを押せば完了です。
サイズが変更できました！
容量的な大きさを変更する場合 （重たい、軽い）
次に容量的な大きさを変更したい場合を見ていきます。ブログに画像を貼りたいけど、画像が重すぎて貼れないから軽くしたい。サイトの読み込みが遅いから画像を軽くして、読み込みスピードを早くしたい。こんな場面で必要になるかと思います。
SEOの観点からしても、読み込みのスピードというのはとても大切です。この記事では重たい画像から軽い画像にすることに特化してお伝えしていきます。
画像の形式確認
画像の容量的な大きさを変更する手順を見ていく前に画像の形式を確認しておきます。主に２つの形式があります。
- PNG画像
- JPEG画像
これらのそれぞれの特徴を見ていきましょう！
PNG画像 （読み方：ピンまたはピング）
- 保存を繰り返しても劣化が少ない
- 写真を保存すると容量がものすごく大きくなる
- 色が少ないロゴやイラストに向いている
- 保存形式 「画像の名前.png」
JPEG画像 （読み方：ジェイペグ）
- JPEG形式で保存を繰り返すと画質が劣化していく
- 写真を保存しても容量が小さい
- 写真を保存するのに向いている
- 保存形式 「画像の名前.jpg」
まとめると本文内で使っている写真はJPEG形式に変更するだけで容量が軽くなるということです。PNG画像はアイコンやイラストのみに使えば画像の軽量化が可能です。それではWindowsとMacに分けて見ていきましょう！
Windowsの場合
Windowsの場合は再度ペイントを使用します。PNG画像で保存したり、JPEG画像で保存したりすることができます。「名前をつけて保存」を押すと下記のような選択が出てきます。
そこでPNGかJPEGどちらの形式で保存するかを選べます。JPEGを選択すれば容量はPNGよりも下がり、結果的に画像の軽量化に繋がることになります。
半分どころではない圧縮率です。Windowsの場合はこのような形で軽量化していきます。
Macの場合
Macの場合も前回同様にプレビュー.appを使っていきます。変更したい画像を開きます。「ファイル」→「書き出す」をクリックします。
そうすると次のようなWindowが出てきます。
ここのフォーマットの部分をクリックすると保存形式が選べるようになります。
比較して見てみると
上記の通りサイズを下げることができました。
オススメの圧縮サービス
JPEG mini Lite
画像はMac版のものですがWindows版もあります。
特徴
- 元のJPEGの画質を維持しながらもっと画像を軽量化することができる
- 無料で使える
- １日２０回までの制限がある
- PNGの画像には対応していないので注意です！
＊有料3,500円のJPEG miniというものもあります。こちらは回数の制限がありません。
やり方は簡単でこちらに軽量化したい画像をドラックアンドドロップしておけばいいのです。そうすると勝手に圧縮が始まります。
ImageOptim (Macのみ)
ImageOptimというサービスです。Macのみの対応となります。
特徴
- 無料で使える
- 枚数制限がない
- PNG,JPEG,GIFの画像形式全てが圧縮可能
無料で使え、枚数の制限がなく、３種類の画像形式が圧縮可能です。Macの方はインストールしておいて損はないでしょう。何も考えずにこのアプリに画像入れることで勝手に圧縮されていきます。
方法としては、アプリを開いてそこにドラックアンドドロップして行けばOK。
デメリット
圧縮に時間がかかる。様々な画像形式に対応し、枚数制限もないので圧縮に時間はかかります。
サイトの読み込みが遅いとSEOに悪影響を及ぼす
サイトの読み込みが遅いとGoogle検索の表示結果に悪影響を及ぼす他ユーザーの離脱率の増加にも繋がります。
この情報見たいな〜と思ってクリックしても読み込みに10秒も20秒もかかっていたら読まれないということです。せっかく記事を書いたのにもったいないですよね。
下記は2018年にGoogleが発表した記事になります。
出展：「Find out how you stack up to new industry benchmarks for mobile page speed」
上記の画像はどういうことかというと
- 表示速度が1秒～3秒まで遅いと直帰率は32%増加
- 表示速度が1秒～5秒まで遅いと直帰率は90%増加
- 表示速度が1秒～6秒まで遅いと直帰率は106%増加
- 表示速度が1秒～10秒まで遅いと直帰率は123%増加
- スマホは表示に3秒以上かかると53%のユーザーが離脱
ということを示しています。要するに早ければ早い方がいいということですね。直帰率とはサイト内で１ページしか見ずに離れてしまうことです。
なぜ私がこのような例を出したかというと画像の重さはサイトスピードに大きく影響を及ぼすからです。画像の重さを軽量化するということはユーザーのためでもあり、作り手側のためでもあるのです。
買おうと思ってサイトを訪れたユーザーも待っている間に熱量が冷めて、「やっぱりいいや」ということになります。大きな機会損失をしています。この記事で説明した通り、そこまで大変な作業1つもありませんのでやっておくべきです。
まとめ
いかがでしたでしょうか？この記事では画像のリサイズの方法、リサイズの重要性についてお伝えしてきました。ぜひ有効的に活用してくださいね！
