【WordPress】画像サイズ縮小&圧縮におすすめのWebツール4選|サイトスピード改善

2020年8月25日Wordpress

wordpress-image-optimize-downsize

本記事では、画像データの軽量化に使えるおすすめのWebツール4つをご紹介しています╰(*´︶`*)╯

サイトが重くなる原因のひとつには、画像のファイルサイズが大きいことが挙げられます。

なので、画像ファイルを軽くするだけで、サイトスピードが大幅に改善されることがけっこうあります(☝︎ ՞ਊ ՞)☝︎

画像のファイルサイズを軽くするには、以下の2種類の方法があります↓↓

画像の大きさを縮小してファイルサイズを小さくする「画像のリサイズ」
画像データを圧縮してファイルサイズを小さくする「画像圧縮」

手順1:【リサイズ】で画像のサイズを小さくする

まず、単純に画像のサイズ小さくすれば、それだけ画像のファイルサイズも小さく(軽く)なります。

ダウンロード不要無料(もしくは一部無料画像リサイズWebツールの1つ目はこちら↓↓

「BULK RESIZE PHOTOS」– 無料・ダウンロード不要 –

1つ目のおすすめは、「BULK RESIZE PHOTOS」というWebツール。

もちろんダウンロード不要無料です!しかも、使い方はめちゃくちゃ簡単

まず、グレーの枠内に、画像をドラッグしてドロップするか、緑色の「画像を選択します」ボタンから、自分のデータに保存してある画像を選びます↓↓

次に、画面左に数値を指定するための青い設定画面が出てくるので、幅だけ指定すればOK。

WordPressの場合、横幅は700pxあれば挿入画像としてはサイズ十分です。アイキャッチに入れてもギリギリ幅いっぱいまで表示されます。(1200×630pxもしくは16:9の比率でオリジナル画像を作ってからリサイズするとベター)
【テーマがLuxeritasの場合は800pxが良い】

最後に、「スタートリサイズ」ボタンで画像の縮小がスタートします!

3484 × 2478 ピクセル9MBだった巨大画像が、「BULK RESIZE PHOTOS」を使うと700px × 498px までサイズ縮小し、71KBになりました(☝︎ ՞ਊ ՞)☝︎

もちろん、smushEWWW Image Optimizerなどの画像最適化プラグインを使えば、巨大なサイズ&データ容量の画像を、そのままブログにアップしてしまうというミスはありません。

でも、この「BULK RESIZE PHOTOS」などの外部のWebツールを使うことによって、画像データサイズをより小さくできるし、複数枚のサイズが違う画像の幅を、任意の幅に揃えることだってできるので、便利でオススメです。

「SHUTTER STOCK」– リサイズ機能は無料・ダウンロード不要 –

2つ目のおすすめは、Shutterstock 。こちらもダウンロードは不要です。

Shutterstockは本来、有料画像素材サイトですが、「画像サイズ変換ツール」「Shutterstock Editor」は無料で使えます(╹◡╹)♡

ここではShutterstockの「画像サイズ変換ツール」をご紹介します。

まず、Shutterstockのホーム画面のタブから「ツール」にポインターを合わせ「画像サイズ変換ツール」を開きます。

すると、こんな画面が出てきます↓↓

サイズはSmall/Medium/Large/Customから選べます。

Customにすると、幅と高さを自由に決めることができますが、幅のみ入力すると、オリジナル画像の比率で自動的に高さが決まります。(なのでオリジナル画像は1200×630pxもしくは16:9の比率で作っておくのがおすすめ)

3484 × 2478 ピクセル9MBだった画像が、Shutterstock「画像サイズ変換ツール」700px × 498pxまでサイズ縮小して、86KBになりました(☝︎ ՞ਊ ՞)☝︎

このままでは、まだ画像データが重いので、次に画像圧縮でデータ容量をさらに小さくしていきます(☝︎ ՞ਊ ՞)☝︎

手順2:【圧縮】で画像の容量を小さくする

リサイズツールで画像サイズを縮小したあと、圧縮ツールでさらに追い討ちをかけてデータを最小限まで軽くします。

では、画像データの圧縮におすすめのwebツール2つご紹介します。

「TinyPNG」– 無料・ダウンロード不要 –

1つ目は、パンダのロゴが目印の「Tiny PNG」です。

5MBまでの画像を圧縮でき、一度に20個の画像を処理できます。

5MB以上のものは、先にBULK RESIZE PHOTOSなどを使ってリサイズしてデータ容量を減らしてからTinyPNGを使います。

20個の枠がいっぱいになったら、また新しくTinyPNGを開くか、リロードすれば、前の20個が消えて、新しく20個の処理ができるようになります。

圧縮率は最大で約90%近くのデータ減です(☝︎ ՞ਊ ՞)☝︎

「IMAGE OPTIM」– 無料・要インストール –

2つ目は、ロケットのロゴが目印の「IMAGE OPTIM」です。

Macの人は、Appストアから無料で入手できます。

インストールできたら、image optimeのappを開いて画像をドラッグするだけで画像の圧縮が始まります。

↓↓開くと下のスクショのような画面が出てきます(すべて中国語で書かれています)

圧縮し終わると、何%の圧縮ができたか報告してくれます!

JPG→PNGなど、拡張子を変換したい時は、右側のタブをクリックします。
(*拡張子については、わかる人だけ変換してください)

先に変換したい拡張子を選んでから、画像をドラッグしてきます。
画像がドロップされたら自動的に変換が始まります。

拡張子はPNG/JPG/JPEG/TIFF/HEIC/HEIFから選べます。

まとめ

サイト速度を改善するには、画像のデータファイルを軽くすることが有効です。

画像最適化プラグインのほかに、ここで紹介した外部のウェブツールを使うことで、画像データを極限まで減らすことができます。

サイトの表示スピード改善を狙う人は、ぜひ試してみてくださいね(☝︎ ՞ਊ ՞)☝︎