【近況】もうすぐ1年の4分の3が終わろうとしている…!:(;゙゚'ω゚'):

てがろぐ画像WebP化備忘録。

自サイトのチラシの裏代わりに使用してるBoyatter(ボヤッター)…基てがろぐ。かれこれ8年以上も使用していますが、こう長く使用していると画像の容量の重さが気になってきました。
何故気になってるかというと自分のスマホ通信量をいつも5GBに抑えてるから気になりだしまして。

記事にはしてないけど、先月wordpressでやってるこのサイトの画像の拡張子を全てWebP化させることにしました。
こっちの方はプラグインで簡単にやることができたが(サムネイル込で10,000以上も画像ファイルがあったから全てWebP化に2時間も近く掛かった罠)、ついでだからてがろぐの画像をWebP化できないのかなーとGPT(以下チャッピー)に相談。

ヲナツ

ヘイ!チャッピー!
てがろぐの画像をWebP化できる?

チャッピー

できるよ!!

できるんかーい!!…ってことで早速ほとんどチャッピー頼みでてがろぐ画像WebP化をやってみました。この記事はその備忘録。

  • 今回はPython(パイソン)を利用してjpg・png画像をWebPへ一発変換。
  • てがろぐのxml内に記録されている画像ファイル名も、WebPに合わせて一括で書き換えました
  • Pythonについてはガチ初心者のためスクリプト等は全てチャッピーに丸投げ作ってもらい、実行確認をしながら進めています。
STEP
まずはバックアップ

サーバー上でアップロードされている「images」フォルダ、tegalog.xmlをダウンロードする。
※問題があったらすぐに戻せるようにするため!

STEP
画像を一括でWebP化

フォルダを確認したら画像ファイル数が340もあった…!1つずつ変換は日が暮れるのでここでPythonを利用してまとめてWebP化へ変換することに。(画質は「85」、サイズ変更なし)
※スクリプト云々はチャッピーに丸投げ。でも結果等はその都度確認して行っています。

WebP化したら352.71MB→82.58MBの削減成功。WebPしゅごい…!約76%のダイエットができました。なんと羨ましい…

STEP
xmlで使われている画像を確認

画像の変換ができても、過去の投稿はjpg(png)のファイル名で記録されているため、今度はtegalog.xmlの中にある画像ファイル名をWebPへの変更が必要になります。

340枚の画像があるのに329枚しか使用されてない?
なんでやねん!かと思ったが、差分11枚は差し替えの残骸だったようだ…

STEP
xml内の拡張子を書き換え

ここでもPythonさん大活躍!実際に使用している画像参照を書き換え。
※元xmlファイルは残し、WebP用のxmlを別ファイルとして作成。

書き換えたxmlを念のためチェックしたところ、突然「xml構造:エラー!」の文字が!
元の tegalog.xml.とWebP版を比較してみると、元XMLにもまったく同じ場所に同じエラーがあった。

さらに両方の内容を比較したところ、変更されていたのは予定通り画像の拡張子だけ。
今回のWebP化によってxmlがおかしくなったわけではないことわかったのでとりあず進めることができた…!

STEP
WebPをFTPへアップ。

まずは画像ファイルだけ。元画像のjpg(png)はまだ削除してはいけない。

ブラウザの直アクセスでWebP画像が表示されているか確認。

STEP
WebP版tegalog.xmlに切り替え

WebP用に書き換えたxmlを本番の tegalog.xmlとしてアップロード。

ところがどっこい!画像が表示されていない!!!ギャオオン!!

てがろぐのシステム設定で許可する画像の種類に「WebP」が入っていなかっため、改めて拡張子を追加。
その後は無事画像が表示されました。┐(´д`)┌ヤレヤレ

…とこうゆう流れで過去画像は無事WebP化されました。以下はスマホ云々の番外編。

これからてがろぐでWebP画像をアップする際はPC→Pythonに変換(これが最楽)、スマホはアプリで変換してもらう形にすること流れで決定。(ブラウザは広告がウザイので却下)

それじゃあスマホのアプリはどうしようってことでplayストア(Android民)で探してみたが、試したアプリ名は伏せておくが「PDFバージョンが古いぞ」という謎の警告が出たり、そのまた別のアプリでも変換中にでかい広告が流れ出して使いづらい…と没。

最終的に「F-Droid」で見つけた「Kompact」に落ち着きました。試しに5MB画像で試したところ400KBまで落とせたし、シンプル操作・無駄な広告がないからてがろぐの画像投稿にはこれぐらいでいいかもしれん。(お試しに使用した画像は10月3日のボヤッター記事を参照)

前回のwordpress移転のときもチャッピー頼みでしたが、こうゆう痒いところに手が届く機能を追加させることができるのもチャッピー様様ですな。

実は水面下でこのてがろぐ以外でPythonを利用してやっていることがありまして、そのことに関しては追々。

送信中です

×

※コメントは最大500文字、5回まで送信できます

送信中です送信しました!