スマホでWordPressのロゴ画像が粗くなる問題を改善する方法

どうも、粗い画像は嫌い。ノブトヨム(@nobutoyomu)です。

オリジナルでタイトルロゴも作り、手間隙かけて作ったブログ。ところが、スマホで自分のブログを見てみるとタイトル画像が粗くなってしまう。

「パソコンでは綺麗に表示されているのに何で?」と疑問に思っている方もいるのではないでしょうか?

今回は、PCでは綺麗に表示されるのに、スマホでは画像が粗くなってしまう状況に悩んでいるWordPress利用者へ、簡単な対処法について紹介します。

そもそもスマホで画像が粗くなるのは何故?

これはスマホやタブレットなどのディスプレイが高精細になったことが原因です。

レスポンシブデザインでは、パソコンで表示していた画像を引き伸ばすためビットマップ画像(jpeg,png)は粗さが顕著に出るようになってしまいます。

今回はスマホで画像が粗くならないよう、SVGデータというものを利用して改善していきます。

スポンサーリンク

SVGデータで作るロゴ画像のメリット・デメリット

SVGデータはロゴ画像などを作る際に使用するIllustratorで”別名で保存”のファイル形式を変更するだけで簡単に作ることが出来ます。

このSVGデータが用意出来たら、今度は利用する際のメリットとデメリットについて確認していきましょう。

SVGデータのメリット

160508-svg-logo03

SVGデータはビットマップ画像とは違い、ベクター画像です。

ベクター画像はビットマップ画像に比べて曲線の描画が滑らかで、拡大しても粗くなることを防ぐことが出来ます。

また、SVGデータは容量が小さいのでWebページのデータ容量を節約することが出来ます。

大きなメリットとして曲線の美しさとファイル容量の小ささが魅力のSVGデータですが、勿論デメリットもあります。

SVGデータのデメリット

SVGデータはブラウザの対応状況が完璧ではありません。

最新のブラウザではほとんどが対応していますが、古いブラウザでは対応していないことがあり表示出来ない可能性があります。

また、SVGデータはデフォルト状態のWordPressでサポートされていないため、利用するのに一手間加える必要があります。

WordPressでSVGデータを扱うためのプラグイン

160508-svg-logo02

メリット・デメリットについて確認したら、今度は実際にWordPressでSVGデータを取り扱ってみましょう。

実はWordPressではプラグインをインストールするだけでSVGデータを扱えるようになります。

SVGデータを扱えるようにするプラグインで一番簡単で扱いやすいのが「Scalable Vector Graphics」です。

インストールはプラグインの新規追加で検索すれば出てきたのをインストールするか、上記のリンクからプラグインをダウンロードして手動でインストールして下さい。

このプラグインは設定も必要なく、インストールして有効にするだけでSVGデータを普通の画像データのように取り扱えるようになります。

なのでインストールして有効にしたら、一度メディライブラリーにSVGデータを取り込みロゴ画像に設定してみましょう。

最後に僕のブログでpngで用意したロゴを撮った画像を載せておきます、今のSVGのロゴと比較して参考にしてみてください。

160508-svg-logo-04

まとめ

今回はWordPressでSVGデータを取り扱うための記事でした。

ロゴ画像だけ滲むと、他の文字などと差が出てしまいブログ全体が不格好になってしまいますよね。

WordPressならプラグインの導入だけで簡単に取り扱うことが出来るので助かります。

スマホなどでロゴ画像が粗くなる、ボヤけるといった悩みをお持ちの方は是非試してみてください。

それでは、お疲れ様でした。

[amazonjs asin=”4844338161″ locale=”JP” title=”Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術”]