Twitterやってます
web制作のTipsやまぁまぁ役に立つことをたまにつぶやいています。
Follow @ENUAI
すでにいろいろなブログでも紹介され済のJPEGminiですが、
まだ知らない人や知ってるけど実際に使った事がないという方へむけて書きます。
めっちゃ便利なので使わないと損！
web制作者はデザイナーもコーダーも「JPEGmini」で幸せになりましょう！
また、充分に試さずに批判的な意見を持っている方もおられるようで、
「Photoshopで高画質から標準に落としたのと変わらなかった。」
んなこたーないです。
フォトショで高画質から標準に落としたら、その分画像劣化しますよね？
JPEGminiは画像はほとんど劣化せずにファイルサイズだけを落とせるサービスです。
（※画像によっては変化がない場合も、もちろんあります。）
「元のJPEGが低圧縮率なだけでしょ？」
「デジカメで撮った写真そのままを圧縮したら、そりゃ軽くなるでしょ」
これもそんなことないです。
ちゃんとPhotoshopで高画質（80画質）・標準画質（60）で圧縮して書きだし済の画像でも、
JPEGminiを使えば画像の劣化はほとんどなく、さらに圧縮してくれます。
とにかく自分でいろんなサイズ・条件で試してみてください。
特にモバイルサイトやスマートフォンサイト、ファイル容量制限のあるバナーを作る時など、
『JPEGminiスゲー！』ってきっと思うはず。
Q&Aリスト一覧
- JPEGminiってなんですか？
-
JPEGminiは、.jpg/.jpegファイルを画像がほとんど劣化する事なく圧縮してくれる素敵なオンラインのサービスです。
ブラウザからファイルをアップロードして圧縮してくれた画像をダウンロードする という流れになります。
アプリとしてオフラインでフォルダまるごと圧縮とか出来たらすごく素敵ですね。今後に期待です。
- どうやって使うの？
-
圧縮する画像を1枚だけ（1枚づつ）なら、ユーザー登録しなくてもOKですが、
複数の画像をいっぺんにアップロードしたい場合はアカウントの登録が必要です。
facebookもしくはGoogleアカウントからサインアップすることもできます。
まずは右上の黄色いボタンからスタート。
1枚だけの場合は左側。複数の画像をまとめて圧縮する場合は右からサインアップ。
サインアップしてるほうが確実に便利です。簡単なのでやっておきましょう。
サインアップできたらこんな画面になります。
右上の「Upload Your Photos」からアップロードスタートです。
黄色いボタン「Select Photos」からアップロードする画像を選択します。
『アルバムの名前を決めてください』と聞かれるので、適当に名前を付けます。
今回は「test」としました。名前が入力できたら右下の「Create Alubum」をクリック
アップロード完了後の画面はこんな感じです。（アップロード前と同じ画面です）
『You have no albums.』？ あれ？ アップできてないの？と思うかもしれませんが、大丈夫です。画像を圧縮する時間が必要ですので、しばらく他の作業をしながら待ちましょう。
圧縮した画像が完了したらこんな感じになります。
アルバム全体でいくら軽くなったのかが分かります。
今回はオリジナル111KBだった画像が87KBになりました！
左下にある「Download」ボタンでフォルダごとダウンロードする事ができます。
完了時には登録したメールアドレスにお知らせもしてくれます。
（メールが不要ならアカウント設定からメールを送らないようにもできます。）
メールには直接zipファイルへのダウンロードリンクがありますので、再度サイトに訪問しなくてもダウンロードすることができます。超便利！
- そもそも全然圧縮してない大きい画像だから大幅ダウンしてるんじゃねーの？？
-
デジカメで撮ったそのままの画像などは大幅にサイズダウンします。
ですが、一度Photoshopで画質80で書きだしたものでも、JPEGminiを利用すればさらにサイズダウンすることが可能です。
今回は下記6種類のバナーをサンプルに実験してみます。
Photoshopでデザインされたバナーを、いつものコーディングと同じように「Webおよびデバイス用に保存」で書き出します。
やや高画質（画質60）と高画質（80）の2パターンで書き出しました。
結果がこれです。【実際の画像をダウンロードしてお確かめください。】
高画質（80）で書きだした画像は178KBから102KBに、
やや高画質（画質60）で書きだした画像は111KBから87KBになりました。
最高画質（100）で書きだしていれば、もっと圧縮率は高くなるはずです。...が、普段コーディングする時は100で書き出さないですよね？？画質85～60ぐらいの範囲で書き出すと思います。
ということは、今から制作するサイトだけではなく、すでに完成済み（コーディング済）のサイトにもJPEGminiはすごく役に立つということになります。
実際、すでに作成済の10ページ程度のスマートフォンサイトで試したところ、
サイト全体(htmlとかCSS等も含めた)容量が1026KBから879KBまで落ちました。
スマートフォンサイトなので、pngも結構使っています。png専用圧縮サービも併用すれば、さらなる軽量化が期待できるでしょう。
- 対応している画像形式は？
-
現在はJPEGファイルのみです。
サービス名が「JPEGmini」ですからね。。
- PNGも圧縮したいんですけど！？
-
いろいろありますけど、「punypng」がいいっぽいです。
http://www.punypng.com/
- ちょっと話それるけど「.jpg」と「.jpeg」って違うの？
-
はい、やっぱりいました。Yahoo!知恵袋に同じ質問をしている人が。
画像ファイルの拡張子で、.jpgと .jpegとはどう違うのでしょうか。 - Yahoo!知恵袋結論としては、特に違いは無いとのことなのですが紛らわしいので.jpgに統一してほしいですね。
- おまけ
-
JPEGminiのサイトのトップにあるデモが、すごくわかりやすくビフォーアフターを表現していますね。
リフォームのビフォーアフターページを作る時など、web制作の時でこんな感じにしたいと思う事があるかもしれません。
同じようなことが実現できるjQueryプラグインがありましたので、おまけでご紹介しておきます。
jQuery Before/After Plugin
