水無月みとこんにちは。10にも満たない記事数で遅延サイトを生み出した水無月(@MitoMinazuki)です。
ブログの表示速度が重くて困る。何とか改善したい
と思っていませんか？もしかしたら原因は画像にあるかもしれません。
元々私が画像を用意するために使用していたのはPhotoshopだったのですが、Canvaの使用でデータ容量をかなり削減できました。
本来Canvaの使用用途と言えば、サムネイルなどの画像の編集が主ですが、これを使えば簡単に画像の容量ダウンが可能です(慣れてしまえば1分未満)
この記事では、画像容量を抑えるために効果のあった方法をご紹介していきます。
「フリー素材サイトで画像をダウンロードしたけど、そのままだとデータ容量が大きすぎる」という方も、同様の方法で解決できますので是非参考にしてください。
すぐに方法を知りたい方は、目次から移動することが可能です。
今回実際に容量ダウンした画像がこちらです。クリックで拡大できます。
＼Canvaで編集前／
＼Canvaで編集後／
〔前提〕表示速度が遅すぎる(Canva以前にやったことアレコレ)
ユーザーの離脱が早い。表示速度が原因？
当ブログでは、サイト運営者が書いた小説を【二次創作歓迎】として投稿しています。
しかし、ある時ユーザーの滞在時間が1分未満と非常に短くなっていることに気づきました。
初めは小説の続話のUPを期待してくださった方が、確認だけして離脱したのだと思っていました。
しかしUPしても変わりなし。なぜ？と思い自分のブログにアクセスしてみると･･･
ブログが重すぎて表示までの時間が長い！
小説の記載が主ですので、それ程重くなるような原因はないはず･･･。
そう思って調べると、どうやら画像の影響で重くなっている可能性大！
それもそのはず、私が使っていたある画像の容量は2.64MB！
調べたところ、1枚の画像当たりのデータ容量は200KB程度に抑えるべきとのこと。先ほどのデータ容量をKBに計算し直すと2703.36KBです。これでは重くて当然。
画像1枚のファイルサイズとしては、200KBを目安に、できる限り軽くしておきたいです。
引用元：初心者のためのブログ始め方講座様
あの手この手で改善を図り、どうにか572KBまで圧縮することに成功。しかし目標には程遠い。
ここまでで私が行ったことは
- PNGをJPEGに変換
- Photoshopにて書き出しの際、画質を下げる
- TinyPNGにて画像圧縮
プラグインも使用してみたのですが、今回の記事内容とは合致しないため割愛します。
PNGをJPEGに変換
ブログでよく使用される画像の圧縮方式はPNGかJPEG。
初めに使っていた画像はPNG方式の画像で、”キレイだがデータ容量が大きい”ものでした。
写真やグラデーションなど色変化の多い画像は、綺麗に保存することはできるものの、ファイルサイズが重くなってしまいます。
引用元：Bigmac.inc様
そこで、データ容量の小さいJPEG画像に変更。
JPEGは、画質が維持できる程度に不要なデータを削除することによって、質を保ちながら画像データを軽量化することができるのです。
引用元：Bigmac.inc様
これだけでもかなりデータ容量が小さくなっています。
Photoshopにて書き出しの際、画質を下げる
続いて、同じJPEGですが画質を下げて書き出ししてみました。
若干ですが、データ容量が下がりました。
TinyPNGにて画像圧縮
更に画像のデータ容量を下げる方法がないかと探し、見つけたのがTinyPNG。
画像をドラッグアンドドロップするだけで圧縮してくれるサイトです。英語表記ですが操作は前述で全てなので実践。
残念ながら今回は0％でした。これは元々データ容量が大きくないものだからのようで、もう少しデータ容量の大きい画像であれば効果があるようです。
Photoshopではここまで
試行錯誤し、ここまでで2.64MB(2703.36KB)から571KBまで下げることが出来ました。
これ以上となると、WordPressのプラグインを導入する方法があります。EWWW Image Optimizerを使用してみましたが、個人的には「多少マシ？」くらいでした。正直これでもやっぱり表示速度は遅かったです。
今後記事数が増えていくにつれ更に重くなってしまったら、最早手の打ちようがなくなります。何とかせねば。
〔本題〕Photoshopで作った画像をそのままCanvaにコピペして書き出した
Canvaの存在自体は知っていたのですが元々Photoshopを使用していましたし、”画像といえばPhotoshop”という先入観があったため導入してきませんでした。
しかしTwitterに使うヘッダー画像が必要になったことがきっかけで、ついにCanvaのお世話になることに。
キャンバの公式サイトはこちら→Canva Pro 
実際にCanvaで画像のデータ容量を下げていく
では、ここまでで頑張って圧縮してきたアイツにトドメを刺しにいきます。一応ここまでの状態は以下。
これをCanvaにコピペして、JPEGとして書き出すだけの易しいお仕事です。
まずこちらがホーム画面
画像をアップロードして編集するやり方(オススメ)
手間が少ないので、サイズ調整が要らない場合はこちらがオススメ
やり方をざっくり言うと、【画像をアップロードする】→【書き出す】の2ステップです！
※初めてやる方に向けて丁寧に解説する為、多少長さがありますがご容赦下さい。慣れれば15秒くらいで出来ると思います。
まずはホーム画面右上の「アップロード」をクリックします。
「ファイルから開始」というウィンドウが開くので、自分のPCフォルダより編集したい画像をドラック＆ドロップ。
どちらを選択しても進めますが、今回は「写真を編集」をクリックします。
※「デザインに使用」をクリックすると、プロジェクトサイズの指定をしないといけないのでちょっと面倒で･･･
使用したい画像に不要な部分がある場合はこの時点でトリミングも可能です。
トリミングする場合は「切り抜き」からトリミング個所を調整して「完了」。
「デザインに使用する」をクリックすると、画像を使用したプロジェクトが作成されます。
今回は画像のファイル容量のダウンが目的なので、編集はせずに画面右上の「ファイル」をクリック。
「ダウンロード」をクリック
この時、デフォルトではPNGファイルが設定されています。
画質の良い物が欲しければこのままでもいいのですが、容量を下げたいのでプルダウンからファイル形式を変更します。
ファイル形式がJPG(JPEG)になっている事を確認し、「ダウンロード」。
＼ 無料で出来ます／
カスタムサイズで先に画像のサイズを決めるやり方
この方法の利点は、最初から決定した大きさに合わせてプロジェクトが作成されること。
画像の使用用途が決まっていて、「このサイズの画像を使いたい」という場合に便利です。
ただし作業手順はちょっと増えます。
編集を重ねているうちに、理想のサイズから離れてしまうことを防げます。
クリックすると画像左側の状態に。そこから下部の「カスタムサイズ」を選択すると右側の状態になります。
今回は幅1200×高さ630に設定しています。
「新しいデザインを作成」をクリックして次へ進みます。
この時点で別ウィンドウが開き、まっさらなプロジェクトが作成されます。
作成されたプロジェクトに、自分のPCフォルダから直接ドラッグ＆ドロップで画像を貼り付け。サイズを調整し右下の状態に変わります。
この際作成されたプロジェクト(左上参照：作成直後の白キャンバス)からはみ出した部分がある場合、はみ出た部分は書き出しで反映されなくなります。
画像をドラッグして調整し、使用したい部分だけ反映されるようにしましょう。
あらかじめ決めたサイズなので、画像の使用段階での利便性◎
調整が出来たら、ここから書き出しの工程に。
画面左上の「ファイル」→「ダウンロード」の順番でクリックすると、ファイルの種類を選択する画面が出てきます。
デフォルトではPNG画像が推奨として選択されている為、プルダウンからJPG(JPEG)を選択します。
ファイルの種類がJPGになっていることを確認し「ダウンロード」をクリック。これで作業は以上です。
＼ 素材自体もありますよ／
作業結果
さあ、どうなった！？
571KB→52.4KBまでデータ容量を下げることに成功しました！
完成した画像がこちら
画像は粗くなってはいますが、解像度が重要かと言われればそんな事はないですし、十分ではないでしょうか。
何より、ブログの表示速度が遅くてユーザーが離脱してしまう事態になるくらいなら画質がなんだって話です。
これでもダメだったら【品質】を下げる！
もしここまで作業してみて、それでもまだ画像容量が大きすぎるという場合もあります。
そのときは、書き出しの際に【品質】を下げましょう。
ちなみにこの機能は、JPGを指定しなければ利用できないので注意してください。
上の画像にある【品質】スライダーを下げていくと、「ファイルサイズ」が大→中→小と変化していきます。
当然、下がれば下がるほど画質は悪くなりますがファイルサイズも比例してダウン。
ちなみに、一番悪い画質で書き出すと以下の右側のようになります。
流石にここまで行くとなんだかわかりませんが、水無月は良く「中」と「小」の中間程度に調整して書き出ししています。
画像容量にお悩みでしたら試してみてください。
Canvaのサイトはこちら→7500万点の素材が無料
画像容量の確認
そもそも『画像のファイルサイズ(容量)ってどこで確認するの？』という問題ですが、これ自体はかなり簡単です。
容量を確認したい画像にマウスカーソルを合わせるだけ。
すると上の画像のように、
- 画像のファイル形式「JPGファイル」
- 画像自体の大きさ「1280×670」
- サイズ「52.6KB」
- 画像のタイトル
が表示されます。
ちなみに、画像の書き出し前にどの程度の画像容量になるか確認したいところですが、これに関しては書き出してみないと分かりません。
少し面倒ですが、何度か実践するうちにある程度目星がつくようになると思うので、これに関しては慣れです。
まとめ
いかかでしたでしょうか。
今回の記事をまとめますと
- Photoshop使用での画像データ容量の圧縮は571KBまでが限界
- Canvaで同じ画像を書き出したら52.4KBまで下がる
という事になります。
もし「サイトが重い」、「画像のデータ容量を下げたい」という方がいらっしゃいましたら参考にしていただけると幸いです。
ちなみにここまでたくさんの画像を使用してきていますが、途中経過の確認のために掲載したPhotoshopでの作成画像以外は、全てCanvaにて作成しています。
画質は粗くなっていますが、気になる方は他の書き出し方式を選ぶか品質を上げてみると良いでしょう。
Canvaは基本無料で利用することが出来ます。ここまでご紹介したような、元々ある画像のデータ容量の軽量化ならば無料で十分可能です。
ちなみに、この方法で容量ダウンを実施した画像のサンプルがこちらです。クリックで拡大できます。
←右がフリー素材サイトからDLしたままの元画像
左がCanvaを使用して容量を下げた画像→
フリーサイトから取ってきた画像で作ってみました。
容量ダウン後も見た目はそれ程変わりませんね。
ちなみに有料プランにすると素材の使用制限がなくなり、便利な被写体切り抜きや画像のリサイズ機能も利用できるようになります。
PRO版のマジックリサイズ機能(画像のサイズ変更機能)は便利！
画像を貼り付けてから「大き過ぎたor小さ過ぎた」と思ったときすぐに調整できます。
Canvaのリンクを掲載しておきますので、気になる方はチェックしてください。無料で利用できます。有料プランでも30日間の無料体験がありますよ。
＼サイトで実際に確認して！ ／
感想・意見