hi(*’ω’*)
まゆさんです♪FF14やモンスターハンターなどゲームのスクリーンショットを撮影・加工してSNSに掲載することが好きなゲーマーです。
今回の記事は、ブログに画像を載せる時の選び方、画像圧縮・ブログに掲載するときの注意点をご紹介します。合わせて私がいつも利用している画像圧縮サイト＆ソフトも掲載しました。
ご自身のブログに掲載した画像が汚くて困っているという方、画像圧縮後も画質があまり落ちないようにしたいと思っている方、ぜひ参考にしていただけたらと思います。
画像圧縮が必要な理由
私はブログでかなり綺麗な画像を掲載することに力をいれています。
それは私がInstagramでの活動がメインで、常に被写体が綺麗で可愛らしく見えるように考えいてゲーム内スクリーンショットを撮影しているからです(´っ･ω･)っ
残念ながらInstagramでは画像をアップしても画質が落ちてしまうんですよね(>_<)
それでも同じ趣味の方々と、可愛い自分達のゲームキャラのスクリーンショットを掲載しあい、楽しく交流させていただいています。
Instagramの場合、主に携帯でしか見ませんし、画像も小さいのでそれ程劣化が気になる事はありません。しかし、Instagramだけでは説明しきれない部分もあるんですよね。
以前ブログ記事にしましたが、Instagramのフォロワーさんからの色味調整などのお問い合わせに対して、どのように自分が画像を編集しているかとか。
そのような場合、ブログではInstagramで掲載したスクリーンショットについて説明しきれなかった事を追加して説明したり、載せきれなかったスクリーンショットを掲載したり、装備の名前を記載して、見てくれた方がそのスクリーンショットがどんな装備を使用しているかが分かるようにしています。（すべてのスクリーンショットに対してではありませんが・・・。）
ブログの場合、撮影したスクリーンショットは綺麗なまま掲載できますが、それではかなり画像のファイルサイズが大きくなって、読者の方が閲覧するときに、大変重たくなってしまう可能性があります。そのため画像の圧縮は、読者の方が読みやすくするためにも、とても大切な作業と言えるのです。
画像を圧縮する時とブログ掲載時の注意点
ブログを始めたばかりだと画像の選び方がよく分からなくて、自身のブログに掲載した画像が荒くてきたなく見える！！なんてこともありますよね。
そんな時はまず元々の画像の容量・ファイルサイズをチェックしてみましょう。
元々300×400、50KBくらいしかない画像をこれよりも大きく掲載しようとすれば画像は当然引き伸ばされて汚くなります。
これはインデックスのサムネイルなどでも起こることで、元々サイズが小さい画像をアイキャッチとして使用した場合、サムネイルの方が設定サイズが大きいと、画像が引き伸ばされてピンボケして見えるという現象が起こってしまうことがあるんですよね。
例えば、インデックスのサムネイルサイズが500×500で設定されている（これは使っているスキンによる？）のに、400×400などのそれよりも小さい画像をアイキャッチに設定した場合、アイキャッチをそのままサムネイルに使用するブログは、サムネイル画像が引き伸ばされ、ぼやけてしまう場合がある。縦横どちらかのサイズが設定サイズよりも小さい場合にもピンボケは起こりうる。
そのため、画像の美しさを気にするのであれば、あまりサイズの小さい画像を使用することはおすすめできません。
アイキャッチは1200×630が推奨されていると言われています。
画像の見栄えを気にするのであればPC画面でも見ることを考え、圧縮後の長辺サイズを1200以上に合わせて圧縮すると良い思われます。
1200以上なんてブログにそのまま掲載したら大きすぎない？と思いますが1200で圧が強いと感じるなら掲載する時に半分くらいの長辺600くらいで掲載すれば良いわけです。
例えば次の画像。こちらはFF14のキャラクターのスクリーンショットを撮影して長辺1280に合わせて画像圧縮したものです。
今ご覧いただいている画像は圧縮後サイズ1280の50％設定をして掲載していますので長辺512くらいになっています。
こちらの元々の画像サイズが3802×4752 容量が10.6Mなのですが、当然こんなに大きな画像をブログに貼り付けると超重すぎて読む方が大変な思いをするわけです。
そこで画像を圧縮するサイトを利用し長辺1280、PNGからJPEGに変換設定し、JPEG画質を80から82にします。このJPEG画質は画像の荒さとファイルサイズを見ながらお好みで。（使っている画像圧縮サイトは後ほどご紹介します）
そうするとファイル容量が114KBまで落ちるけれど、圧縮前とほぼ変わらない綺麗な画像を掲載することができます。
元々大きなサイズの画像を小さく圧縮する分には圧縮後も綺麗な画像が出来上がります。そして元々大きな1280の画像を小さく掲載する分には綺麗な画像が掲載できます。
注意してほしいのは、元の画像サイズよりも大きく表示しようとしてしまったがために、画像が引き伸ばされて荒くなったりぼやけてしまうことがあるということ。
参考になるか分からないですが、画像を3種類掲載しておくので見比べてみてください。
画像サンプル3種類
ブログに掲載する画像が荒かったりぼやけてしまうという方は、まずご自分の使用する画像サイズを確認し、元サイズより大きいサイズで掲載していないか調べてみましょう。
人気の画像圧縮プラグイン＆ウェブサイトが合わなかった
ブログ運営に画像掲載は欠かせませんし、画像圧縮は閲覧スピードを快適にするためにも欠かせません。
私もネットで良い圧縮プラグイン＆ウェブサイトは無いか探してみました。しかし、私がネットで検索した時に、お勧めとしてヒットするプラグイン＆ウェブサイトは、私の思うような圧縮ができませんでした。
このプラグイン＆ウェブサイトは、かなりファイルサイズを圧縮してくれるのですが、スクリーンショットをブログに張り付けている作業中に気付いてしまったんです。
画像がとても荒くなっている！！！(; ･`д･´)
ぱっとみても分かるくらい画質が劣化していました。もうびっくりしました。ファイルサイズが小さくても画質がこれだけ落ちてしまうとなると、ブログには掲載できないと思ったくらいでした。
でもそのプラグイン＆ウェブサイトは、圧縮しても画質が落ちないと有名だったんですよね。
原因は分かりませんし、私だけかも知れないので、画質が落ちていない方もいるのかも知れません。
お勧め画像圧縮サイト
私は、他に画質が落ちなくて圧縮もしてくれるサイトを探し、同時に、画像の保存形式について再度勉強しなおしました。
今までどこのサイトでみたのか忘れたのですが、画像はpng保存がいいと記憶していたので、保存形式は何が良いのかもう一度確認しました。その結果、pngで保存するとかなりファイルサイズが大きいので、jpg保存にすることにしました。参考にしたサイトのリンクを下に貼っておきますね。
背景透過をしなければ、jpg保存しても色味的には大丈夫だし、ファイルサイズもかなり小さくなることが分かりました。小さいと言っても先に上げた人気圧縮サイトの圧縮したサイズよりは大きいです。
圧縮サイトとしては下記のサイトが簡単で綺麗にしあがりました。私は普段は上のウェブサイト、文字をくっきりさせたい時は、PCにインストールするタイプの縮専を使用しています。ちなみにどちらも無料で使用可能です。
JPEGに変換して圧縮したとしても、画像に使われているカラーが多い場合（色とりどりで美しい画像）カラーがあまりないもの（黒や白などシンプルな画像）に比べるとどうしても圧縮後のファイルサイズは大きくなってしまいます。
画像の比較
実際に圧縮してどのくらい変化があったのかを見ていきましょう。もしかしたら、人によっては気にならない感じかもしれませんが、画像を大きく拡大表示した場合、画質が落ちているのはかなり目立ってしまうと思います。
これは始めに使っていたTinyPingと元の画像の比較です。左がTinyPingで右が元画像です。ぱっと見た感じ分からないかもしれませんが、黄色く光っているところの部分をみてもらうと、左の画像は淵が荒くなっているのが分かりますか？これだとブログに掲載した時に画像の荒さが目立ってしまうんですね。
次に私が使用しているウェブサイトでの圧縮です。
今度は左が元画像、右が私が使用しているウェブサイト。先ほどと同じ場所、黄色く光っている部分を見ていただくと、右のjpg画像は左の元画像と殆ど変わりありません。
ファイルサイズもpng保存をするよりかなり小さくなります。（TinyPingの場合はpng保存ですが、かなりファイルサイズを小さくしてくれるので、TinyPingの圧縮には叶わないかも知れません。）
次はTinyPingの圧縮後と私が使用しているウェブサイトのjpg画像を比較します。
分かりにくいのですが左がTinyPingの画像で右がjpg。左は黄色くひかっている部分の淵が荒くなっていますが、右は柔らかく光っています。
文字をくっきり表示したい時の便利ソフト
現在使用している圧縮ウェブサイトは、画質も綺麗でJPEG画質も調整できるので、ファイルサイズが大きめの時は80、小さいときは９０にして使用しています。
しかし、欠点もあって、細かい字がぼやけてしまうんですよね。png保存にしたほうが文字はくっきり見えて良いのですが、ファイルサイズが気になるので、文字をくっきりさせたい場合は、先ほどリンクを貼った無料ソフトの縮専を使用しています。
縮専には画像くっきりというオプションがあるので、それを使用する事によりかなり文字がくっきり見えるようになります。
文字が小さいのでちょっと分かりにくいかも知れないのですが、一応比較画像をあげておきます。
上の画像は左が元のpng画像で右が縮専です。縮専だと圧縮してjpgにしても、文字がぼやけずくっきりした状態になります。
この上の画像は左が元画像、右が先ほど紹介したウェブサイトでのjpg圧縮後。少しぼやけて見えるんですけど分かりますか？なんだかピントがしっかり合わないなという印象をうけるんですよね。
このように私は、文字をくっきり見せたい時は縮専を使用するようにしています。
場合によっては画像だけでも表情（とくに瞳）がぼやけて見えてしまう時は、縮専で圧縮してみて、画質を確認してからブログにアップするようにしています。
縮専で画像くっきりで圧縮すると、稀に背景の細かい目地みたいなのが浮き出てしまう事があるので、圧縮後の画像を見ながら、ウェブサイトの圧縮が良いのか、縮専で良いのか、JPEG画質は８０まで落としても画質がそれほど落ちないか等を確認しながら仕上げていきます。
また、縮専のほうが圧縮後、若干ファイルサイズが多きいので、普段は先ほど紹介したウェブサイトを利用して、少しでもファイルサイズを小さくするようにしています。
まとめ
今回の記事は画像圧縮サイトのご紹介でした。
TinyPingも悪いわけではなく、私が画質重視のため、圧縮後の画質がどうしても自分のブログスタイルに合わなかったというだけの事です。
画像よりもファイルサイズを重視されたい方には最適なプラグイン＆ウェブサイトだと思います。
私は画像重視のブログサイトを運営しているので、時間はかかりますが1枚ずつ圧縮し、スクリーンショットの画質とファイルサイズを確認しながらブログにアップするようにしています。
今の所、この圧縮ウェブサイトとソフトには十分満足しています。
追記：2022年1月現在、PCではなくiPadでブログ運営をしておりますので、こちらの圧縮ウェブサイトのみ利用しております。
私と同じように、画像重視のブログサイトを運営されている方で、納得のいく圧縮サイト＆ソフトをお探しの方は是非紹介したサイト＆ソフトを試してみたください。
掲載した画像では、はっきり違いが分かりにくいですが、ご自分の画像を圧縮して比較すると分かりやすいかもしれません。
アイキャッチサイズ1200×630が推奨されている理由が詳しく知りたい方はこちらのサイトをご覧ください。
それでは今回はこの辺で♪
see you(*´▽｀*)
