Webの記録

画像最適化に便利な4つのツール

投稿日:2014年4月26日 更新日:

この記事は約 3 分で読めます。

PCとタブレットイメージスマホを意識したWebページを作っていると、避けて通れない「画像最適化」。
昨年あたりから少しずつ使っていますが、見た目は変わらないのに軽量になるから不思議です!
私がお世話になっている便利ツールを個人的にまとめました。どれも有名なものばかりです。
WordPressのプラグインは、このブログでも使っています。
【2015.7.20 追記】「tinypng」のjpg・png両方使えるものが追加されたので、「tinypng」の項目に追記しました。

画像最適化ツール

  1. ImageOptim
  2. JPEGmini
  3. tinypng (tinyjpg)
  4. EWWW Image Optimizer(WordPressプラグイン)


1.ImageOptim

【サイトURL】ImageOptim

ImageOptim

  • 対応OS・・・Mac
  • 画像形式・・・gif/jpg/png
  • 無料
  • ダウンロードして使用する

Macユーザなら、これ1つで便利に使えます。無料なのが有難いです。
私が一番利用しているツールです。


2.JPEGmini

【サイトURL】JPEGmini

JPEGmini

  • 対応OS・・・Mac / Windows
  • 画像形式・・・jpg
  • 無料は枚数に制限あり。有料版もあり。
  • 無料版は、Web上で使用。有料はダウンロードして使用できる


3.tinypng

【サイトURL】tinypng

tinypng

  • 対応OS・・・Mac / Windows
  • 画像形式・・・png
  • 無料
  • Web上で使用

※上記でjpg・png両方使えるツールができたようですので、追記します。

tinyjpghttps://tinyjpg.com/


4.EWWW Image Optimizer(WordPressプラグイン)

【サイトURL】EWWW Image Optimizer

EWWW-Image-Optimizer

  • WordPressプラグイン
  • 画像形式・・・jpg/png
  • 無料
  • 既にアップロードした過去画像も一発変換できる


実際にプラグインを使う前と使った後を「Pingdom Website Speed Test」を使って比べてみました。
画像の中に入れた赤枠部分に注目です!

【導入前】

pingdom_before

【導入後】

Page sizeは変わらないのですが、Load timeが少し短くなりました。
プラグイン1つ入れただけで、今までアップロードした画像が軽量になるのは嬉しいです♪

pingdom_after

EWWW Image Optimizer導入で参考にしたブログ


まとめ

画像最適化で使えるツールは、検索すると他にもいろいろ出てきますが、私が使ったことのある(毎回使っている)ものをまとめました。

どれも無料で簡単に使用でき、画像の見た目がそれほど変わることなく軽量化できる優れものばかりです。

私はPhotoshopで圧縮した後に、これらのツールを使って画像を軽量化させています。

ImageOptimでフォルダーごと一気にまとめて使ったら、1枚だけ画像が汚くなって(ファイルが壊れた?)しまったのですが、少しずつ使えば大丈夫のようです。

-Webの記録
-, , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …

モバイル フレンドリー テストで合格しているのに、「スマホ対応」ラベルが付かない時

この記事は約 1 分で読めます。 スマホで検索していると「スマホ対応」と表示されるようになって、しばらく経ちました。 検索している時の順位も、「スマホ対応」と表示されてないページより、表示されているペ …

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …

no image

スマホサイトの画像コピーガード対策

この記事は約 1 分で読めます。 スマホ向けのサイト制作の機会が増えました。 PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。 画面の長押しすると、 …

no image

無料で簡単!アイコンフォント「Font Awesome」を使ってみた

この記事は約 1 分で読めます。 先日SNSアイコンをつけた時に、アイコンフォント「Font Awesome」を使用しました。 無料で、初めてでも簡単に使えるアイコンフォント「Font Awesome …