あふぃり〜ちどっとこむ

アフィリエイトを始めるための準備と注意点(備忘録)

画像圧縮でサイト軽量化

      2015/08/02


image comp 2

 

 

画像はテキストに比べて圧倒的に重い

なのでサイトに画像が多いとサイトが重くなり、ページ表示速度が遅くなってしまう

表示速度が遅いとほんと不便ですぐ閉じたくなる笑

内容ではなくアクセスする事自体にストレスを感じさせてしまうのはサイトとしてはマイナスにしかならない

なので、サイトを構築する初期段階でそのことを考慮して画像を利用すべきてことになる

これから紹介させていただくプラグインは、すでにアップした旧記事も最適化で来るけれど

それにも限界があります

私がいい例で、あまりにも大きなファイルサイズでアップしてきてしまった画像は、

手動で1カットづつ圧縮しないと表示速度を快適に改善まではいかない(ひ〜〜〜)

結構無駄な作業になってくるので

初期段階からこれはやっておく方が断然いい

 

ネット上の便利な無料サービスや無料アプリもありまして

色々試してみたのでこれがいいと感じたものを備忘録しておきます

 

 

〜〜項目〜〜〜〜〜〜〜〜〜〜〜〜〜

1☆ ワードプレスプラグインを利用する( EWWW Image Optimizer)

2☆ Web上の無料サービスを利用する(Shrink PNG files, media4x)

3☆ その他 プラグインImasanity, WP Resaized Image Quality,
無料アプリJPEGmini Lite

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 

圧縮する方法は色々沢山何通りもあるけれど

効果が薄いものや 劣化しすぎたりなどで、なかなかどうしてな感じがあった….

最近はある程度妥協することと、使い分けるのがいいかなと感じている

結果、

“Shrink PNG files” や、“media4x” でサイトに上げる前に手動で圧縮してしまうのがデータを一番軽くできたので、

ワードプレスプラグイン“EWWW Image Optimizer”と併用しながら

やりわけるやり方に定着しつつあります

 

ただ、少し劣化も気になったり、やや手間がかかるので

面倒だし画像そんなに使わないしという方は

“EWWW Image Optimizer” だけでも十分便利かなと感じました

 

 

 

 

1☆ ワードプレスプラグイン “EWWW Image Optimizer”

 

このプラグインはかなり優れもの
個別圧縮可能過去のデータ一括圧縮最適化可能、そして有効化しておけばそれ以降の
画像はアップ時に自動で圧縮してくれる
圧縮率もかなり高く、劣化も少なめ

インストールし、有効化し、
それだけですでになにもしなくてもアップする画像は自動で圧縮してくれる
蓄積したすでにある画像も最適化出来るので、

一応設定もしてみた…..

 

 設定>EWWW Image Optimizer>で内容を設定
設定>-2

 

 

*① Basic Settings

Remove metadate-2

 

Debugging > 不具合などのサポートに関わる事の項目らしい
よくわからないのでスルー笑

Remove metadata > 画像の不必要な情報をカットしてくれる
これはした方がよいのでチェックをいれた

 

・以下は 圧縮をガツンとしたいならばチェックを入れると効果があるようで、
やってみたが私のデータには効力はたいしてなかったので、スルー….

 

Bulk Delay > 一気に大量の画像を圧縮するとサーバーに負担がかかるので、処理に”間”を設定できる
でも、なしでもぜんぜん平気だった(Xサーバー)

※ 項目内容を設定するたび、”Save Changes” でセーブしていくべし

 

 

 

*② Advance Setting 

optimaize level-2

・圧縮レベルは変えても変化がなく、時間がかかるだけだったので
デフォルトの レベル2 のままにした

 

 

・下の方のDisable Pngout > このPngout圧縮は詳細設定が必要なので
デフォルトのまま、チェックを入れ、この圧縮は使わなくてよい設定にしておいた方がよさそう

disable pngout-2

他、定期的に圧縮をするようにも設定出来たり、圧縮フォルダを指定出来たりも出来るようだけれど
これらもとりあえずスルーでOK

 

 

 

*③ Conversion Setting

Hide Conversion Links-2-min
Hide Conversion Links > JPEG や PNG に変換する機能を使いますが、それを利用しないよう設定したい場合、
これより下の項目で設定が必要になってくる
ここにチェックを入れれば、通常の設定になるので、チェックを入れておく

Delete originals は、オリジナル画像を削除していい場合チェックを入れる
つまり、チェックをいれるとオリジナル画像がなくなってしまうので注意が必要

・これ以下の項目は上記項目の “Hide Conversion Links” にチェックをしなかった時の変換を選択する項目
なので今回は空欄のままにしました
JPG/PNG を WebP に変換したい、
JPGをPNG に変換したい、PNG を JPGに変換したいなどのとき設定する

 

 

Cloud Settings は、有料オプションらしいのでこれも今回スルー

 

ここまでの設定で、コレ以降アップする画像は、アップするたび自動で圧縮してくれます

 

 

 

 

そしてこの

*④ 設定以前の画像も 圧縮、最適化出来る

念のため、バックアップをとってから実行することをオススメ

手順は、上記の設定を済ませておいて、
メディア>Bulk Optimiza>を開く

Bulk Opt_0

 

下記の画面になりますが、“Start optimizing” をクリックするだけで、始めてくれます
画像の量が多ければそれだけ処理に沢山時間かかるので、この間に顔を洗って歯を磨いてトイレにいってシャワーして、
コーヒーとおやつをもってこれるくらいでしょうか?笑

Bulk Opt_1

 

 

実行中はこんな感じ

Bulk Opt_2

 

 

 

終るとバーが全部ブルーになって、”Finished” となってます

Bulik Opt_3

 

 

画像を確認するとかなり圧縮されている

 

 

*⑤ 個別に圧縮も出来る

ダッシュボード>メディア>から開き、横に情報が表示される画面を選択

メディアライブラリ

 

 

 

その画面の右側に “Image Optimizer” の項目があるので、そこで再度圧縮したり、
してない画像をしたりが可能

個別Optimaize 

 

以上のように、” EWWW Image Optimizer” は、このプラグインだけでこれだけのことが可能なので
ものすごく便利
圧縮率もかなり高く、元画像の大きさにもよるけれど半分くらいにしてくれたりする
だので これだけで十分な方も多いと思う

 

 

 

2☆ “Shrink PNG files” と “media4x” (Web上の無料サービスを利用する)

 

上記の ” EWWW Image Optimizer” だけで十分な方が多いと思いますが、
私はかなり画像を使いまくるので、美しくなくてもよく、わかればいいのという画像は、
もっと圧縮したい笑

そこで、そうゆう画像に対しては、この ” EWWW Image Optimizer” でアップする前に、
Web 上の無料サービスで先にがっつり圧縮します

かなりの圧縮率なのと、わりかしキレイなまま圧縮してくれるので、
これだけでもいいかもしれません

 

それが “Shrink PNG files”“media4x” 

 

*① Shrink PNG files (PNG画像を手動で個別にガッツリ圧縮する)

Shrink PNG files 

基本的にはPNGファイルを圧縮してくれるサービスのようですが、
JPGも出来ますし、かなりガッツリ圧縮してくれる上に、劣化も少ない

Shrink PNG files-2

画像をドラッグすると圧縮してくれて
そしてそれをダウンロードするだけ
その画像を ” EWWW Image Optimizer” を有効化したサイトに上げると更に
圧縮され、軽くなる

 

 

*② media4x (JPG画像を手動で個別にガッツリ圧縮する)

media4x

これはJPG用の圧縮
これもかなり圧縮してくれる上にわりとキレイ

Media4X-2
 同じくドラッグするだけで圧縮してくれ、
それをダウンロードするだけ

 

一応無料Webサービスなので、ダウンロードしたファイルもウイルスチェックしてみたけれど
大丈夫でした

ですが、自己責任にてご利用下さい
<(_ _)>

 

 

以上のツールを私は使ってますが、

ほかに

 

 

3☆プラグインImasanity, WP Resaized Image Quality,
無料アプリ”JPEGmini Lite” などの無料アプリもあり

 

その他、プラグインでも “Imasanity” や “WP Resaized Image Quality”  などもある

無料アプリでもJPEGmini Lite – ICVT Ltd. などがあります

プラグインの方では “EWWW Image Optimizer” があまりにもスバラシイのと、
アプリの “JPEGmini Lite” は、圧縮率はいいのですが、この無料版だと、1日20枚までしか出来ないので、
上記で紹介させて頂いたものがベストだと私は感じました

んが、”JPEGmini Lite” は有料版のJPEGmini – ICVT Ltd.もあり、これはかなり使っている方も多いようです
そしてプラグインもその人にとってやり方や、圧縮率の満足度は異なると思うので、色々試してみるのがいいかなと思う

 

※更に画像でサイト表示速度が気になる場合
Bj Lazy Load で画像を遅延ロードさせてサイト表示速度アップ を参照下さい)

 

以上 あふぃり〜ち備忘録でした

ではよい圧縮ライフをば!

 

 

"サーバー契約・ASP登録・ドメイン取得” の
注意点や選び方をまとめてみましたので
こちらもチェックしてみて下さい☆
★レンタルサーバー選び方
注意点
はこちら

★登録必須ASPの内容
ピックアップ
はこちら
★独自ドメイン取得
注意点
はこちら

 

 

 - サイト初期設定注意点, Wordpress プラグインについて, SEOについて, 便利ツールについて , , , , , , , , ,

スポンサーリンク



スポンサーリンク



Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 × three =

  関連記事

BackWPupの設定~ワードプレスバックアッププラグイン~

    BackWPup Free – WordPress …

記事内にソースコードを表示させるプラグイン Crayon Syntax Highlighter

  サイトで記事を書いていると、CSS ,HTML, などのコードを書 …

ブログやサイトを放置する場合のひと工夫〜ほったらかしサイトとして生かす〜

例によって画像と内容のWhich………….     &nbs …

アフィリエイトで先に準備しておくべきもの

    アフィリエイトを始めようとすると準備しなければならな …

タグを記憶させておけるWPプラグン AddQuicktag

  記事を書く時毎回使うタグってありますよね それを毎回書いてると面倒 …

アフィリエイト向けオススメレンタルサーバーと選び方・注意点

      〜〜〜項目〜〜〜〜〜〜〜〜〜〜〜〜〜〜 1☆アフ …

ページトップへワンタッチスクロール〜Word Pressプラグイン〜

  サイトの内容が濃かったりするとページが長くなり そうするとページの …

ワードプレスのウィジェット管理画面に追加できるウィジェットがない!?

ワードプレスのウィジェット管理画面の項目がほとんどなくて白くなってて何やらおかしい!?解決備忘録

Google Analyticator(アクセス解析設置プラグイン)の設定

      Google Analyticator …

ファビコンを簡単に設置出来るプラグイン(Favicon by RealFaviconGenerator)

    Favicon by RealFaviconGene …