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

ちょっと複雑なtableがコピペで簡単にできる「Table Tag Generator」

この記事は約 1 分で読めます。 滅多に複雑なtableタグを書くことがないのですが、久々にtableタグを使うことになって・・・すっかり忘れていました。。。 tableデザインの時代のコーディングで …

no image

WordPressサイトでRSSフィードボタンを設置してみた♪

この記事は約 1 分で読めます。 何気にWebサイトで、オレンジ色のRSSフィードボタンを見掛けます。 Webサイトの新着情報配信をする為のものなんですが、私のサイトでは今までボタンを設置してませんで …

no image

WordPressでRSSフィードを便利に使うプラグイン。

この記事は約 1 分で読めます。 以前、「WordPressサイトでRSSフィードボタンを設置してみた♪」でRSSフィードボタンを設置しました。 その後、RSSフィード関係で便利そうなWordpres …

no image

WordPress 新着記事のタイトルを表示する方法。

この記事は約 1 分で読めます。 WordPressのテンプレートタグ、いろいろあって奥が深いです。 今回は、トップページやサイドバーに「新着記事のタイトル」を数件表示したりする時に使いたいなぁと思っ …

no image

WordPressプラグイン「NIVO slider light」でリッチなスライドショー簡単設置

この記事は約 1 分で読めます。 以前「jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪」で、「jquery.nivo.slider.js」というjQueryライ …