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

WordPressプラグイン「Audio Player」でMP3音源を簡単に再生してみた

この記事は約 1 分で読めます。 WordPressでMP3オーディオプレーヤーを表示させてくれるプラグイン「Audio Player」を試してみました。 「Audio Player」は、Flashで …

no image

MAMPでMySQLが起動しない時

この記事は約 1 分で読めます。 MAMPを起動した時、Apacheはちゃんと起動されているのにMySQLが起動しないことがあります。 いろいろな原因はありそうですが、とりあえず調べた内容でなんとか無 …

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …

no image

WordPress.comの便利機能が入ってる 「Jetpack」を試してみた♪

この記事は約 1 分で読めます。 アクセス解析プラグイン「WordPress.com Stats」をずっと使っていました。 他にもアクセス解析の勉強のために使用しているものがあるのですが、一番よく見て …

no image

jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪

この記事は約 1 分で読めます。 今回は、GoogleMapを埋め込んで、カスタマイズ出来るjQuery プラグイン「jquery.gmap3.js」。使ってみたら楽に出来たので、メモです。 配布元: …