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

開運&SIMPLE LIFE

不要なものを排除して、身も心も健やかに

【超初心者のブログカスタマイズ】記事中の画像を圧縮して、離脱率を下げよう!! PC編

先日、私の師匠がこんな記事を書いていました。

www.mutant-tetsu.com

※てつさん、勝手に師匠と思っていてすみませんです(*ノωノ)


スマホで撮った写真、そのまま載せてる!!
無料の画像サイトで落とした写真も!!


せっかくブログを見て下さってる方が増えてきているので、なんとかしなければ!!といろいろ探しながら試してみたことを書いていこうと思います☆


スマホバージョンはコチラです♪

www.kaiunsimplelife.com


ちなみに超初心者レベルです^^;
知ってるし」、と思ってらっしゃる方やもっと高度なテクをお持ちの方はスルーしてくださってもちろん構いませんが、もしやり方が間違っていたりしたら教えて欲しいです♡

なぜ圧縮しないといけないのか


f:id:riecoro:20161207111125j:plain


そもそもの話…。
なぜ圧縮した方がいいのか


ものすご~く簡単に説明すると、私みたいに記事に写真をガンガン載せると、容量が重たくなって、表示速度が遅くなってしまうんです…。


3秒以内に表示されないと読者が離脱しますよ
というgoogleさんのデータがあるそうなんです…。


私も「おっそ。もういいや。」って見るのをやめてしまったことが何度もありました。私が一生懸命書いた記事も、同じ目に遭っていたらと思うと…

圧縮サイトを使わずに圧縮する方法


てつさんが紹介してくださっているサイトを使うのが1番いいのかもしれませんが…。


いつもブログを書く時、主人のPCを使わせてもらっているのですが、余計なサイトを入れたら容量が増えるからと注意されているんです…。


なので、なにかいい方法はないかと検索したら、こちらの記事がとても役に立ちました♪

netchild.net

※カズマさん、はじめまして^^勝手に紹介してすみませんです(*ノωノ)


元々PCに内蔵されている画像加工サイトで圧縮できたんです♪


①圧縮したい画像から「プログラムから開く」を選択

②「ペイント」を選択


f:id:riecoro:20161207104421p:plain


③「サイズ変更」をポチ

④「ピクセル」にして、「水平方向」を好きな数値に合わせる

⑤「OK」を押して保存したらおしまい♡


f:id:riecoro:20161207104431p:plain


めっちゃ簡単でした!!
もっと難しいものだと敬遠していたのに!!


ちなみに、「水平方向」に数値を入力したら、バランスが良くなるように(?)「垂直方向」も自動で合わせてくれました◎

圧縮してみました


▽960×634  (122KB)
f:id:riecoro:20161205173542j:plain


▽600×396  (68.5KB)
f:id:riecoro:20161205173643j:plain


▽500×330  (50.8KB)
f:id:riecoro:20161205173705j:plain


▽400×264  (34.3KB)
f:id:riecoro:20161205173735j:plain


スマホで見ると、違いが分かりませんね(´・ω・`)
PCだと、大きさが全然違うんですよ。


圧縮 = 画質が悪くなる、じゃなかったんですね…。


小さければ小さい程いいとは思うのですが、私的には500×330がちょうどいいかなぁと思っています♪

中央に寄せる


圧縮したら、画像ちっちゃくなっちゃった。
そしたら左に寄っちゃった…。


どうしたらいいかなぁと検索したら、うりさんがめちゃくちゃ簡単な方法を記事にしてくださっていました♪

uriuridayo.hatenablog.com


※うりさん、はじめまして^^勝手に紹介してすみませんです(*ノωノ)


下のコードを「デザイン」→「カスタマイズ」→「CSS」にコピペするだけです◎

.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}


めっちゃ簡単でした!!

おわりに


超ウルトラメカ音痴の私でも、なんとかできました◎
てつさん、いつもタイムリーな記事を書いてくださってありがとうございます♡
参考にさせてもらったカズマさん・うりさん、ありがとうございました☆


ただ、日常の出来事を記録で書いている方は、特に気にしなくても大丈夫かもしれません。


でも、私みたいに
たくさんの方に見てもらいたい!!
離脱率を下げてアクセスを上げたい!!
と思っている方で、圧縮されていない方はぜひ参考にしてみてください♪


それにしても…。
過去の記事の膨大な写真はどうしたらいいのか、途方に暮れているりえっこなのでした…(- -;)


最後まで見てくださってありがとうございます。
更新の励みになりますのでクリックしてもらえるととても嬉しいです♪