オコジョ的じゅりいズム

信州発!お金✖子育て✖地元長野✖余暇、じゅりい流の雑記ブログ。

ブログに貼り付ける写真・画像サイズを縮小し容量を95%カットする方法。Googleフォト貼り付けより小さくして表示速度を上げたい!

スポンサーリンク

f:id:tokaman0105:20190913071840p:plain

ご訪問ありがとうございます。

じゅりいです。

 

 ブログ運営されている皆様、写真のサイズはどうしていますか?

私は最近になって写真や画像のサイズに気を遣うようになりました。ブログ始めて1年以上経つのに、今頃やっと気を付けるとか遅すぎですね・・・(/o\)

というのも、少し前に自分のブログの表示速度を計測したら、ものすごく悪い数字が出たのです。

少しでも改善したいので、まずは頻繁に使う写真や画像のサイズから気を付けることにしました。

ブログ表示速度の計測

ブログ運営している方の多くはご存知だと思いますが、ブログ表示速度を計測できるサイトというものが存在します。

有名どころでは、

ページスピードインサイト➡PageSpeed Insights

GTmetrix➡https://gtmetrix.com/

このあたりでしょうか。特にアカウント登録など必要なく利用できます。

私はGoogleが提供しているサービス、PageSpeed Insightsで計測したところ、

モバイル:20

PC:51

こんな結果だったんです(;´Д`)ちなみに100点満点でこの数字。

計測する時間やネット環境によっても点数は違ってきますが、何度やってもモバイルは10点台~20点台。

いや、この点数はまずいんじゃないかしら。

 写真はGoogleフォトから直接アップ

これまで、写真をブログに貼り付ける時は「Googleフォト」から直接アップしていました。

ブログ編集画面の右側に「Googleフォト貼り付け」というボタンが存在するのをご存知でしょうか。

f:id:tokaman0105:20190902125905p:plain

⇧この風車マークです。

Googleフォトにアップしてある写真を直接ブログに貼り付けられるので、すごく便利!!

(最近、ツイッター貼り付けも便利だということに気づきました(笑))

しかも、撮った時の写真サイズのままではなく、自動で縮小されて貼り付けできるので、写真を多用しない場合は気にせず貼り付けができます✨

元のサイズと比べて、約10分の1のサイズに縮小されるらしいです。

 

こんな便利なGoogleフォトですが、極限までサイズを小さくして少しでもブログを軽くしたい私は、さらに写真サイズを小さくしようと試みています。

極限まで写真サイズを小さくする方法

サイズを小さくしすぎて見た目が粗くなってしまったり、見えづらくなってしまったらいけませんので、見た目の変化がほとんどないレベルで極限までサイズを小さくしていきます。

まず、ペイントでサイズダウン

「ペイント」はWindowsパソコンを利用していれば、アクセサリで必ず入っています。

(Macにも同じような機能があるのかな・・詳しくなくてすみません💦)

まず、こちらの画像をご覧ください。

f:id:tokaman0105:20190902130845p:plain

⇧マスターキーのゼリーの写真を縮小します。

そのままだと赤枠で囲ったようなサイズで、容量は705KBです。

 

f:id:tokaman0105:20190902130903p:plain

⇧この画像を右クリックすると、このようなタブが出てきますので、「編集」または「プログラムから開く」を選択します。

「プログラムから開く」を選択した場合は、「ペイント」を選んでください。

f:id:tokaman0105:20190902130923p:plain

⇧ペイントが起動すると、写真がフルサイズで表示されます。

スマホで撮った写真は画素数が大きいので、だいたい大きすぎて見切れています(笑)

「サイズ変更」のタブをクリックします。

f:id:tokaman0105:20190902130936p:plain

⇧サイズ変更は「パーセント」と「ピクセル」があるので、「ピクセル」を選択します。

赤枠の数字を変更します。

f:id:tokaman0105:20190902130950p:plain

⇧ブログの写真には、水平方向600~700あれば問題ないと言われていますので、私は小さめの600に変更しています。

垂直方向の数字はいじらなくて大丈夫です。

f:id:tokaman0105:20190902131104p:plain

⇧変更後、画面におさまるサイズになりました。

このまま上書き保存します。

f:id:tokaman0105:20190902131135p:plain

⇧保存後のサイズを確認すると、上記のようなサイズに変更できました。

容量は705KBから73.6KBに縮小されました!約10分の1(゚∀゚)

 

これでも十分小さくなったのですが、ここからさらに縮小します。

ペイント編集後、JPEG圧縮でさらに縮小する

ペイントで縮小したら、ウェブ上で写真を圧縮処理できるページ「JPEG圧縮」でさらに小さくします。

JPGイメージをオンラインで圧縮する

 

f:id:tokaman0105:20190902131210p:plain

⇧写真をPCのファイルからこのページにドラッグするだけで圧縮してくれます。

上記の写真は、-47%圧縮されました。

f:id:tokaman0105:20190902131233p:plain

⇧圧縮後のサイズはこのようになりました。

最終的に、705KB➡73.6KB➡39.3KBまで圧縮できましたので、結果約18分の1のサイズにまで小さくできました!

パーセンテージにすると、95%OFFです!!

手順は、ペイント➡JPEG圧縮の順番が最適

写真を最初にJPEG圧縮してから、ペイントでさらにサイズ縮小したらどうかな、と思ってやってみましたが、この順番だと同じ写真で69.8KBまでしか小さくなりませんでした。

なので、ペイント➡JPEG圧縮の順番の方が小さくすることができます。

おわりに

Googleフォト貼り付けの手軽さにはかないませんが、この方法ならかなり写真を小さくできますので、ブログの容量を圧迫しません。

「ひと手間かけてもブログを軽くしたい!」という欲求がどうにも抑えきれず、最近は頑張って縮小しております(;´∀`)

ブログに写真をたくさん使う方、表示速度が気になる方にはおすすめです✨

 

最後までお読みいただき、ありがとうございましたm(__)m