この記事を読むのに必要な時間は約 6 分です。
WordPressで記事内に挿入する画像形式といえば、PNG・JPEGがほとんどですよね。特に、PNG画像を「より鮮明なモノにしよう」と、すると画像のサイズを大きめに作り、後からCSSでサイズ調整をする。
というような手間のかかる問題があったり、画像のファイルサイズが大きくなることで、表示速度にも何かしら影響を及ぼすことも無くはありません。
こんなことを考えないといけない理由は「ボヤける」からです。
画像を伸縮させてもボヤけない+画像のファイルサイズが小さい
そんな良いとこ取りできるのがSVG画像です。
下の画像は、簡単にPNG画像とSVG画像を比較したものです。
中央上部にあるシンボルは一見キレイに表示されているように見えると思います。
しかし、アップにすると(画面左側)PNG画像の方はボヤけ、(画面右側)SVG画像はどれでけ伸縮させてもボヤけません。
ワクワク
WordpressにSVG画像をアップロードする方法
冒頭でも言いましたが、WordpressではSVG画像をアップロードすることはできません。
だから、「Safe SVG」というプラグインをインストールしてSVG画像がアップロードできるようにします。
Safe SVG
インストールの方法は、Wordpress管理画面からプラグイン→新規追加へ。そこにある検索バーに「Save SVG」と入力すればこのプラグインが出てきます。
あとはインストール→有効化を選択すれば完了です。
設定などはなく、有効化するだけでPNG・JPEG形式と同じ方法で画像がアップロードできるようになります。
気になる
SVG画像をどこに使用しているのか?
このブログでは計3か所に、SVG画像を用いています。
- トップページ
- カテゴリー固定ページ
- ロゴ
1.トップページにはアニメーションを付属したSVG画像を使用しています。
2.カテゴリーページのシンボルイメージにSVG画像を使用しています。
3.ブログのロゴにSVG画像を使用しています。
こちらの記事では、SVG画像で簡単なアニメーションが作成できる方法について書きました。良ければ参考にしてくださいね。
