canvaが便利だけど画像重いから使い方に注意だ。

今朝からしとしとと雨。秋って降水量多いのかな？

今日は無料画像編集ウェブサービスcanvaについて。

canvaの使い方

サルワカさんで詳しく説明されています。記事書くの上手すぎですな。

PC版「Canva」の使い方とデザインの基本【初心者向け】

チラシやポスター、バナーなどを簡単に作れるデザインツール「Canva（キャンバ）」の使い方を分かりやすく解説しました。ショートカットやテクニックなども紹介しています。

canvaで作った画像

canvaでどんな画像が作れるのか見てみましょう。

フレームを利用して写真を２つ使っています。中央画像は画像加工してクラシックな雰囲気を出してみました。

永久保存版　というアピールをしたくてそれっぽい素材を使ってみました。デザイン性の高い素材がすぐ使えるのがいいですね。

イラスト系画像はあっという間に作れます。素材はイラストAC。

canvaで作った画像は重い！

デザイン面は操作性も含めて100点満点ですが、保存される画像が重いのが難点。

幅640ピクセルで１画像200kb前後のファイルサイズになったり。

画像サイズが重いとページ表示速度が遅くなってしまいますのでどうしたら重くなるのか、どうしたら改善出来るのか？　をご紹介していきます。

canvaの保存ファイル種類

PNG、JPG、PDFの３種類から選べます。デフォルトではPNGになります。

PNGとJPGを比較すると

１．PNGのほうがJPGよりも高画質に保存されますがファイルサイズが重い。（PNGは背景透過が可能ですがcanva有料版のみ対応）

２．イラストをJPG保存すると圧縮率によってはノイズが出る。

という特徴があります。

イラスト系画像の保存

JPG（61KB）

PNG（66KB）

画質の違い

JPGで保存した画像は、文字まわりにノイズが入っています。背景もくすんでいます。

ファイルサイズの違い

PNGもJPGも両方同じ程度。背景が単色なのでファイルサイズが軽くなっています。

背景を外したら

PNG（56KB）

背景を消したら、ほんの少しだけ軽くなりました。

イラスト系画像の保存結果

背景がシンプルなイラスト系画像ではPNGで保存するのがおすすめ。JPGだとどうしても文字がにじみます。

写真系画像の保存

JPG（279KB）

PNG（489KB）

画質の違い

じっくり見ても画質の違いは分かりません。

ファイルサイズの違い

写真画像は、随分差が出ました。

JPG　279KB

PNG 489KB

写真系画像の保存結果

写真系画像はJPGで保存するべきです。

写真・イラストミックス画像

写真データが少なくて文字が入った場合はどうでしょうか。

JPG（42KB）

PNG(73KB)

JPGでは、文字とグラスの輪郭がにじんでいます。PNGはキレイに出力されています。

ファイルサイズは、JPGが軽いです。

このような画像の場合どちらを選ぶかは画像の重要度、サイトのコンセプトによって選べばよいと思います。

canvaの画像が重いときには TinyPNG

TinyPNGという無料画像圧縮サービスがあります。これを使うとJPGとPNGの画質を出来るだけ保ったままファイルサイズを60～85％ほど縮小することが可能です。

画像の圧縮例

JPGの場合

JPG（155KB）

圧縮後のJPG（24KB）

PNGの場合

PNG（321KB)

圧縮後のPNG（80KB）

イラスト系画像の圧縮例

PNG（82KB)

圧縮後のPNG（27KB）

まとめ

イラスト系画像

PNG　で保存

写真系画像

JPG　で保存

イラスト＆写真ミックス画像

ファイルサイズを小さくしたいならJPG、画質をよくしたいならPNG

画像圧縮

TinyPNG

GTmetrixなどのページ速度測定ツールで見ても画像ファイルサイズの重要度は高いです。canvaの使い方も上記の基本を覚えておけばファイルサイズと画像品質を適度に保存できます。

表示速度が早くなるとコンバージョン率も高くなるというデータもありますので画像サイズに気をつけてみてはいかがでしょうか。