モバイルの普及でサイトの表示速度はとても大事な時代になっています。
その中でもサイト内に表示させる画像の影響は非常に高いみたいなんです。
以前はプラグインのEWWW Image Optimizerでした。
その後「tinypng」で画像を圧縮して使用していましたが、作業が増えるのがネックで「ＷＰのプラグイン」があることをちょっと前に発見して、現在使用しています。
画像の圧縮率が高く品質も綺麗なのでおすすめのプラグインとしてご紹介したいと思います。
TinyPNG – JPEG, PNG & image compressionのメリット デメリット
どんなプラグインもメリット＆デメリットがあります。
「TinyPNG – JPEG, PNG」も同様メリット＆デメリットがあります。
TinyPNG – JPEG, PNG & image compressionのメリットとは
・高圧縮
・画像の綺麗さ
・アップロード時に圧縮
・アップロード済み画像も圧縮してくれる
ですね。
画像の圧縮率は画像にもよりますが５０％以上にもなります。
それでいて画像の劣化はほとんどないところがいいですね。
TinyPNG – JPEG, PNG & image compressionのデメリットとは
・登録する手間がある
・無料で圧縮できるのは1ヶ月に500枚まで
登録と言っても設定画像でワンクリックでできます。
やはり無料だと限界があるみたいで、上限は500枚。一つのサイト分ですね。
と言っても画像が多いサイトなどには非常におすすめなプラグインです。
プラグイン インストールと登録
ダッシュボードからメニューから「プラグイン」➡「新規追加」をクリック
検索で「TinyPNG」を記入し検索
「TinyPNG – JPEG, PNG & WebP image compression」が出ますので「インストール」➡「有効化」をクリック
ダッシュボードに戻り「設定」の項目から「TinyPNG – JPEG, PNG & WebP image compression」をクリックし登録設定をします。
開くと自動で「サイト管理者名」と「サイト登録メールアドレス」か記入されています。
その下の「Register new account（アカウント登録）」をクリック
APIキーはメールで送られますが、自動で記入され「登録完了」になります。
TinyPNG – JPEG, PNG & image compression 各設定
New image uploads（新しい画像のアップロード）
画像の ① の部分です。
画像はいつどれを圧縮しますか？と言う設定
内容は
・バックグラウンドで新しい画像を圧縮する（推奨）
これは最速の方法ですが、一部の画像関連プラグインで問題が発生する可能性があります
・アップロード中に新しい画像を圧縮する
アップロードには時間がかかりますが、他のプラグインとの互換性が高くなります。
・新しい画像を自動的に圧縮しない
メディアライブラリで圧縮する画像を手動で選択します。
の三種類。
何でもかんでもと言うと「月500枚」があっという間に行きます。
とりあえずアップロードするときもありますので私は
新しい画像を自動的に圧縮しない（メディアライブラリで圧縮する画像を手動で選択します。）
にしています。
Image sizes（画像サイズ）
画像 ② の部分
ここは画像サイズをどのサイズに適用させるか？と言う設定です。
WordPressは画像を1枚アップロードする度にオリジナルサイズとその他にもサムネイルや中サイズなど複数のサイズに自動でアップされ振り分けられてしまいます。
デフォルトの設定では画面にあるようにすべてにチェックされていますが、このままでは1枚アップしたらプラグインは15枚分の圧縮作業を行います。
月500枚はあっという間に無くなってしまいます。
その為に、サイトに使用しているサイズ以外はチェックを外した方が有効に使用できます。
Original image（元の画像）
画像 ③ の部分
こちらは元々の画像情報をどうしますか？と言う設定
内容は
元の画像のサイズを変更します
○○×○○
元の画像で作成日時を保持する
元の画像の著作権情報を保持する
元の画像でGPS位置を保持（JPEGのみ）
ここでのおすすめ設定は一番上のサイズ変更だけチェック！
デジカメなどのサイズは2000以上の場合がありますから、そんなサイズは指定されたサイズに変更しますと言う事です。
私は800に設定しています。
設定が済んだら「変更を保存」クリックで設定は完了です。
TinyPNG – JPEG, PNG & image compression 機能と注意
インストール＆設定が済むと「すぐ使ってみたい」と思うでしょうが、この機能を読んでからにしてみてください。
TinyPNGプラグインの機能は
①アップ時に圧縮
②メディアライブラリで選択して圧縮
③サイトの画像を一括で圧縮作業
①は自動でしてくれます（新しい画像を自動的に圧縮しないに設定しているのでOFF）
②は選択した画像を圧縮してくれます。OK
③はサイトにある画像（サイト構成画像も含む）を一気に圧縮してくれます。（ちょっとまって！）
①と②はいいとおもいますが、③はサイトを作り始めたのならOKですが、途中からというとあっという間に500枚に達してしまいますのでNG
サイトを始めたばかりの人の為に②と③の使用方法を説明します。
②選択した画像を圧縮
「メディア」➡「ライブラリ」へと進みます。
画像詳細画面右に「Compression」欄があり各画像に「Compressionボタン」が表示されています。
圧縮したい画像のボタンをクリックすると圧縮が始まり終わると「Compression」欄が画像のように完了になります。
③サイトにある画像（サイト構成画像も含む）を一気に圧縮
「メディア」から「Bulk Optimization」をクリック
画面の「一括最適化」をクリック
下の画面になりどこを押したらいいの？と思いますが
青いボタン「upgrade account（アップグレード アカウント）」
の下にうっすら見える「No thanks.continue.anyway（いいえいりません）」をクリック
下の画面になり青いボタンを押すとサイト全ての画像圧縮が開始されます。
画面の数字は左から「圧縮済みでダウンロードされた枚数」「圧縮可能な画像数」「今の費用」になります。
良い画像になるんですが月500枚では結構すぐ無くなってしまいます。
サイト作成で時間に余裕があるときは「TinyPNG – JPEG, PNG & WebP image compression」の元々の外部サイトtinypng.com
で圧縮しアップがいいかもしれません。
コメント