- 投稿者
8/7：公式の問題報告において直された、解決した旨の記載があったため追記しました（コチラ）
8/4：公式の問題方向において直された物が適用される時期に進捗が有ったため追記しました（コチラ）
8/1：公式の問題報告において直された物がロールアウトされた進捗が有ったため追記しました（コチラ）
7/27：公式の問題報告において直されそうな進捗が有ったため追記しました。（コチラ）
7/26：HTMLメールのコードを書く方向けに回避できるHTMLコードを追記しました。
（コチラ）
Gmailのブラウザ版において、とんでもない！変更が行われました。
HTMLメールを構成するHTMLのコードが、書いた人の意図しない形で消されてしまう
CSS・Style属性・Styleブロック（Styleタグ）が丸ごと消されてしまう
伴って、色が消える・構造が崩れる・画像が無くなる
事象が発生しています。
この事象の経緯と対応方法を、まとめてみました。
目次
いつから？
検知できたのは7/25ですが、7/20頃から発生しているようです。
これは、GmailのWEBブラウザ版が徐々に最新版へアップデートされる事からだと思われます。
徐々に最新版へアップデート
の優先度はGsuite等の有料版利用ユーザーから優先、の場合が多いです。
- 取引先へのビジネスメール
- BtoBメールマガジン
等、Gsuite利用の受信者には早く影響が出ている懸念を持っても良いかもしれません。
なんで変更された？
本記事の事象に該当するリリース内容や事前情報も存在せず、
なんで変更されたのか？は不明な状況だと認識して良いと思われます。
公式のブログでは7月中旬から様々な機能リリースがある旨の記載がありますが、
スケジュールは
リリース スケジュール
管理者向けの設定:
即時リリース / 計画的リリースを利用しているドメイン: 2023 年 7 月 10 日以降、段階的に展開（最長 15 日で機能が実装されます）
エンドユーザー向けの設定:
即時リリースを利用しているドメイン: 2023 年 7 月 27 日以降、段階的に展開（最長 15 日で機能が実装されます）
計画的リリースを利用しているドメイン: 2023 年 8 月 7 日以降、段階的に展開（最長 15 日で機能が実装されます）
とされており、 事象発生はリリーススケジュールの記載より早い為、リリースに伴う変更なのかも、分かりません。
どんな時に、どんな影響が出る？
下記のメール
- HTMLメールである
- CSS、具体的にはStyleブロック（Styleタグ）・Style属性において
backgroundもしくはbackground-imageプロパティでURLを用いて外部参照をしている
<style>
.elm{
background: url("https://kiehakomaru/gazou.png");"
}
</style>
style="background-image: url('https://kiehakomaru/gazou.png');"
下記の状況
- GmailのWEBブラウザ版でメールを見る
- OS・ブラウザ製品・ブラウザのバージョンは問わない
様々な噂は書き込まれていますが、上記の徐々にリリースに伴う誤解から生まれていると思われます。
下記の影響
- 画像が表示されない
- 文字色・背景色が無くなり白飛びしてしまう
- 見た目が崩れる
なんで影響が出る？
メールを読むためのメーラーはGmailに限らず、
受信したメールを一定の変更を行った上で表示する
事は多々あります。（画像後読み込み、省略表示）
中でも、画像やリンクに対しては、
受信したメールのHTMLコードを書き換える
レベルでの変更が行われる事も有ります。
今回の場合は、
酷く書き換えられてしまう
事で、影響が出てしまっています。
具体的には、
- Styleブロック（Styleタグ）を使用していて、
その中にbackgroundもしくは、background-imageプロパティを用い、url(...の記載で外部参照をしている場合
Styleブロックが丸ごと消されてしまう - Style属性を使用していて、
その中にbackgroundもしくは、background-imageプロパティを用い、url(...の記載で外部参照をしている場合
Style属性が丸ごと消されてしまう
という書き換えが発生しています。
これから、どうなっていく？
Googleへの問題報告は行われており、7/26に検知されたようです。
困っている方はissueページ右上の+1投票を、是非行ってください。
この問題の大きさを製品担当へ伝える事が出来ます。
7/27 直されそうな進捗を追記
7/27 公式の問題報告において直される旨の記載が追記されました。コチラ
まだ、今回の事象がどのような原因だったのか？
対して何が直るのか？いつ直るのか？は記載が無く、まだ事象が出てしまう状況は続くかもしれません。
8/1 直されたバージョンが適用される進捗を追記
8/1 公式の問題報告において直されたバージョンがロールアウトされた旨の記載が追記されました。コチラ
直されたものがロールアウトされた、但し、全てのユーザー（受信者）に、いつ適用されるのか？は言えない旨が追記されました。
この「言えない」はルール的な事ではなく、今回の事象が徐々に発生するようになったのと同じく（上記経緯）、
GmailのWEB版クライアントが徐々に最新化される仕組みであることから「解らない」の意図だと思われます。
事象が5日間に渡って広まった経緯と同じ期間だと考えると、
8/5・8/6の土日を含む今週は事象が継続するつもりで対応を続けるべきだと考えた方が良いかもしれません。
8/4 直されたバージョンの適用される時期を追記
8/4 公式の問題報告において直されたバージョンが数日で全ユーザーに反映されることが期待される旨が追記されました。コチラ
直された、それがロールアウトされている事は本当のようです！
明日明後日には全ユーザーに直された物が適用される事を期待している、ようです。
「期待される」なので本当か？は判りませんが、予想通りではあるので月曜に事象が解消されている事を楽しみにしています。
8/7 直された、事象が解決された報告を追記
8/7 公式の問題報告において直された、解決した旨の記載が追記されました。
問題報告のステータスが「Fixed（直された）」に変更されました。
併せて手元の複数のブラウザ版で事象が発生しなくなった事を確認しています。
解消したと思って良いと思われます。
楽観的に考えると、
公式の記載が無い変更内容が乱暴すぎる
事から、
バグなのではないか？元に戻るのではないか？と考えられます。
しかし、悲観的な想定をすると、
昨今のiOSにおいてメール開封検知に対するプライバシーリレー対応が行われたGoogleは画像をキャッシュしたい？使わせたくないリリースを時々する何れもメーラーが画像を読まないようにする方式
事、等から
HTMLメールにおける画像の利用・画像を用いた開封計測に対して、
メーラー側が意図を持って様々な対応を行ってくる、その中の一環かもしれない
とも懸念できます。
Googleのリリース情報や問題への対応状況を見続けないと、どうなっていくのか？は判らない状況です。
対応は、どうすれば良い？
メールを読む方向け
- スマホアプリで読む
アプリでは事象が発生しない事を確認しています。
HTMLメールのコードを書く方向け
- styleブロック（Styleタグ）・style属性の中で、
background: url(...といった外部参照は行わない
対応が必要です。
7/26回避策を追記
回避策を発見、検証しました。
styleブロック（Styleタグ）の中では外部参照が使えない事は変わらないのですが、
style属性を用いずにbackground属性の中では外部参照が可能という物です。
駄目なケース
<div style="color: red; background: url(https://kiecha-komaru/gazou.png)">消えるDIV</div>
大丈夫なケース
<div style="color: red;" background="https://kiecha-komaru/gazou.png">消えないDIV</div>
styleブロック（Styleタグ）を用いている場合は大変ですが、
style属性を用いている場合には、対応しやすい場合も多い方法だと考えています。
HTMLメールのテンプレートを変更して利用している、HTMLメールを簡単に作れる製品を利用している方向け
この事象に当たっていないか？をWEBブラウザ版のGmailに試しに送ってみる等で確認する事が必要です。
- 事象に当たってる場合には、状況が解るまで利用を止める
- 可能な場合はテンプレート・製品を提供している方に対応状況を確認する
最新情報を知りたい・もっと詳しく知りたい方向け
海外では先に騒がれており、その中での状況や事象が発生する様々なHTMLコードを確認する事が出来ます。
公式への問題報告
Gmail製品担当の現場レベルでの最新状況の報告が解ると思われます。
https://issuetracker.google.com/issues/291989158
公式の機能リリース内容ブログ
意図のあるリリースだった場合には、ココで通知されると思われます。
英語（情報が早い）https://workspaceupdates.googleblog.com/2023/
日本語（英語より更新が遅い）https://workspaceupdates-ja.googleblog.com/2023/
他メディアの情報
具体的なコードレベルの内容が詳しく確認できます。
https://parcel.io/blog/gmail-and-background-images
https://freshinbox.com/blog/gmail-rolling-out-changes-that-strip-background-image-css/
