*ワードプレスで重たい画像データのJPEGやPNGを簡単に圧縮する方法です。

2014.7.20 0Comments WEBツール

テンプレートを作成中、スピードテストでグーグルさんから「もっと軽くして!!」と注意されて結局この方法が外部サイトを利用することもなくできました。

圧縮するウェブサービスを利用する方法

あくまでもFireworksを使っての事なので、ないときにはPNGを圧縮してくれるサイト「TinyPNG」が便利です。

Mac用ソフトImageOptimを利用する方法

ImageOptim https://imageoptim.com/ リンク先

 

Fireworksで保存して圧縮する方法

Fireworksを使うというか、ただFireworksで開いて「レイヤーなしのPNG」で保存するだけです。
保存するだけ。

自動で圧縮されて保存されます。これはPhotoshopで作成し保存するとレンダリングすることなく保存されるためのようです。

ただFireworksはもともとウェブ製作ツールなので圧縮が自動的に行う仕様なのかもしれません。

 

圧縮前のデータです。

圧縮前

 

圧縮後です。

圧縮後

圧縮ふとんもびっくりのタンスのスペースががら空き!ぐらい圧縮されます。

圧縮された画像はどう映るのかも見てみます。

圧縮前のデータです。

圧縮前 圧縮前

 

圧縮後です。

圧縮後圧縮後

ほとんどかわりませんね。

 

Photoshopで圧縮する方法

※必ずバックアップはとっておく事。

PhotoshopはJPEGとPNGを別々に圧縮かけていくのでこのようにフォルダを分けておく。

当然JPEGフォルダの中には同じjpegを、PNGにはpngを入れておく。

フォルダの作成

 

①次にPhotoshopを開く。「ウィンドウ」→「アクション」のパネルを開く。そして「JPEG圧縮」という任意の名前を付けてフォルダを作成する。さらに「新規アクション」を作成。ここまで完成するとパネルはこうなっています。
パネル

 

②赤いボタンが押してある間は操作が記録中です。この状態のまま指定のjpegファイルを開きます。そして「ファイル」→「WEB用の保存」を選択します。そうすると以下のような画面が開くのでプリセットの下の方にある選択から「jpeg」を選択します。

WEB用の保存

 

そして画質を40〜60くらいにセットします。「保存」します。このとき保存した場所も記録に残ります。(ここがミソです。覚えていて下さい。)今回は「上書き」するので以下のような画面がでても「置き換え」のまま保存します。

画質を40〜60くらいにセット

 

そしてココでアクションを停止して下さい。赤いボタンの左の四角いボタンで停止します。

アクションを停止

 

次に「ファイル」→「自動処理」→「バッチ」を選択します。

バッチ

 

そしてソースの下の「選択」から一括で処理したいデータが入っているフォルダを選択して下さい。ここでは最初に作成し振り分けしたJPEGのフォルダを選択します。そして「OK」で一括処理がはじまります。

一括処理

※重要なのはどこのファイルを、どこへ保存するのか。どこへ保存するかもアクションで記録されているので、同じアクションで別のファイルを圧縮かけてもそのフォルダへ保存されてしまいます。

PNGのやり方も「②」でのjpegをpngに替えて、あとは指定の圧縮をするだけです。以上がPhotoshopの圧縮方法です。

どれだけ圧縮されたのかというと、一目瞭然です。

圧縮前と圧縮後

 

まとめると

圧縮後もっとも軽く出来る方法はPhotoshopでした。ただ手間が少々かかります。

手間もかけずに簡単に行う場合は「imageOptim」がいいでしょう。

 

↓今後の励みになるのでよかったらクリックだけでもして下さい。
にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ