読者です 読者をやめる 読者になる 読者になる

【はてな】はてなブログにアップする画像の劣化をなんとかしたい

ここ最近、はてなブログにスマートフォンのスクリーンショットをアップする機会が多くなりました。

その都度、記事内に表示される画像の粗さが気になっていて、記事にあるスクリーンショットの画質の悪さは、思い出を振り返る上でも、とても残念に思っています。

今までは比較対象がなかったので、仕方のないことと半ば諦めていたのですが、Twitterにアップした画像と、はてなフォトライフにアップした画像が並ぶと、画質の違いが歴然で、さすがになんとかならないのかと検証してみました。

 

いくつかの方法で改善を試みた

今回検証する画像をTwitterにアップし、この画質に近づけるのを目標にしてみます。

 

はてなフォトライフの「サイズ設定」の見直し

f:id:fake_fake:20140201203902p:plain

この画像は、はてなフォトライフのサイズ設定で、初期設定の450ピクセル(長辺)でアップしたものです。

f:id:fake_fake:20140201172215p:plain

上の画像は、画像サイズを600ピクセル(長辺)に変更してみました。 

表示サイズを大きくすると、少しハッキリした気がします。(大きくしたのだから当たり前か…)

 

元画像のサイズ変更 

元画像の720*1280を、変更したはてなフォトライフの600ピクセル(長辺)に収まるよう、画像の縦を500ピクセルにリサイズ。

f:id:fake_fake:20140201194047p:plain

かなりきれいに表示されました。

 

保存形式の変更

元画像の保存形式ををpngから、jpgに変更してみます。

f:id:fake_fake:20140201173146j:plain

なるほど…わからん…。 

しかし、pngで505KBだった画像サイズが、jpgでは225KBに減り、およそ半分になりました。

 

さらに縦を500ピクセルにした先ほどの画像を、pngからjpgに変更。

f:id:fake_fake:20140201195502j:plain

png時の画像サイズは151KBでしたが、jpgに変更後は65.3KBまで減りました。

 

f:id:fake_fake:20140201194047p:plain

f:id:fake_fake:20140201195502j:plain

左がpngで右がjpgですが、画質の変化はぼくには全くわかりません。

 

まとめ

はてなフォトライフの設定から、画像サイズを大きく変更し、サイズに収まるようリサイズしてからアップすると、かなりきれいになった感じがします。

はてなフォトライフの画像サイズの変更は、以下の画像を参考にしてください。

f:id:fake_fake:20140401105734j:plain

 

いろいろと検証をして、フォトライフで設定されたサイズから溢れると、リサイズされ、そのサムネイルがブログに表示されるのでは、という見解になりました。

また保存形式を「png」から「jpg」へ変更すると、画質の変化は感じられずに、保存サイズがほぼ半分になることもわかりました。

参考になったリンクです。

どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。|ギズモード・ジャパン

 

前々から気になっていたことだったので、ようやく納得できる対処法を見つけられてほっと一息です。

調べたり、検証しながら得るものがたくさんあって、また少し脳ミソが賑やかになったかと思います。  

 

コチラもどうぞ