Team-SKY30 サイトのPVを増やそう計画

SQOOL.NETの画像圧縮処理概要

公開日:

こんばんは。加藤です。

最近「ゲーム攻略!SQOOL.NET」のサーバー上の画像圧縮処理を行いましたので概要と手順を書いておきます。

※手順だけを示したメモ書きです。詳細はググってください。
※WordPressサイトの場合、の記事です。
※手法を真似するときは自己責任で!必ずバックアップを取ってから行いましょう。

■対象サイト

http://sqool.net/
2013年1月1日から運用
ゲーム攻略サイトなので画像数多し

■状況

FC2→ライブドアブログ→WordPressと移管してきたので、
WordPress以前の画像は専用フォルダに吸い出して使っていた。(つまりWordPressの管理下に無い)

途中からImsanityというプラグインで画像サイズをコントロールしていた。

途中から「設定」→「メディア」からサムネイルと大サイズは生成されないようにしていた。(0,0を指定すると生成されない)

途中からfunctions.phpに50*50,200*200を作成する記述をしていた。
http://sofane.net/archives/3319

運用負荷を考えて、記事作成時の都度の圧縮は実施していない。
(WordPressはアップロード時に画像サイズがリサイズされると事前の圧縮効果がなくなるので、投入サイズにリサイズした後圧縮する必要がある。運用負荷高い。)

画像圧縮系のプラグインはサーバーへの負荷が高く、アップロードに時間がかかるようになり、かつ圧縮率も低いので使っていない。

■作業結果

約33万の画像ファイル(ほとんどpng) 約72GB

約27万ファイル(JPEG) 約42GB

■作業手順

サーバーからファイルDL

FTPソフト「Filezilla」を使用。
色々試したが「Filezilla」が最も高速。FFFTPとは比べ物にならないスピード。
27万ファイルも数時間でDLできる。(100メガ光+WiFiでも)
※設定はぐぐって

Filezillaの「リモートファイル検索」を使って、サーバー上の
「60×60.png」とか「150×150.png」など、使っていないサイズを検索して一気に削除。子フォルダ、孫フォルダ内も検索して結果から一気に削除できるので超便利!

その後全ファイルをDL。

ローカルで圧縮

フリーソフトCaesiumを使ってpngからJPEGに変換しつつ圧縮

Caesiumについて詳しくはこちら
写真の画質そのまま!一括で画像を圧縮できるフリーソフト『Caesium』

品質は100%を選択(デフォルトは80%)圧縮率は40%程度
※WordPressにあげた時点で90%に圧縮されているので画質を落とさないために100%を選択。80%ならもう少し圧縮できていたはず。

元々小さいサイズの画像はCaesiumを使うとファイルサイズが大きくなるものが多い。これをスキップする機能もあるが、今回はpngからJPEGへの変換も目的としていたのでスキップせずに一括で変換した。

Caesiumはかなり高速
27万ファイルも順調にいけば10時間程度。
Windows10 Core2Duo メモリ4GB

PCのスペックが高ければもっと速いと思う。

圧縮後のファイルを同じフォルダに吐き出す機能があるので、うまく使うとフォルダごとのファイル整理も不要になるので楽。

Caesiumの弱点

1.
エラーファイルが混じっていると途中で処理が止まる。
あらかじめファイルサイズなどでソートして、容量が0になっているエラーファイルを削除しておくと良い。
また.bak系のバックアップファイルなども不要なので削除。

2.
ファイル名にドット「.」が入っていると、ドット以降が無視されてファイル名が変更されてしまう。

例)
2015-10-01.14.20.00.png → 2015-10-01.jpg
※これって多分特定の機種&VerのAndroid端末が生成するファイル名だと思う。一定の時期、特定の記事に集中していた。

これだとWordPressフォルダにあげた後に記事を一つ一つメンテナンスしないといけないので現実的ではない。

そこでこれらのファイルについては「XnView」というフリーソフトを使ってpngをjpegに変換する。XnViewはファイル名にドットが入っていてもファイル名を変えずに作業可能。
(圧縮処理はしていないがpngからJPEGになったことでファイルのデータサイズは少し小さくなる。と思う。多分。厳密には調べていない。)

圧縮した画像のアップロード

サーバーの容量がまだ十分に残っている場合は、このまま圧縮したjpegをアップロードして、「Filezilla」のリモートファイル検索でサーバー上の「.png」ファイルを削除する。

サーバーの残り容量が少ない場合は、別サーバーに一度避難させて、一時的に画像参照をそちらに移すのが良い。

加藤は別サーバーに別ドメインを当てて、一時的にそちらに72GBの未圧縮画像データを入れ、

Better Search Replace

というプラグインを用いてpostのタグを一括置き換え、一時的に画像はそちらを参照させた。
※置き換えを実施する前に必ずSQLのバックアップを取ること!置換は間違えると戻せなくなる!!!

本サーバーの画像ファイルを削除、ローカルで圧縮したファイルをアップロード。

再度「Better Search Replace」を使って記事内のコードを置換、本サーバーの圧縮後のjpgを参照させる。

※hetemlを一時的な画像サーバーとして利用しましたが、レスポンスも十分でかなり良かった。月額約1500円で256GB使える。場合によってはhetemlに画像を置く仕様にしても良いとも思った。

アイキャッチの再設定

http://www.barnetshenkinbridge.com/wordpress/2405/
この方法を使って、アイキャッチを一括削除

Auto Post Thumbnail
このプラグインでアイキャッチを一括設定。
※なぜかアイキャッチの設定がうまくいかない記事が結構あったので、Better Search Replaceでpost-metaの置換実施。.png→.jpg。この処理で良いのか確証は無いがとりあえず一部は改善した。エラーなどもなし。だが、真似するときは自己責任で。
※置き換え実施前には必ずSQLのバックアップを!

必要に応じて
AJAX Thumbnail Rebuild
このプラグインでサムネイルを再生成する
アイキャッチだけ、とか、生成するサイズはこれだけ、とか限定できて便利。

この辺の一括再設定系の処理はCPU負荷がそれなりに高そうなのでアクティブなサイトは深夜帯などに行うのが良いかも知れない。

チェック&修正

キャッシュ系のツールやサービスを使っている場合は、キャッシュ解放の処理が必要かも。

サイトの画像表示状況を目視でチェック。
SQOOL.NETの場合、サムネイル紐づけ上手くできていないものが3%程度あったので(原因不明、画像そのものはサーバー上にあるが紐づけられていない。post-metaの何かが原因?)
これは全て手動で対応。
同じ画像を再度WordPressでアップロードして記事編集画面からアイキャッチに設定。

アップロード画像をウィジェットやテーマファイルで使っている場合はそちらも修正する。

念のため
Broken Link Checker
を入れて、画像のリンク切れが無いかをチェックすると良い。
このプラグインはキャッシュ系の機能と相性が悪いので、適切な設定が必要。
詳細省略するが、「高度な設定」タブの「サーバーの負担の制限」を低く抑えておくなど。

アップロードファイルのJPEG統一

Imsanityはアップロード画像をJPEGに変換させる機能があるので、これを使ってJPEGに統一しておくとCaesiumとの相性が良くオススメ。
Caesiumはpngの圧縮率が低くjpegの圧縮率が高かった。(他の圧縮ソフトもそうなのか?)
※透明化が必要な場合はJPEGは使えないのでその場合はpngを使うしかない。と思う。

これで終了。
サーバー容量が30GB程度節約になり、画像のファイルサイズが小さくなったことでページの読み込み速度も大きく向上。

他の便利そうなツール

画像の枚数が少ない人は
https://tinypng.com/
これなど便利。

ブラウザ版は無料で使え、pngの圧縮率も高い。

最近WordPressのプラグインや、DL用のソフトもリリースされている。
月間500枚以上は有料だが、機能を考えると大規模サイトの運営者は導入しても良いかもしれない。

余談

WordPressを使っている人は

http://サイトURL/wp-admin/options.php

を開くと、色々なオプション設定を行うことができる。画像を入れた際のリンクをデフォルトで無しにしたり、位置やサイズのデフォルト設定を変えたりできる。結構便利なので見てみると良いかも。(知らない人多いよね、これ)

※上述の手法を真似するときは自己責任で!必ずバックアップを取って実施しましょう。


タグ


執筆者


新着記事

2018.05.31 Thu

「アドセンスの初心者応援ライブ」を実施しました!


2017.12.04 Mon

収益性が40%向上したアクティブビュー改善の施策!


2017.12.04 Mon

アクティブビュー率向上施策 ゲーム攻略サイトはアクティブビュー率との相性がめちゃ悪い!


2017.11.28 Tue

AdSense広告の視認率を高めると収益性が向上する?


2017.11.14 Tue

【Team-SKY30の取り組み】アクティブビュー(視認率)向上の施策


2017.02.20 Mon

【告知】宮崎智之氏をゲスト講師にお招きして「第15回ゲームライターコミュニティセミナー」を開催します


2016.09.20 Tue

グローバル(多言語)サイトのURLってサブドメイン?サブディレクトリ?


2016.07.09 Sat

wordpressでループの途中に簡単に広告を入れる方法


2016.07.09 Sat

【旬?】最近やっているモバイル対策


2016.05.05 Thu

1か月PVアップトライアル!結果報告




にほんブログ村 ブログブログ ブログアクセスアップへ