HOME  /WordPress(応用)
 /Compress JPEG & PNG imagesで画像を圧縮する
2020年02月03日

Compress JPEG & PNG imagesで画像を圧縮する

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。

この対策の一つとして画像を圧縮する方法があります。

 

画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & PNG images」の使い方を紹介します。

このプラグインはjpegやpngファイルを圧縮してくれるプラグインで、500枚/月までは無料で処理してくます。

1.プラグインをインストールする前に行う事

このプラグインを利用する為には「tinypng.com」社のサイトに行き、「APIキーの取得」操作を行う必要があります。

①下記のURLをクリックして下さい。

TinyPNG – Developer API 」をアクセスします。

 

②下記画面の「Get your API key」ボタンをクリックします。

­ ­メモ

このAPIキーは登録したメールアドレスに対して1個、支給されます。

このAPIキー単位で500枚/月の処理の管理が行われます。

 

③メールが届いた後の処理

「tinypng.com」社からのメールに下記ボタンがありますので、これをクリックします。

下記画面が表示されます。

※表示されたAPIキーをクリップボード等に保存して下さい。

 

2.プラグインのインストールと設定

①プラグインの新規で「Compress JPEG & PNG images」で検索し、インストール、有効化を実行します。

設定メニュにプラグインコマンドが追加されます。

 

②設定→「Compress JPEG & PNG images」を実行します。

表示されたAPI入力欄に所得したAPIキーを入力し、保存します。

 

③その他の設定

■新しい画像のアップロード

バックグラウンドで新しい画像を圧縮する(推奨)を選択します。

 

■画像サイズの指定

元の画像を圧縮画像で上書きを選択します。

これによりデバイスに送られる画像サイズが小さくなります。

設定が終了したら、必ず「保存」ボタンを挿入して下さい。

3.画像圧縮の実行

このプラグインをインストールすると、設定メニュ以外に「メディア」の中にもメニューが追加されます。

①メディア→Bulk Optimizationを実行します

既存画像を圧縮した後は、メディアに画像が登録されると自動で画像が圧縮されます。

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

ここでは整形済みテキストの設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。 その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。 1.サイドバーにAdSense広 […]

このコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。