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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

baserCMSで更新した内容がすぐにブラウザで反映しないとき

この記事は約 1 分で読めます。 baserCMSで既にあるphpや画像などを一部修正して、FTPでアップし直しをした時。 baserCMSでログインしている状態でブラウザ表示できちんと更新されていた …

no image

WordPressのオベンキョウ③ アクセス解析ツール導入

この記事は約 1 分で読めます。 「Google Analytics」を先日始めてみて・・・。 少しずつ内容が見えてきました。 でも、まだまだ・・・長期で見ていかないといけないかなぁと思ってます。 今 …

no image

ファビコンその後・・・。

この記事は約 2 分で読めます。3月2日投稿した「ファビコン」の話、その後・・についてです。 実は、IEでのファビコン表示が出来ずに苦戦していたんです。 そこで・・・いろいろ試した結果。 本日、やっと …

no image

苦手なJavaScriptをイチから勉強してみる【記述の基礎編】

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

no image

FileZillaの転送キュー(キーファイル)をクリアする方法

この記事は約 1 分で読めます。 Webサイトをサーバーにアップする時、またサーバーにあるファイルをバックアップとる時など、私は「FileZilla(ファイルジラ)」というFTPソフトを利用しています …