今回は、「SWELLの吹き出しに最適な画像サイズ」について調査、実際に画像をアップロードして検証したので紹介します。
結論から言うと、画質と容量のバランスがいい「160px〜200px」がおすすめです。
諸説あるので、一例として参考にして頂ければ幸いです。

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


吹き出しに最適な画像サイズ
SWELLの公式サイトで吹き出しの画像サイズについて調べたところ、特に記載がありませんでした。
参照:管理も簡単!SWELLのふきだし機能の使い方 | WordPressテーマ SWELL
吹き出しの最適な画像サイズを調査
そこで、SWELLに関係なく「吹き出し、画像サイズ」で検索、上位サイトの見解を調べました。
- 160px〜200pxがおすすめ。
- 600px以上は重くなるのでやめた方がいい。
- 75pxで十分。
160px〜200pxがなぜおすすめされていたかと言うと、「CocoonというWordPressテーマの製作者わいひらさんのサイトで推奨されているから」のようです。
実際に検証していたサイトによると、75pxくらいで問題なく、50px以下だと画質が荒く感じるとのこと。
最近のSEOはサイトスピードをかなり重要視しているので、吹き出しの画像サイズはできるだけ小さくしたいところです。
実際に検証
実際に吹き出しの画像を検証していきます。
すでに吹き出し用のアイコン画像がある場合、WordPressのメディアライブラリで画像の縮尺を変更できます。
- WordPressのメディア、ライブラリを選択
- 画像を選択
- 画像を編集をクリック
- 縮尺を変更
実際にやってみると、、、



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



157pxだとこんな感じ。
※JPEG、157px
早速ぼやける原因を調べます。以下のサイトを参考にしました。
参照:Webサイトの画像ぼやけていませんか?綺麗な画像の表示方法 | カンデザWeb
品質を落とさずに画像サイズを小さくする方法 – Shutterstock Blog 日本語
- ファイル形式が正しくない(PNG、JPEG)
- 画像が引き伸ばされ画質が低下
試しにMacの標準ツール(プレビュー)で画像サイズを縮小してみます。
※画像をリサイズするツールは色々あります。
Macの「プレビュー」でイメージをサイズ変更する/回転する/反転する – Apple サポート
カスタムだと320×320が選べる一番小さいサイズでした。



ファイル形式もPNGのままにしたおかげかくっきり。
※PNG、320px
幅と高さを1:1にして更にリサイズ。



320pxと比べると粗い感じはありますが、十分です。
※PNG、157px
幅と高さを0.5:0.5にして更にリサイズ。



PNGでもやや粗い。
※PNG、79px
結局、SWELLで吹き出しの画像サイズはどれがおすすめ?
結局、吹き出しの画像サイズはどれがおすすめか?
サイトスピードを重視するなら75pxもありですが、バランスがいい「160px〜200px」がおすすめです。
320px | PCでも非常にくっきりして綺麗。 |
160px〜200px | 画質も綺麗。PCでも違和感なし。拡大すると荒さが目立つ。 |
75px | 画質が悪い。 |


吹き出しのイラストは依頼できる
このアイコンはココナラで「ふちさん」という絵師の方に依頼しました。
いらすとやなど無料で使える吹き出しの画像もありますが、オリジナルのアイコンがあるとブログを書くモチベーションも上がります。



自分で作成するのは難しいという方はココナラ
\ ココナラ

