ウェブサイトの画像が表示されなくなった。WebP変換を元に戻して回復

先日のWordPressの再インストールを行ったのですが、その後遺症として、ブログのサムネイル画像、本文中に貼り付けていた画像がことごとく表示されなくなってしまいました・・・。

正確に言うと、以下のように「alt属性の文字は表示されているのに、画像は表示されていない」という状況でした。

その後あれこれ調べて回復することができましたが、今回の原因と回復するために行ったことをお伝えいたします。

EWWW image optimizerの設定を見直す

当社のウェブサイトにはプラグインとして「EWWW image optimizer」を導入しており、以前に画像のWebP変換をしました。当時は変換に成功し画面上に　WebP　と表示されていたのですが、今回のWordPress再インストール後に見てみるとその表示が無くなっていました。

そこで、一旦WebP変換の✅を外して、設定を保存しました。

.htaccessの記述を見直す

EWWW image optimizerでWebP変換を設定する際に、FTPを使って.htaccessに以下の記述をしていたので、その記述も一旦クリアし、.htaccessを上書きしました。

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
	RewriteCond %{REQUEST_FILENAME}\.webp -f
	RewriteCond %{QUERY_STRING} !type=original
	RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch "\.(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webp

その結果、ウェブサイト上の画像は元通りに表示されるようになりました。