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 新着記事に「New!」表示をつけたい時

この記事は約 1 分で読めます。 以前、「WordPress 新着記事のタイトルを表示する方法。」を試してみましたが、記事タイトルの横に「NEW!」などの文字やアイコンを表示していませんでした。 表示 …

no image

WordPressで「ブルートフォースアタック」や辞書攻撃にあった時にやってみたこと。

この記事は約 1 分で読めます。 昨年(2013年8月)、ロリポップのレンタルサーバーでWordPressサイトへの改ざん事件がありました。 その後も、「ブルートフォースアタック」や辞書攻撃があってい …

no image

苦手なJavaScriptをイチから勉強してみる【イベント編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

Yahoo!アクセス解析を設定してみました!

この記事は約 1 分で読めます。 2013年10月30日にリリースされた「Yahoo!アクセス解析」。 まだまだリリースされて日が浅いのでGoogle Analyticsほどの資料が見つからないのです …

カラーミーショップ無料テンプレート「Bit」のフリーページ表示順を変えてみた

この記事は約 1 分で読めます。 比較的安価でネットショップ初心者でも始められる「カラーミーショップ」。 スマホからのアクセスにも対応できる、シンプルなレスポンシブデザインの無料テンプレート「Bit」 …