前回の記事で、サイトの表示速度が遅いと
・直帰率が上昇
・検索の時に表示されにくい
などのデメリットがあると学びました。
そして、ページスピードインサイトで、画像の圧縮の必要性をグーグルさんから言い渡されました。
そこで、今回は『画像圧縮によるブログの表示速度アップ』をもくろんでいきたいと思います！
目次
- 携帯からはてなブログに写真をアップしたい！
- 画像圧縮のアプリを探す
- 携帯からはてなブログに写真をアップしてみる
- アプリでもっと小さい容量に設定してみる
- はてなフォトライフで画質を変更
- オンライン画像圧縮ツールを使用する方法も！
- 結論
- 終わりに
携帯からはてなブログに写真をアップしたい！
前回も書きましたが、みなみは、ほぼ１００％携帯（iPhoneXS）から画像をアップしています。
最近は携帯でしか写真を撮っていないのと、パソコンに送って、編集するのは、パソコンがボロいため処理速度が遅くて面倒だからです。
ということで、携帯で画像圧縮できるアプリを探して、そちらで行うこととしました。
画像圧縮のアプリを探す
『画像圧縮 一括でまとめてリサイズ＆圧縮』
評価も割とよさそうだったのでこれをダウンロードしました。
①15枚まで一括でリサイズ可能
②リサイズ前に、サイズの変更前・変更後の容量等を確認できる
『バッチリサイズ２』
もう1つ口コミが良さそうだったのをダウンロードしてみました。
①画像を選択する画面に、その画像の容量が表示されるのでわかりやすい
選択枚数は何枚までかの記載がないが、とりあえず複数できました。
②細かな設定も可能。（幅・高さのpixel指定、枠・影追加、画像形式の選択など）
携帯からはてなブログに写真をアップしてみる
では、実践してみましょう！
先日載せたラーメンの画像と、グラデーションの入った海の画像で試してみましょうかね。
はてなブログは、画像の大きさが1024pixelになるとのことなので（ちょっとよく意味はわかりませんが）、まずはそれでリサイズしてみました。
＜ラーメン＞
〇元々の画像：2.4MB（2400KB）！
何にもせずにはてなブログに携帯から乗せた場合がこちら
2400KB→ 352KB
…なんと結構勝手にリサイズされています！！
こんなにはてなブログがリサイズしてくれていたとは、おどろきですね。
そのままの2.4MBで載ってるわけではなかったんですねぇ…☆
〇アプリ：『画像圧縮』を使用してみる
画像サイズを1024に指定しリサイズ
2.4MB（2400KB）
↓
304KB
だいぶ小さくなりました(^^♪
が、はてなに何もせずアップするのとあまり大差がない。（上の352KBのことですね。）
しかし、このリサイズした写真をはてなにアップすれば、さらに画像容量が小さくなるのか？！
はてなにアップする。
304KB→308KB
…あれ、なぜか容量が少し増えています。
最初のように大幅サイズダウンは起こりません。
〇アプリ：『バッチリサイズ２』使用
1024×1024に指定しリサイズ
2.4MB（2400KB）
↓
331KB
こちらも小さくなりました♪
さらにその画像を携帯からはてなブログにアップする
311KB→ 347KB
…やはり、増えました。
＜海＞
一応グラデーションのある海でも試します。
〇元々の画像：2.7MB（2700KB）！
はてなブログにそのままアップすると…
2700KB→267KB
だいぶ勝手にリサイズされています！
ちなみに宮古の海ですね。誰かいます。
〇アプリ：『画像圧縮』を使用
画像サイズを1024に指定しリサイズ
2.7MB（2700KB）
↓
238KB
さらにそれをはてなブログにアップ
238KB→242KB
…そのまま載せるよりは減っていますが、リサイズしたものより増えています‼
〇アプリ：『バッチリサイズ２』使用
1024×1024に指定しリサイズ
2.7MB（2700KB）
↓
254KB
さらにそれをはてなブログにアップ
254KB→ 273KB
…リサイズしたものが、なんと何もせずに貼った画像よりも容量が大きくなっています！！( ;∀;)なんてこと。
…いやになっちゃう…
…ここで考え付きましたが、はてなで1024pixelに勝手にリサイズするのだから、私がその前にアプリで1024pixelにリサイズする意味は全くないのでは？！
アプリを使用し、1024pixelに変更するのは無意味。
…また、いらない苦労をしてしまった気がします。
アプリでもっと小さい容量に設定してみる
しかし、そのままの画像を載せるにしても、両方300KB近いです。
それなら、もっとアプリで小さくしてから乗せれば解決なのではないでしょうか？(^^♪
＜ラーメン・『バッチリサイズ２』＞
2つやるのが面倒になってきましたので、とりあえず、ラーメンの画像を使用。
アプリはバッチリサイズ２で、大きさを480pixelに小さくしてみます。
2.4MB（2400MB）
↓
85KB
やっと100を切りました！
それをはてなブログにアップします。
85KB→248KB
増えています！！！
画像は汚く、レモンは干からびたような雰囲気になっています。
要するに、85KBのクオリティのまま、なぜか248KBになってしまったようです( ;∀;)。
増える意味が分からないけれど…
これを、アプリを変えて「画像圧縮」でやってみても、海の写真でやってみても、何の生産性もないでしょう。
上の実験で学んだのです。
要するに、携帯からアップしようとして、画像圧縮機能のあるアプリを用いてはてなブログにアップしても、 何の意味もない、という結論が出ました。
たとえ100以下に調節しても、はてなさんはしっかりと容量を増やしてくれるのですから。
最初は、画像圧縮アプリの種類によって、画像のきれいさに差がでるのかなどを検証したかったんですが…。
「そんなことは、意味のないことである」とみなみの脳は判断しました。
はてなフォトライフで画質を変更
では、どうする？！
いろいろ探していると、はてなフォトライフの設定を変えると画像の容量を減少させることができるという記事を見つけました。
はてなフォトライフの存在すら知らなかったですが、やってみましょう。
設定方法
①ブログ編集画面の右上で、はてなフォトライフに行く
②右上部の設定を押す
③画質を100％から、任意に設定する
今回は、70％にしてみました。
④少し下にある「この内容に変更する」を押して設定を保存
これで、設定は終わりました。簡単です。
画像をアップしてみる
では、ここで、スマホからアイフォンで撮った画像をそのままアップしてみます。
＜ラーメン＞
（上：画質100％ 下画質70％…157KB）
2.4MB（2400KB）
↓
157KB
＜ 海＞
（上：画質100％ 下：画質70％…135KB）
2.7MB（2700KB）
↓
135KB
小さくなりました！
画質を100％にしていた時と比べると、
ラーメン：352KB→157KB
海：267KB→135KB
両方とも、半分ほどになっています。
画質もそんなに悪くなく、レモンのみずみずしさも保たれています！
一度、フォトライフの設定をいじってしまえば、あとは毎回勝手にリサイズされるようです。
容量をもう少し小さくしたい場合は、もっと画質の値を落としてみるといいですね。
オンライン画像圧縮ツールを使用する方法も！
画像の質をなるべく落とさずに画像圧縮をしてくれるそうです。
「TinyPNG」
画像のクオリティをできるだけ高い状態で圧縮してくれるサービスとして、多くの人がお勧めしているとのこと
「Optimizilla」
こちらも、有名なオンラインサービスで、たつとらさんも紹介してくれていました！日本語で、色々設定が詳しくできるらしいです。
結論
・はてなブログに画像をアップすると、ある程度はリサイズされ、容量が減ってアップされる
・スマホから画像をアップしたいときに、「画像圧縮」アプリや「バッチリサイズ２」アプリで容量を100KB以下に減らしても、はてなブログにアップすると容量が倍以上に増えているし、画質は悪い
・ はてなフォトライフの画質％を調整することで、普通にスマホからアップしても容量を減らすことができる
・画像をなるべく落とさない、オンラインの画像圧縮ツールを選択する方法もある
終わりに
なんてめんどくさかったでしょうか。
多分６・７回は記事を公開して、公開記事から画像をダウンロードして容量の確認をしました……。
とりあえずは、携帯から画像をアップしますが、新しいパソコンで動作がサクサク行くのなら画像圧縮サイトも検討します(*^_^*)
特に、デジカメで撮っていた昔の写真を載せるときはどうせパソコンから写真をアップすることになりますしね～。
ただ、スマホから写真をパソコンに送るのが面倒だよ～という方は、フォトライフの調整が手軽です(*^^*)。
難しかったよ～。
参考になれば幸いです！
参考URL
http://self-message.com/wordpress-image-optimize#
ブログの重い写真を軽量化！画像サイズを圧縮できるおすすめ無料サイト - つなろっく
