
サイトのスピードアップに不可欠の画像圧縮
Webサイトのスピードアップは検索順位の上昇に貢献します。それで必要なのが画像の軽量化です。この原稿では、ブラウザ上で画像を圧縮できるwebサイトと手順を紹介します。ここで紹介するのは3つのサイトです。シンプルに画像を圧縮するwebサイト、画像比率を調整して圧縮するwebサイト、さまざまな演出も入れて圧縮するwebサイトです。
自社サイトや収益を目的とした副業サイトなどでは、表示速度がクリック率に大きく影響します。可能であれば写真の大きさは40-50KBくらいに押さえたいものです。ワードプレスなどでは自動圧縮するプラグインもありますが、サーバーへの負担を考えると元画像を適性のサイズにしておきたいものです。そんな画像調整に役立ちます。またメール添付などの際に使えます。
シンプルにJPG画像をそのまま圧縮するサイト
JPEG圧縮
こちらはJPEG圧縮というサイトです。単純に圧縮するならこのサイトだけでOKです。
シンプルにドラッグ&ドロップで圧縮できます。以下の赤囲みのところに写真ファイルをドラッグ&ドロップします。

すると以下のように-11%という数字で圧縮されます。この圧縮率はもともとの画像サイズによっても変わります。

Webサイトだとできるだけ画像サイズを小さくしたいものです。さらに小さくしたい場合はサムネイルをクリックすると下の画像のように調整画面が現れます。
クオリティのバーで調整します。プレビューでおよその画質はわかりますし、サイズも表記されます。この場合は83Kまで圧縮しています。サイトをスピードアップさせるには画像サイズは60-100Kくらいで調整します。メイン画像の場合は300-400くらいです(表示させたい大きさにもよります)。
全てダウンロードをクリックすればZIPファイルでダウンロードができます。

このサイトのメリット
●画像サイズ(容量)が調整できる
●複数枚の調整に対応できる
このサイトのデメリット
●JEPG以外の画像が対応していない
ただし、姉妹サイトにPNG圧縮があるのでPNGの場合に利用できます。
画像比率を調整して圧縮するサイト
Bannerkoubou(バナー工房)
こちらは、バナー工房というサイトです。画像圧縮やサイズ調整だけでなくさまざまな画像加工ができるので重宝します。今回は画像圧縮とサイズ調整(切り取り)を行ってみます。

下記のように画像を選択するをクリックして画像をアップロードします。画像ファイル名とサイズが表示されます。次に画像を加工するをクリックします。

下記のように画像が表示されます。サイズは454KBと表示されています。画像圧縮とサイズ調整(切り抜き)をしますので、左上のメニューをクリックします。

下記がメニュー画面です。切り取りを選択します。

フレームが天地左右で調整できます。800×450のサイズで切り取りをします。画面のどこでもいいのでクリックするとカーソルが+に変化しすますので、切り取り箇所を下記のように調整します。数字で表示されるので希望の大きさで切り取りをします。切り取り実行のボタンをクリックします。そして、次に圧縮するためにメニューをクリックします。


メニューをクリックすると圧縮画面になります。20と表示されています。これは任意で調整できますが、私の場合はほぼ20のままで圧縮します。数字が高いほど圧縮が強くなるので画像が劣化します。現在サイズは265KBと表示されています。

変更後は68KBに圧縮されています。右上の保存をクリックするとダウンロードされます。
このサイトのメリット
●画像サイズ(容量)が調整できる
●さまざまな加工ができる
●加工を複合的にできる
さまざまな演出も入れて圧縮するサイト
こちらはCanvaというサイトです。画像サイトではなく、デザインサイトとしてwebはもちろん、印刷物のデザインもできます。これを選んだのは、サイズ指定からJPEGのダウンロードまでがとてもスムーズだからです。作成した画像を他のSNSに投稿できるのもラクです。
画面右上の登録からアカウントを作成します。

デザイン作成をクリックします。このときに画像サイズを指定するためにスクロールの下にあるカスタムサイズをクリックします。画像のサイズは画像編集からも行えますが、最初にサイズ指定をする方が、後で便利だからです。

本サイトでは800×450を標準サイズにしているのでその大きさにします。

デザインを作成すると白いページが作成されます。その後、左ツールバーのアップロードをクリックするとメディアをアップロードの画面が現れます。
メディアをアップロードをクリックすると「以下よりアップロード」が現れます。デバイスをクリックするとPCの画像をアップロードできます。SNSからアップロードすることも可能です。

カーソルを動かしてページ上で写真を配置します。

写真を拡大してページいっぱいまで広げます。

そしてダウンロードボタンを押してダウンロードします。推奨がPNGなのですが、JPGでダウンロードします。すると800×450のサイズなら丁度いい40-60KB程度の画像としてダウンロードすることができるのです。

もちろん、CANVAの機能を使って画像をデザインすることができます。ツールバーにはテキスト、背景、素材などがありデザインが楽しめます。

このサイトのメリット
●画像サイズ(容量)が調整できる(有料プラン)
●さまざまな加工ができる
●デザインのテンプレートが豊富
このサイトのデメリット
●無料プランでは限界がある。
まとめ
圧縮サイトや画像加工サイトはいろいろあります。機能も違うので、目的にあったサイトをチョイスするとより効率的な画像加工ができます。