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

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

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

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

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

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

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

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

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

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

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

実際に検証

画像サイズが大きいとページの表示速度が落ちるので、吹き出しの画像サイズはできるだけ小さくしたいところ。

実際に吹き出しの画像サイズと解像度を検証していきます。

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

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

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

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

試しにMacの標準ツール（プレビュー）で画像サイズを縮小してみます。

※画像をリサイズするツールは色々あります。

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

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

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

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

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

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

画質を重視するなら320pxもありですが、ページの表示速度を考慮した場合、バランスがいい「160px〜200px」がおすすめです。

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

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

この記事で使用しているアイコンは、ココナラで「ふちさん」という絵師の方に依頼したものです。

いらすとやなどでイラストを無料で手に入れることもできますが、吹き出しにオリジナルのイラストを使うことで、より独自性を出すことができます。

「イラストを自分で作成するのは難しい」という方は、ぜひお試しください。

【PR】サービスを探す