GhostでWebp/AVIFを使う

はじめに

最近、WebpやAVIF形式といった次世代画像フォーマットを積極的に使うようになった。これらの形式は、従来のJPEGやPNG形式と比較して、同等の画質を保ちながらファイルサイズを大幅に削減できるという特徴がある。ページの読み込み速度が向上し、画質の劣化も気にならないため、本ブログでも積極的に使っていきたいと考えている。

ただし、Ghostで運用する際には、いくつか把握しておくべき仕様がある。

Ghostにおける画像処理の仕様

Ghostでは、アップロードされた画像に対して自動的な処理が行われる。特に注意すべき点は以下の通りだ。

GhostPro supports webp or avif?

Sharing tests for any future people searching about this. Okay I like to be exacting and detail oriented, especially when learning a new tool/platform, and just did some tests since the Images documentation here: Editor cards says: “Uploaded images will be automatically optimized for the web with lossless compression” But support@ghost said: When uploading images, the supported image formats you use are preserved in Ghost, and used as is if they are 2000px in width or smaller. In testi…

Ghost Forumneotint

長辺が2000pxを超える画像は、テーマによって自動的に2000pxへとリサイズされる。

この仕様は、SEOの観点から読み込み速度を最適化するためのものと考えられる。大きすぎる画像をアップロードしても、自動的に適切なサイズに調整されるため、必ずしも悪い仕様ではない。しかし、意図しない画質の劣化を避けるためには、この仕様を理解した上でワークフローを構築する必要がある。

推奨ワークフロー

理想的には、画像を事前にWebp形式へ変換し、2000px以下にリサイズしてからGhostへアップロードするのが望ましい。これにより、Ghostの自動処理を回避し、自分が意図した形で画像を配信できる。手元にリサイズ前の画像を残せば、高解像度の画像を楽しむこともできる。

ただし、毎回手動でリサイズを行うのは手間がかかる。そこで、以下のような効率的なワークフローを構築することを推奨する。

手順

1. 現像時の設定：現像ソフトで書き出す際に、長辺2000px以下の設定で出力する
2. 高品質JPEG出力：Webpを直接出力できない現像ソフトの場合、JPEG品質100で一度出力する
3. 一括変換：出力されたJPEG画像をWebp形式へ一括変換する
4. Ghostへアップロード：変換済みのWebp画像をGhostへアップロードする

補足

多くの現像ソフトは、Webp形式を直接出力する機能を持っていない。そのため、一度高品質なJPEG（品質100）で出力し、それを専用のツールでWebpへ変換するという二段階のプロセスが現実的だ。

JPEG品質100で出力する理由は、この段階での画質劣化を最小限に抑えるためである。JPEGからWebpへの変換時に再圧縮が行われるため、元となるJPEGは可能な限り高品質である必要がある。

一括変換には、コマンドラインツールやバッチ処理スクリプトを利用すると効率的だ。複数の画像を一度に処理できるため、ブログ記事用の画像を準備する際の手間を大幅に削減できる。

まとめ

GhostでWebp/AVIF形式の画像を使用する際は、2000pxの制限を念頭に置いたワークフローを構築することが重要だ。現像時に適切なサイズで出力し、高品質なJPEGを経由してWebpへ変換することで、画質を保ちながらファイルサイズを最適化できる。

この方法であれば、Ghostの自動処理に頼ることなく、自分が意図した品質とサイズの画像を配信できる。