MENU
メンテナンスのお知らせ

【SWELL】吹き出しに最適な画像サイズを調査、検証してみた

吹き出しのイメージ画像

今回は、「SWELLの吹き出しに最適な画像サイズ」について調査、実際に画像をアップロードして検証したので紹介します。

結論から言うと、画質と容量のバランスがいい「160px〜200px」がおすすめです。

諸説あるので、一例として参考にして頂ければ幸いです。

メモ的な記事内容になっていますので、ご了承お願い致します。

今回のテーマは、これ(吹き出しの画像サイズ)です→

目次

吹き出しに最適な画像サイズ

SWELLの公式サイトで吹き出しの画像サイズについて調べたところ、特に記載がありませんでした。

参照:管理も簡単!SWELLのふきだし機能の使い方 | WordPressテーマ SWELL

吹き出しの最適な画像サイズを調査

そこで、SWELLに関係なく「吹き出し、画像サイズ」で検索、上位サイトの見解を調べました。

検索上位5サイトの見解
  • 160px〜200pxがおすすめ。
  • 600px以上は重くなるのでやめた方がいい。
  • 75pxで十分。

160px〜200pxがなぜおすすめされていたかと言うと、「CocoonというWordPressテーマの製作者わいひらさんのサイトで推奨されているから」のようです。

実際に検証していたサイトによると、75pxくらいで問題なく、50px以下だと画質が荒く感じるとのこと。

最近のSEOはサイトスピードをかなり重要視しているので、吹き出しの画像サイズはできるだけ小さくしたいところです。

実際に検証

実際に吹き出しの画像を検証していきます。

すでに吹き出し用のアイコン画像がある場合、WordPressのメディアライブラリで画像の縮尺を変更できます。

WordPressで画像の縮尺を変更する方法
  1. WordPressのメディア、ライブラリを選択
  2. 画像を選択
  3. 画像を編集をクリック
  4. 縮尺を変更

実際にやってみると、、、

あれ、めっちゃぼやけてる。
※JPEG、75px

157pxだとこんな感じ。
※JPEG、157px

早速ぼやける原因を調べます。以下のサイトを参考にしました。

参照:Webサイトの画像ぼやけていませんか?綺麗な画像の表示方法 | カンデザWeb
    品質を落とさずに画像サイズを小さくする方法 – Shutterstock Blog 日本語

ぼやける原因
  • ファイル形式が正しくない(PNG、JPEG)
  • 画像が引き伸ばされ画質が低下

試しにMacの標準ツール(プレビュー)で画像サイズを縮小してみます。
※画像をリサイズするツールは色々あります。

Macの「プレビュー」でイメージをサイズ変更する/回転する/反転する – Apple サポート

カスタムだと320×320が選べる一番小さいサイズでした。

ファイル形式もPNGのままにしたおかげかくっきり。
※PNG320px

幅と高さを1:1にして更にリサイズ。

320pxと比べると粗い感じはありますが、十分です。
※PNG、157px

幅と高さを0.5:0.5にして更にリサイズ。

PNGでもやや粗い。
※PNG79px

結局、SWELLで吹き出しの画像サイズはどれがおすすめ?

結局、吹き出しの画像サイズはどれがおすすめか?

サイトスピードを重視するなら75pxもありですが、バランスがいい「160px〜200px」がおすすめです。

320pxPCでも非常にくっきりして綺麗。
160px〜200px画質も綺麗。PCでも違和感なし。拡大すると荒さが目立つ。
75px画質が悪い。

吹き出しのイラストは依頼できる

このアイコンはココナラで「ふちさん」という絵師の方に依頼しました。

いらすとやなど無料で使える吹き出しの画像もありますが、オリジナルのアイコンがあるとブログを書くモチベーションも上がります。

自分で作成するのは難しいという方はがおすすめです。

吹き出しのイメージ画像

この記事が気に入ったら
フォローしてね!

シェア・URLをコピー
  • URLをコピーしました!
  • URLをコピーしました!
目次