テケオは眠くても頑張るぞ!

便利なサービスや製品紹介、スマホゲームや動画視聴のレビュー、ブログのカスタマイズ方法などを書く雑記ブログ

はてなフォトライフの画像を一括ダウンロードして圧縮したいと思う

f:id:tektekeo:20170904223543j:plain

はてなブログを運営していて、GoogleのPageSpeed Insightsで赤点をとったため、レスポンシブサイトに変更して多少はマシになりましたがまだ遅い!

画像データが重すぎるので軽くしたい!

これがこの記事のテーマです。

画像のアップロード数を見てみると、約700枚もの画像をアップロードしていました。

これを全てはてなフォトライフからダウンロードし、圧縮して再アップロードを試みました。

 

どうでもいい前置きとやりたい事

冒頭で書いた通りなんですけど、ちょっと前置き。

昨日の以下のような記事を投稿しました。 

www.kouritsu30.com

「はてなブログのスマホ用ページの読み込みが異常に遅いので、レスポンシブサイトにします」という内容です。

ワンクリックでテンプレのレスポンシブ化できるのですが、Adsenseの表示が切れた状態になってしまうと、確か規約違反だった気がするので、その部分だけは修正済み。

PC上でのダブルレクタングル広告が、スマホで見ると縦に2連で表示されてかなり鬱陶しいですが、とりあえず放置して画像の差し替えをやっていきたいと思います。

 

やりたい事としては

  1. はてなフォトライフから画像のダウンロード
  2. PNG画像をJPEG形式に変換
  3. 全ての画像をして圧縮(JPEG形式)
  4. 圧縮した画像をアップロード&記事のリンク先設定

これを約700枚の画像に対してしていく必要があります。

もはやアホです。最初からきっちりやっておけばこんな事には...

 

ちなみにJPEG形式の方が良いとmimimalgreenさんから助言をいただきました。

昨日の記事にコメントをいただき、お詳しそうだったので思い切ってTwitterでお聞きした所、お答えいただきました。

ブログをしていると自分の無知を晒すことが多いですが、その度にこういったアドバイスをいただけるは本当にありがたい事です。

本当にありがとうございました。

はてなフォトライフから画像を一括ダウンロード

takiji13.hatenablog.com

一枚一枚ダウンロードするとか絶対無理なので、一括ダウンロードの方法を調べて見ると素晴らしい方法が書かれていました。

Macではterminalでコマンド入力が必要ですが。

大まかな流れとしては、

  1. はてなフォトライフのRSSを取得
  2. アップロードした画像のURLを抽出
  3. URLの画像をダウンロード

って感じですね。

参考記事にやり方や詰まった所、注意するところなど事細かく書かれているので、すごく参考になります。

少し言及すると、参考記事ではRSSの取得を

wget http://f.hatena.ne.jp/【はてなID】/Hatena%20Blog/rss

http://takiji13.hatenablog.com/entry/2016/04/28/224533

 で上手くいくはずなのに、上手くいかないとあります。しかし、それに関しては当然じゃないかなと思います。

ログイン状態ではないからでは?

もしこの記述で画像を取得できてしまうなら、idさえ分かれば誰の写真でも取得することができてしまいます。

もしかしたら、画像フォルダの「公開範囲」を「パブリック」にすればイケるのかもしれません。(やってないから自信ない)

cURLのようなモノを使ってフォトライフにログインした状態にすれば...(よくわかってない)

まぁそういう事で、素直にRSSをコピペしました

また、http://f.hatena.ne.jp/【はてなID】/Hatena%20Blog/rss では50件までしか取得できませんでした。

それ以降のRSSを取得するには

  • http://f.hatena.ne.jp/【はてなID】/Hatena%20Blog/rss?page=2
  • http://f.hatena.ne.jp/【はてなID】/Hatena%20Blog/rss?page=3
  • http://f.hatena.ne.jp/【はてなID】/Hatena%20Blog/rss?page=4

といった具合に末尾に「?page=【数字】」を付け加えれば取得できます。

あとは参考記事通りに進めるだけで完了です。

簡単ですねw

比較的楽に一括ダウンロードできました。

PNG画像をJPEG形式に変換する

kujirahand.com

こちらの記事を参考にさせていただきました。

png→jpgに変換するために以下をterminalで処理。

for F in *.png; do sips -s format jpeg $F --out ${F/.png/.jpg}; done

これでPNG画像がJPEG画像に変換されました。

500枚くらい変換しましたけど、30秒くらいで終了しました。

画像を一括圧縮する

次に画像の圧縮です。今回はJPEG画像を圧縮します。

便利なWEBサービスやツールもあるようですが、メンドくさいのでこちらもterminalでコマンドを打ち込んで処理します。

www.yoheim.net

ちなみにですがPNG画像を圧縮したい方はこちらが参考になりそうです。

しかしフォトライフではPNG画像をアップロードすると容量が増えてしまうため意味がないようです。

qiita.com

 

早速JPEG画像を圧縮するために「jpegoptim」を使用します。

本当に参考記事通りインストールして実行するだけです。

以上で再アップロードする画像の準備ができたので、元の画像データと比較してみましょう。

結果は...

f:id:tektekeo:20170905015359j:plain

-85.6%

やばいほど圧縮できましたね。これでOKでしょう。

変換後の画像をみて、品質を何%するかなんとなく決めました。

元データは全て残しているので、よっぽどjpgに不向きな画像である場合はpngにするなり、圧縮率?なりを試行錯誤していきたいです。

ちなみにアイコンは「gif」や「png」を貫きます。イラストをjpgにすると滲んだりするらしいので。

←こういうヤツは全部「png」か「gif」!にーちさんにせっかく作ってもらったので。

 

ちなみにコマンド打ち込んで処理にかかった時間は数十秒です

terminalでのコマンド入力に多少慣れていると、こういった状況ですごく役に立つので勉強するのはオススメです。

画像のアップロードとリンクの貼り直し

既存のアップロードした画像に上書きできないかな?

と思っていたのですが、調べてみてもわからないので1つ1つ手でこなしていくしかありません。

追記:APIでなんとかなりそうでしたw

TOP - Hatena Developer Center

コメントから教えていただきました!

過去記事のリライトを兼ねて少しづつ更新するつもりでしたが、とりあえずAPI見てからにしようw 

まとめ

  • はてなフォトライフの画像を一括ダウンロードした
  • 大量のPNG画像を高速でJPEG画像に変換した
  • 大量の画像を高速で圧縮できた
  • アップロードとリンクの貼り直しがめんどい

圧縮処理をせずにアップロードしていたので、致し方ありません。

画像の貼り直しによるPageSpeed Insightsの結果はまた後日測定したいと思います。

その時にはjavascriptやcssも変えて、せめて判定が黄色になるまで頑張りたいところですが、たぶん途中で面倒になって諦めますw

やっぱりレスポンシブサイトやめで。

とか突然言い始めるかもしれませんw

 

今までテキトーに画像を貼り付けていましたが、「png」「jpg」「gif」の特性を踏まえて、最適なものを使用する重要性を認識できた気がします。(かといって深く勉強するつもりがないというクズスタイルw)

 

また今回の記事では、吐き気を催しそうな見慣れない文字列の記事だったかもしれませんが、コマンドで操作することを覚えれば、結構いろんなことができ役に立ちます。

これを機に勉強してみてはいかがでしょうか?