WordPress高速化のための画像圧縮方法とプラグイン

WordPressのステッカー

WordPressに貼る画像のファイルサイズは出来る限り小さいほうが良い。なぜなら、画像サイズはテキストと違って非常にファイルサイズが大きいので、画像がたくさん貼られる記事は表示速度がとても遅くなってしまう。

テキストのファイルサイズは1万文字でも数十キロバイト程度だが、画像だと500×500の大きさでも1つで数十キロから100キロバイトにもなってしまう。

従って、貼る画像の大きさをなるべく小さく設定することが大事だ。今回は私が実践している、画像サイズをなるべく圧縮してWordPress表示を高速化する手順を解説する。

スポンサーリンク

1.オリジナルの画像サイズを小さくする

プラグインを使うのも手だが、そもそもアップする画像の元サイズを小さくしたほうが良い。それと余談だが、WordPressは1つ画像をアップロードすると「大サイズ」「中サイズ」など違うサイズの画像を自動で生成してしまう。

画像数が多くなるとフォルダが圧迫されかねないので、「勝手に複数サイズ作成を禁止するWordPressメディア設定」でメディア設定をしておこう。

それではMacのプレビュー機能を使って画像サイズを編集する方法を解説する。

1−1.一個の画像サイズを変更する

まずは変更したい画像をダブルクリックしよう。普通はプレビューというソフトで開かれると思うが、違いソフトで開く場合は右クリックで「このアプリケーションで開く」からプレビューを選択しよう。

MACで画像サイズを変更する方法

 

 

画像がプレビューで開いたら、上部のツールバーに注目。

image-sizechange12

 

「ツール」を押すと「サイズを調整」と出るので押そう。

image-sizechange13

 

 

ここでファイルサイズを変更できる。ここでは幅を500に変更してみる。OKを押す。

image-sizechange14

 

画像サイズが小さくなった。

image-sizechange15

 

 

1−2.複数の画像ファイルのサイズを一括で変更する

今度は10個20個の複数ファイルを変更したい時の方法だ。まずはサイズを変更したいファイルを複数選択しよう。

プレビューで画像サイズを複数一気に変更する方法

 

次にファイルを選択したまま右クリックを押して「このアプリケーションで開く」>「プレビュー」を押そう。

image-sizechange2

 

するとプレビューでファイルが見られるようになる。

image-sizechange3

 

 

次はPC上部のツールバーで「表示」>「サムネール」を選ぼう。

image-sizechange4

 

すると左側にファイル一覧が出るようになった。今度はここにカーソルを合わせて全選択(⌘A)を押そう。

image-sizechange5

 

下図のようにファイル名が青くなっているファイルが選択された状態だ。全てのファイルが選択されたことを確認して

image-sizechange6

 

上部の「ツール」から「サイズを調整」を押そう。

image-sizechange7

 

 

ここで変更したい画像サイズを入力する。私はこのブログで画像を貼る時はいつも500pxくらいにしているが、今回は450pxにしてみる。入力したらOKを押す。

image-sizechange8

 

すると画像サイズが変更された。この見た目では分からないので、アプリを終了(⌘Q)しよう。

image-sizechange9

 

すぐには反映されないが、しばらくすると画像サイズが小さなったことが確認できるようになる。

image-sizechange10

 

画像サイズの元サイズを変更してなるべくファイルサイズを小さくするのはSEO的にはかなり玄人向け?になるかもしれないが、ここまで丁寧に考えている人にとってはかなり時短テクニックになると思う。

実際私もこのテクニックを覚えてからは画像サイズの変更にかかる時間が半分以下になった。ぜひぜひ参考にして頂きたい。

 

 

2.画像圧縮サービスを使ってさらに画像サイズを小さくする

2−1.TinyPNG

TinyPNGというサイトにアクセス。パンダのいるサイトだ。ここで縮小させたいファイルをアップロードする。

image-sizechange16

 

圧縮させたいファイルを選択する。

image-sizechange17

 

すると自動的に圧縮が開始させる。PNGファイルの場合は70〜80%もサイズダウンしてくれる。「download」というボタ ンを押してダウンロードしよう。複数ファイルを一気に圧縮した場合は「save to dropbox」でdropboxに一括ダウンロードしても良い。

image-sizechange18 image-sizechange19

ちなみに私はなるべくPNG形式ファイルを使うようにしていて、それはPNGファイルは劣化しづらいからだ。

 

 

2−2.JPEGminiでjpegファイルを圧縮する

JPEGminiというサイトにアクセス。赤枠の「UPLOAD PHOTO」を押す。

image-sizechange20

 

Press to Upload Photosを押す。

image-sizechange21

縮小させたいファイルを選択して開くを押す。

image-sizechange22

 

圧縮が開始される。

image-sizechange23

 

 

60KBから42KBまで圧縮された。矢印先を押してダウンロードしよう。

image-sizechange24

 

 

 

任意のフォルダにダウンロードする。

image-sizechange25

 

 

 

WordPressのステッカー

参考になったらぜひシェアしてね!

コメントを残す

メールアドレスが公開されることはありません。