この記事にはプロモーションが含まれています
Canvaで作った画像を、ブログやWebサイト用に”軽さ・見やすさ”で整える
Canvaや画像作成ツールで作った画像をブログやWebサイトにアップロードしようとしたとき、
- あれ…。画像が重い？
- アップロードに時間がかかってるかな？
- ページの表示が遅くなってる？
と感じたことはありませんか？
Canvaは、アイキャッチ画像・バナー・SNS画像・資料用画像などを素敵に・手軽に作れる、とても便利なツールです。
テンプレートも多いですし、文字を入れたり、色を変えたりする作業もサクサク進められます♪
一方、「作ること」と「Webに最適化して配信すること」の両立を考えるとちょっと、視点が変わってきます。
Canvaで作った画像をそのままブログやWebサイトに使うと、用途によっては
- 画像サイズが大きすぎる
- ファイル容量が重い
- 表示に時間がかかる
という状態になってしまうことがあります。
これはCanvaが悪いという話ではなくて、高画質で書き出せる＝素材として優秀だからこそ起こりやすい現象なんです 😅
この記事ではCanvaの機能を活かしつつ、さらにブログやWebサイト向けに画像を軽くする方法をご紹介します。
目次
Canvaや画像ツールで作った画像が重くなりやすい理由
Canvaや画像ツールで作った画像が重くなってしまいがちな理由は、いくつかあります。
- 画像の横幅・縦幅が大きい
- PNG形式で保存している
- 写真やイラストを多く使っている
- 背景や装飾が細かい
- 高画質のまま書き出している などなど…
Canvaの画面上では、画像がそこまで大きく見えないこともあります。
でも、実際に書き出してみると横幅がかなり大きかったり、ファイルサイズが数MBになっていたりすることがあります 😅
ブログやWebサイトに使う場合、画像の見た目だけでなく、ファイルサイズも大切です。
たとえば、画面上では同じように見える画像でも、ファイルサイズが重いとページの読み込みが遅くなる原因になります。
ブログのアイキャッチ画像や記事内画像は、必要以上に大きな画像でなくても大丈夫。
表示に必要なサイズより大きな画像にしたとしても
- 見た目の差がわかりにくい（差が出にくい）
- ページが開くのが遅くなる（画像読み込みに時間がかかる）
- サーバー容量の圧迫する（塵も積もれば…です）
- 編集画面の動作が重くなる
といった原因になりやすいからです。
大事なのは、きれいに見える範囲で、できるだけ軽くすることです。
まず確認したいのは「画像の大きさ」
Canva画像を軽くしたいとき、最初に確認したいのは画像の大きさです。
ここでいう大きさは、見た目のサイズではなく、画像の横幅・縦幅のこと。
たとえば、ブログの本文内に表示する画像なのに、横幅が3000px以上あるとなると…その画像は（ブログ内画像としては）かなり大きめです。
それぞれの目的に合わせた画像サイズとは？
ブログやWebサイト用であれば、用途に合わせて次のように考えると扱いやすくなります。
- アイキャッチ画像：横幅1200px前後
- 記事内画像：横幅768px〜1200px前後
- SNS用画像：投稿先に合わせたサイズ
- 小さな説明画像：必要以上に大きくしない
もちろん、サイトのデザインによって適切なサイズは変わります。
ただ、ブログに使う画像であれば、横幅3000px以上の画像をそのまま使う必要はあまりありません。
まずは画像を書き出す前に、
この画像は、本当にこの大きさが必要？
と確認してみるのがおすすめです。
PNG画像は重くなりやすい
Canvaで画像を書き出すとき、PNG形式を使うことも多いと思います。
（デフォルトではPNG形式が推奨されていますね。）
PNGは、文字や図形がくっきり見えやすく、透明背景にも対応している便利な形式です。
ただ、写真や複雑なイラストが入っている画像では、ファイルサイズが大きくなりやすい側面も。
どんな画像が重たくなりやすいの？
たとえば、次のような画像はPNGだと重くなりやすいです。
- 写真を大きく使ったアイキャッチ画像
- 背景にグラデーションや細かい装飾がある画像
- AI画像やイラストを使った画像
- 色数が多いバナー画像
一方、ロゴ・アイコン・透過画像などはPNGの方が向いている場合もあります。
適材適所、目的に応じた画像形式にすることが大切です 😉
Canvaなどのツールで作成した画像を、軽くする方法（おすすめの順番）
画像ツールで作ったファイルが重いときは、次の順番で確認するとわかりやすいです。
- 画像の横幅を小さくする
- ファイルサイズを圧縮する
- PNGが重いときはWebP変換を検討する
- アイキャッチ画像は比率も整える
1. 画像の横幅を小さくする
まずは、画像の横幅をブログやWebサイトに合うサイズへ縮小します。
画像の横幅が大きすぎると、それだけファイルサイズも大きくなりやすいからです。
ブログで使う画像なら、まずは横幅1920px以下。
記事内画像なら、横幅768px〜1200px前後を目安にすると扱いやすくなります。
また、簡単なイラストやあらかじめ小さく表示する予定の画像を、大きめに用意する必要もありません。
Canvaでは、最終的にダウンロード（書き出し）した画像のピクセル数が、元画像のサイズになります。
ブログ上では表示幅に合わせて縮小表示されることが多いので、「必要以上に大きく書き出さない」ことが軽量化のポイントです。
2. ファイルサイズを圧縮する
画像の横幅を整えたら、次にファイルサイズを確認 → 圧縮します。
画像圧縮すると、画像の見た目をなるべく保ちながら、ファイル容量を小さくすることができます。
ブログ用の画像は、必要以上に高画質でなくてもOKなことがよくあります。
画像のキレイさより、文章を読みやすくする方を優先させますし…。
とくに、スマホで見られることが多い画像や、記事内に複数枚使う画像は、できるだけ軽くしておくと安心です。
Canvaでは主に、「出力サイズを小さくする」「形式を変える（JPGなど）」「（可能なら）品質を調整する」といった方法で画像圧縮できます。
同じ形式・同じ縦横幅（px）のまま容量だけを落としたい場合は、画像圧縮ツール（Petanko Image など）を使ってみるのもオススメです。
3. PNGが重いときはWebP変換を検討する
PNG画像が重いときは、WebP形式への変換も検討できます。
WebPは、Web向けに使いやすい画像形式です。
どちらかというと、JPGやPNGよりもファイルサイズを軽くしやすいので、ブログやWebサイトの表示速度に気をつけたい場合に、向いています。
どうにも画像が軽くならない場合は、まずはWebp変換を試してみて
- 見た目に問題がないか
- 文字が読みにくくなっていないか
- ファイルサイズが軽くなったか
を確認してみるのも一つの手です。
Petanko Image のWebP変換ツールでは、JPG・PNGなどの画像をWebP形式に変換できます。
4. アイキャッチ画像は比率も整える
Canvaで作った画像をブログのアイキャッチに使う場合は、画像の比率も確認しておくと安心です。
たとえば、ブログのアイキャッチ画像では、16:9のような横長の比率が比較的、使いやすいです。
画像そのものはきれいに作れているのに、表示される場所・比率が合っていないとそれだけで、魅力が減ってしまいます…。それは少し、もったいないです。
CanvaやWeb画像ツールで作った画像をそのまま使う前に、ブログやWebサイトで使いやすい比率に整えておくと、あとから見た目を調整しやすくなります。
Petanko Image の比率で切り抜きツールでは、16:9・4:3・1:1など、用途に合わせた比率で画像を切り抜けます。
Canva画像をブログに使う前のチェックリスト
Canvaで作った画像をブログやWebサイトに使う前にチェックしたい項目を洗い出すとだいたいこんな感じです。
- 画像の横幅は大きすぎないか
- ファイルサイズは重すぎないか
- PNGのままで良い画像か
- WebPに変換した方が軽くなりそうか
- アイキャッチ画像の比率は合っているか
- スマホで見ても問題なさそうか
- 画像の文字が小さすぎないか
- アップロード前に圧縮しておいたか
全部を毎回確認したいですが、それはちょっと…いやかなり、面倒です 😅
なのでまずは、
横幅を確認する → 圧縮する → 表示を確認する
この3つだけでも気にかけておくと、かなり変わってきます。
ブログ記事は積み重ねるものなので、画像一つ一つも「塵も積もれば山となる」で、あとから効いてきます。
慣れてきたら、WebP変換や比率調整も加えていくと、ブログ画像がかなり扱いやすくなりますよ 😉
Petanko Imageなら、ブラウザだけで画像を整えられます
Petanko Image では、画像ファイルを外部サーバーへ送信せず、手元のブラウザだけで画像を軽くしたり、形式を変換したりできます。
また、Canvaなどのツールで作った画像をブログやWebサイトに使う前に、次のような調整ができます。
- 画像を縮小・圧縮する
- WebP形式に変換する
- 16:9や1:1などの比率に切り抜く
- ファビコン用画像を作る
- 白背景を透明化する
画像をそのままアップロードする前に、Petanko Image で一度整えておくと、ブログやWebサイトに使いやすくなります 👍
画像をアップする前に、おすすめのツール
-
ツールで作成した画像を軽くしたいときに、おすすめです。
-
PNGやJPGをWeb向けのWebP形式に変換したいときに使えます。
-
アイキャッチ画像やサムネイル用に比率を整えたいときに便利です。
まとめ
Canvaで作った画像が重いときは、まず画像の横幅・保存形式・ファイルサイズを確認してみましょう。
画像が重くなりやすい原因は、画像の大きさやPNG形式、写真や装飾の多さなどが重なっていることが多いです。
ブログやWebサイトで使う画像は、必要以上に大きくする必要はありません。
Canvaで「作りやすく・きれいに」整えたうえで、
- 画像の横幅を整える
- ファイルサイズを圧縮する
- PNGが重い場合はWebP変換を試す
- アイキャッチ画像は比率を整える
という流れで仕上げると、かなり使いやすくなります 😀
最初は少し手間に感じるかもしれません。
でも、アップロード前にひと手間かけておくと、ページの表示速度やサイト管理の面でも安心ですよ 😉
Canvaで作った画像をブログやWebサイトに使う前に、ぜひ一度、画像のサイズと重さを見直してみてください。
それでは！