スマホアプリやデザインが中心のWEBサイト

nakamahalog

WEBサイト運営

TinyPNGで画像を最適化する方法 - WordPress

更新日:

WEBサイトの表示速度を高めることは、検索順位や訪れてくれた方の満足度に影響します

表示速度を高めるための方法は様々ですが、主な方法の1つは画像の最適化(軽量化)です

今回は、簡単に画像の最適化が出来るTinyPNGを紹介していきます

目次

[aside type="boader"]

[/aside]

TinyPNGとは

画像をアップロードするだけで簡単に軽量化してくれるオンラインツールです

ファイル形式はPNGとJPEGに対応しています

[aside type="normal"]

WEBサイトはこちら

TinyPNG – Compress PNG images while preserving transparency

[/aside]

特徴

1. 使いやすい

軽量化したい画像をドラッグ、もしくはファイルを選択するだけ

 

2. 複数同時に加工が可能

20画像、合計で5MBまでを同時に選択できる

 

3. 加工後にファイル名が変わらない

TinyPNGは加工後の画像もファイル名が変わりません

同じようなサービスでは、ファイル名が変わってしまうものもあり再変換するときは手間です

ただし、元の画像と加工後の画像をファイル名だけで判別したい方にはデメリットなので、用途でサービスを使い分けるのが良さそうです

 

4.  プラグインがある

WEBブラウザー版だけでなく、WordPressPhotoshop等で使えるプラグインもあります

簡単にアップロードが出来るので、作業の効率が上がります

WordPress版は下記で説明します

 

画像を比較する

実際にネコの画像を使って、加工前後の容量を比較しました

加工前(148KB)

 

加工後(94KB)

 

148KB→94KBと約36%の軽量化

見た目では画像の差は判別するのは難しいのではないでしょうか

WEBサイトで使う記事の画像であれば問題なく使えると思います

 

WEBブラウザー版の使い方

WEBブラウザー版の使い方は簡単

まずはサイトにアクセス
TinyPNG – Compress PNG images while preserving transparency

枠の中に画像ファイルをドラッグするか、枠を選択してファイルを指定するだけです

 

あとは、ダウンロード先を選択して保存してください

 

WordPress版の使い方

設定方法

1. プラグインをインストール

左のサイドメニューから[プラグイン]→[新規追加] を選択し、右上の[キーワード検索]で[TinyPNG]と入力

TinyPNGで検索できますが、プラグイン名は「Compress JPEG & PMG images」と出てきます

これを [今すぐインストール]し、[有効化] すればインストールは完了

2. APIキーの取得

1. プラグインを使うためにAPIキーが必要なのでサイドメニューから[設定]→[メディア]と選択

画面の中ほどにある TinyPNG develiper section と書かれたリンク先に移動します

[aside]

こちらのリンクからもアクセスできます

TinyPNG-Developer API

[/aside]

 

2. [名前]と[メールアドレス]を入力して[Get your API key] を選択

 

3. 登録したメールアドレスに以下のメールが届くので [Visit your dashboard] を選択

 

4. これでAPIキーが取得できたので、コピーしておきます

3. APIキーの入力

再び [設定]→[メディア] と選択して、画像の枠の部分に先ほど取得したAPIキーを入力して [保存] を選択します

 

これで設定は完了です

 

使い方

使い方は今まで通り画像をアップロードするだけです、特別な操作は必要ありません!

[aside]

WordPressの無料版は 500枚/1ヶ月 と制限があります

ただ、月に500枚もの画像を使うサイトはほんの一部だと思いますので、ほとんどの方は無料で充分でしょう

[/aside]

 

まとめ

上記のように簡単に使えるので、画像の軽量化を試していない方や他のサービスと迷っている方は使ってみてください

WEBサイトの表示速度が改善されてSEO対策にも有利になるはずです

-WEBサイト運営
-

Copyright© nakamahalog , 2018 All Rights Reserved.