Bloggerにアップロードした画像がぼやけてるわけ

今回は, Bloggerにアップロードした画像がぼやけたりしたので, 何故ぼやけるのだろうかと調べたお話です.

bloggerにアップした画像がぼやけるわけ 結論

簡単に言えば解像度の問題でした. (当たり前だろってツッコミはなしで.
bloggerから画像をimportする際には, こんな感じのコードが出る.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-04-28+23.20.01.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2018-04-28+23.20.01.jpg" width="640" height="316" data-original-width="1600" data-original-height="790" /></a>

実際の画像はこちら.

これ, クリックしないで見ていると分かるが, 相当ぼやけてる.

元の画像はこんなにぼやけてないのに…

なので, ggってみたらこちらの方より

The s320 is your resolution and it determines the quality depending on the size of the image. Notice how the link has a value of s1600, so when you click on the image it appears bigger and in better quality. An image with the width of 320px will look fine with s320. An image with the width of 800px will look awful with s320.

引用元 : HOW TO FIX BLURRY IMAGES ON BLOGGER

と書いてあった.
これだけ引用しただけじゃわからないと思うけど, 要はURLの中にs320とか書いてあるからそこで解像度が分かるらしい.
※ 赤色の部分

<img border=“0” src=“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2018-04-28%2B23.20.01.jpg” width=“640” height=“316” data-original-width=“1600” data-original-height=“790” />

赤色の部分の値を高くすれば, 解像度が上がる. ちなみにs<数字>であればなんでも表示されるので, s700なり指定すれば良い.
ちなみに, 自分はs1000にしている.

<a href=“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2018-04-28+23.20.01.jpg” imageanchor=“1” ><img border=“0” src=“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTL8vIuvvWAP1tD0uhU6sTmr5ukROvTcNqcoim1RKvvVHQqCI-ERRitqjCERnJA_AHD2gvn5Ie4IgKij0xl7DYcwPUGqw2WLQft6wrbJRNpy1xsTZUAu2res1v2GjuLz0EAOsKEfFXK8d/s1000/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2018-04-28%2B23.20.01.jpg” width=“640” height=“316” data-original-width=“1600” data-original-height=“790” /></a>

圧倒的に文字が見やすくなった.

参考文献

• HOW TO FIX BLURRY IMAGES ON BLOGGER