テンプレートを作成中、スピードテストでグーグルさんから「もっと軽くして!!」と注意されて結局この方法が外部サイトを利用することもなくできました。
圧縮するウェブサービスを利用する方法
あくまでも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」を選択します。
そして画質を40〜60くらいにセットします。「保存」します。このとき保存した場所も記録に残ります。(ここがミソです。覚えていて下さい。)今回は「上書き」するので以下のような画面がでても「置き換え」のまま保存します。
そしてココでアクションを停止して下さい。赤いボタンの左の四角いボタンで停止します。
次に「ファイル」→「自動処理」→「バッチ」を選択します。
そしてソースの下の「選択」から一括で処理したいデータが入っているフォルダを選択して下さい。ここでは最初に作成し振り分けしたJPEGのフォルダを選択します。そして「OK」で一括処理がはじまります。
※重要なのはどこのファイルを、どこへ保存するのか。どこへ保存するかもアクションで記録されているので、同じアクションで別のファイルを圧縮かけてもそのフォルダへ保存されてしまいます。
PNGのやり方も「②」でのjpegをpngに替えて、あとは指定の圧縮をするだけです。以上がPhotoshopの圧縮方法です。
どれだけ圧縮されたのかというと、一目瞭然です。
まとめると
圧縮後もっとも軽く出来る方法はPhotoshopでした。ただ手間が少々かかります。
手間もかけずに簡単に行う場合は「imageOptim」がいいでしょう。