メディアライブラリ運用奮闘記

サイト改装を終えwordpressサイトとしての体裁を整えて満足してから数ヶ月後、私はすっかり更新をサボっていました。絵を描いていないわけではありません。描いて、Twitterに載せて、満足して、以上。これではいけない……。自分のことですから原因はだいたい分かっていたので、ルールを厳格に決めることで思考負荷を減らし、機械的に更新がんばろうという試みです。多分かしこい人は先にこういう手を打っている。

最後にEASELカスタムの話をしています。それ以外は結構役に立たない日記です。

原因

なぜ更新が滞るのかといえば、描いた後にするには考えることが多すぎるからです。それならば考えることをやめてテキトーに（ファイル名も不揃いでいいし容量のこととか気にせず手元の画像を投げちゃえばいい）こなせばいいのに、それもなんだか居心地が悪いし後の自分が文句をつけるのが目に見えているためやりたくないからです。最悪だ！　最悪なんですけど、この思考回路って伝わりますか？＿？

しかし、これならば対策は目に見えていて、運用ルールについて納得がいくまでじっくり考えて、以後それに機械のように厳格に従えばいいわけです。つまりそれをダラダラメモっている記事な訳だ。
ファイルの命名規則には大体の「お約束」があるから考えるのは楽だけど…………。いまどきのイラスト個人サイトの画像ってなにを目安にすればいいんだろう～～～どれくらい圧縮すればいいのかな

🤔
助けて

何も分かってない状態で仕様を決めなきゃいけないってムズくない！？！？！？「とりあえず」で先に進むの、気が重すぎる。助けてください。私ってこういうタイプで、上述の思考にも通じますが、手を動かすより考え込みがちで。
みんなってさあ！！！個人サイトのイラストサイズ（表示px,ファイルサイズ,拡張子）ってどうしてるの！？！？！？！？デカくて不便なことは！？小さくても閲覧に影響ない！？標準は！？どうしたらいいの～～～～～～～～～～～～～～～～～～～～～～～～～～と常に嘆いていた。

がんばって出力ルール決めた

毎回その場のノリで書き出しと圧縮をするのをやめて（やめたほうがいいです）サイト用画像の出力ルールを作ることにした。大まかにはクリスタで規定サイズに書き出し→それを更にプラグインでwebp変換と圧縮をする。この手順自体は以前と変わらない。自分の考えを整理するために結果だけでなく過程を長々と書いています。

最大pxを決める

イラストは綺麗に見せたいが品質と圧縮率はトレードオフだ。無圧縮ではデータ容量が犠牲になるし、逆にデータサイズをなるべく軽くしようと思うと今度は品質が気になってくる。実はあまり気にしたことはないが、ページの表示速度という問題もついてくる。
私は今のこのサイトとリトルサーバーミニプランと末長く付き合っていきたいと思っているので、ある程度の品質は確保しつつもできるだけ容量を圧迫しないように進めたい……のだが、そもそも「これくらいの容量でこういう運用なら大丈夫だな😉」という感覚が備わっていないがために苦労してのたうち回っているんだよね～～！
ここは考えても仕方ないと思ったので、わたしは最大pxだけ決めてツール達に適切に圧縮してもらお～～～と思った。

そう、データサイズ以外に画像の大きさ（px）も考慮する必要がある。こちらは横幅1200pxを基準にした。PCとスマホ両方から閲覧する想定、そして以前からよく横幅1200を一つの基準にして書き出していたことが多いからである。PCはフルHDモニター、スマホはiPhone15（※デバイスピクセル1179×2556）で確認している。
ただし例外として
・縦長の漫画やそこまで大きさを重視しない画像は横幅1000pxに
・どうしてもPCでの拡大鑑賞を意識したい場合のみ横幅1400pxにしても良い　こととした。

こうやって例外を作ると意味がなくなる気もするが、逆に「全ての画像を絶対にこうする🤖」と決めると作業に慣れてきたあたりで「今回は小さくても構わないな」「描き込んじゃったからよく見てもらいたいから大きくしよう」という感じでルールが瓦解するのが目に見えていたので三択から選ぶというふうに定めた。これで絶対破りませんよ。絶対に。

クリスタの書き出しルール

作業にはもっぱらCLIP STUDIO PAINT EXを利用しているので、こちらで[画像を統合して書き出し]→.jpg(JPEG)と書き出しを行う。設定は以下の通り。

このJPEG品質という数値について。これは何もクリスタの独自規格ではなく、一般的なJPEG品質のパラメーターだ（おそらく）。そしてJPEG品質というものは線形ではなく指数関数的なカーブを描くらしく、そのため品質の数値を90-100あたりの高い数値に設定するのは、画質を少し犠牲にしたのにデータサイズも大して減らせていないというたいへん非効率で悲しいことになる。85-90あたりで数値を設定するのが現実的なところかな。
参考：EWWW公式ヘルプ JPEG品質はパーセンテージではない/JPEG Quality is Not a Percentage

プラグインで圧縮（しない）

以前から、アップロードした画像の圧縮ツール＆webp変換ツールとしてEWWW Image Optimizerという有名プラグインを利用していた（有名すぎるので各所のWordpress指南系記事でオススメされている）。今後もこれをwebp変換用にのみだが利用していく。

というのも、特に何も考えずJPEG画像をEWWW Image Optimizerに投げると、初期設定では当然圧縮してくれるのだが、JPEGの再圧縮は画像が更に劣化する上に効果がほとんど得られない。クリスタで品質90で書き出したならEWWW側では再圧縮せずオリジナル保持にしたほうが最良だろう。
ちなみに、たとえEWWW側での品質の数値を100にしたとしても、JPEGは非可逆圧縮なので必ず劣化しピクセルが失われている（上記と同じページの、「品質100はロスレスではない/Quality 100 is Not Lossless」を参照）、つまりほぼ意味がないので注意。

というわけで、EWWW設定→ローカル→JPG 最適化レベルを「無圧縮」に変更。（他も好みで同様に）
ついでに他の設定として、「リサイズ」タブの項目はすべてのチェックを解除（リサイズ検知だけはオンにしても問題ない）、「変換」タブは「変換リンクを非表示」にチェックが入っているが、「オリジナルを削除」（これはオフを強く推奨）以下はすべてチェックを解除している。

webp変換

EWWWに任せる作業の本命だ。webpはGoogleが開発した新しい画像形式で、つまり細かい説明をすっ飛ばして雑に解説すると、サイズが軽くて読み込みが早いし劣化も少なくて可逆性があって最高～ということである。ちなみにwebpはウェッピーと読む。
EWWWは元画像を保持（上記設定）しながら、webpに変換し、対応しているブラウザにはwebpを、非対応のブラウザではjpeg（元画像）を配信という器用なことをやってくれる。EWWW設定→必須→webp変換にチェックを入れて右の画像が緑色になっていればOKである。私はこれだけで上手くいった。このあたりの解説自体は世の中に星の数ほど転がっているのでそちらを参照されたし。
設定→高度な設定でJPEGと同じくWebpの品質も設定できる。現在の私の設定は82。

今日では大体のブラウザがwebpに対応しつつあることから、サイトの画像はwebp一本に切り替えてしまい容量削減を図ることもできる……のだが私はチキンなので未だにJPEG画像を残しておいてある。1,2年後にはあっさり削除しているかもしれないけどね。

ファイル名とページスラッグに考える余地を残すのはやめろ

結局この記事で終始言いたいのはこれだけだ！　考える余地を残すのをやめて、機械的にルールに従い、悩むことなく更新するべきである。これはファイル名等にも言える。

まずは記事のスラッグ（URL）にタイトルとか、要素とかジャンルとか、そういう「少しでも考えて付けなければならないもの」を入れるのはやめた。ローマ字表記にするかとか英訳するべきかとか、そういうのを考えるのすら手が止まる原因になるから。現在はシンプルに

/[カテゴリ]-[YYYYMMDD]-[必要があれば連番]

といった感じ（そのせいでURLがいろいろ変わっており、すみません）。カテゴリというのはつまり形態で分けていて、イラストとか、本のサンプルページとか、そういう分類だ。
割愛するがファイル名もこんな感じでシンプルに名付けている。テスト出力とかも雑に名付けて消さないでこの命名規則に従うように…している。なるべく。これはもともとYYYYMMDD方式でファイル名をつける癖がついていたから問題はなかった。

本題（？）：不要画像サイズの削除【EASELカスタム】

この記事はほぼ私の思考メモ日記なので他人には役に立ちそうもないですが、もしかしたらこのカスタムだけは有用かもしれません。

複数サイズが自動で生成されている

前提として、WordPressはダッシュボードからの画像アップロード時に、オリジナル画像以外にテーマやプラグインで定義された複数サイズを自動生成して保存しています。つまり同じ画像のサイズ違いが何枚も存在しているわけです。これらはサムネイル等のために必要ではありますが、中にはサイトで全く使われていないものもあります。
これではなんか気持ち悪い不要な画像で容量を圧迫するのは不本意なので、EASELの標準機能では未使用だったサムネイルサイズを生成しないようにしてみようと思います。テーマのVerは1.6.1です。

注：設定>メディア の画像サイズ設定の項目で、最大サイズを大きくすることで追加生成の枚数を最小限にする（大サイズの上限を上げることで大サイズを生成させない…など）という方法も有用ではありますが、この設定項目とは別にテーマで独自のサイズを追加定義するため、今回削除するサムネイルは設定画面には出ていません。

何が不必要で、消すべきか

まずはどんなサイズの画像が生成されているのかを確かめます。私は前述の通り画像圧縮プラグインEWWW（略）を導入しており、メディアライブラリ>画像最適化の項目から各サイズに対しての圧縮の結果を見ることができたため、以前からBones-thumb-600(300)という謎のサイズがあるなぁと知っていました。他に調べる方法としては、Simple Image Sizesというプラグインを導入すると設定>メディアの下部に項目が追加され、追加生成されたサイズと名前を見ることができます。
この「bones」というのはどうやらカスタマイズ前提なWordPressテーマの名前で、「EASEL」の改変元のようです（EASEL親テーマ全体でbonesと検索するとところどころ名残がある）。

では本当にこの「Bones-thumb-600(300)」がEASELではどこにも使用されていないのか（=削除して問題ないのか？）という話になります。テーマの構成ファイルを横断して”bones-thumb”で検索したところ、funcitons.phpの719~727行に記述が見つかりました。これはadd_image_size()関数を使ってbones-thumb-600（600*150）とbones-thumb-300（300*100）という2サイズを追加し、名前付きサイズの選択肢にこれら2つが表示されるようにしているのだと思われます。他に”bones-thumb”と書かれている箇所は見当たらず、テーマ内で使用されている形跡はないと考えました。
※無論、自主的にこの2サイズを選んでいる場合は別です！画像ブロックの解像度の選択肢に「600px by 150px」などが表示されているので選んで使用していないか注意。あくまでEASELの作品一覧やショートコードで追加できる作品リストにはこれらbones-thumbが使用されていない、という話です。

実際の手順

不要な画像サイズを制御するにはプラグインを使う方法（例えば先程のSimple Image Sizesは追加生成されたサイズを確認できるだけでなく削除やサイズ変更も行える。また、Ewww Image Optimizier設定→リサイズから作成を無効化できると思われる。挙動は未確認）もありますが、今回は子テーマのfunctions.phpを編集します。

remove_image_size()を使ってadd_image_size()で追加したサイズを削除します。
子テーマcanvas_on_easelのfunctions.php内の「// PHPを追記する場合はここより下に書いてください。」の通りの位置に書けばOK

function canvas_remove_image_sizes() {  //関数の定義
    remove_image_size('bones-thumb-600');  //指定された名前の画像サイズを消す
    remove_image_size('bones-thumb-300');
}
add_action('init','canvas_remove_image_sizes',100);

function canvas_remove_image_sizes() {  //関数の定義
    remove_image_size('bones-thumb-600');  //指定された名前の画像サイズを消す
    remove_image_size('bones-thumb-300');
}
add_action('init','canvas_remove_image_sizes',100);

これで新規アップロード時にこの画像サイズが生成されることはありませんが、既存の画像フォルダ内にあるbones-thumb-*はそのまま残るためプラグイン等で消す必要があります（多分手動でやってもいいけど）。私は「Regenerate Thumbnails」を使ってサムネイルを再生成してきました。スッキリ！！！

私のように見えない所が無駄に気になってしまう人の助けになれば（なるのか？）幸いです。