画像翻訳ケース一覧

1. URLキーの不整合 (img vs background-image)

同じ画像をimgタグとbackground-imageで使った場合、異なるキーで保存される。

img タグ (相対URL)

<img src="/cat1.webp">

div with background-image (相対URL)

background-image: url("/cat1.webp");

2. background-image の値の種類

url(), gradient, image-set, 複数レイヤーなど。

単一 url()

background-image: url("/cat1.webp");

複数 url() レイヤー

background-image:
  url("/al-feature.png"),
  url("/cat2.webp");

url() + linear-gradient() ミックス

白いテキスト

background-image:
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url("/cat3.webp");

image-set()

background-image: -webkit-image-set(
  url("/al-feature.png") 1x,
  url("/al-feature-2x.png") 2x
);

gradient のみ (URL なし — 対象外)

background-image: linear-gradient(135deg, #667eea, #764ba2);

3. 特殊なURLスキーム (data:, #fragment)

非HTTP(S)のURLスキーム。

data: URL (インライン SVG)

background-image: url("data:image/svg+xml;utf8,<svg ...>");

SVG フラグメント参照 (#fragment)

background-image: url("/sample.svg#some-fragment");

4. 疑似要素の背景画像

::before, ::after, ::backdrop など疑似要素に設定された背景画像。

::before に背景画像

左にアイコン (::before)

.al-demo-before::before {
  background-image: url("/al-feature.png");
}

::after に背景画像

右にアイコン

.al-demo-after::after {
  background-image: url("/cat1.webp");
}

::before と ::after の両方

::before { background-image: url("/cat1.webp"); }
::after  { background-image: url("/cat2.webp"); }

host + ::before + ::after の3つ全部

host     { background-image: url("/cat3.webp"); }
::before { background-image: url("/cat1.webp"); }
::after  { background-image: url("/cat2.webp"); }

::backdrop (dialog)

dialog::backdrop {
  background-image: url("/cat3.webp");
}

::first-letter

Aで始まる文章。最初の文字に背景画像が適用される。

p::first-letter {
  background-image: url("/al-feature.png");
}

::file-selector-button

::file-selector-button {
  background-image: url("/cat2.webp");
}

::-webkit-scrollbar-thumb (Chromeのみ)

スクロールしてスクロールバーを確認:

行 1

行 2

行 3

行 4

行 5

行 6

行 7

行 8

行 9

行 10

行 11

行 12

行 13

行 14

行 15

行 16

行 17

行 18

行 19

行 20

::-webkit-scrollbar-thumb {
  background-image: url("/cat1.webp");
}

5. 非表示 (複数レイヤー)

複数レイヤーの背景画像で非表示にすると要素ごと隠れる。

3レイヤーの背景 (gradient + badge + 写真)

テキスト + 3レイヤー背景

background-image:
  url("/al-feature.png"),
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
  url("/cat3.webp");

6. CSP (Content Security Policy)

strict CSPはinline style書き込みをブロックする。

Content-Security-Policy: style-src 'self';
# → inline style + <style> 注入が無効になる

7. 動的な state (hover, media query)

SDKはresting stateのみ翻訳する。

:hover で背景画像が切り替わる

:hover { background-image: url("/cat2.webp"); }

@media (min-width) で切り替わる

@media (min-width: 700px) {
  background-image: url("/cat2.webp") !important;
}

prefers-color-scheme でダーク時に切り替わる

@media (prefers-color-scheme: dark) {
  background-image: url("/cat3.webp") !important;
}

8. 顧客JSとの衝突

data属性やCSS !importantの衝突。

顧客が data-al-bg-id を使用

data-al-bg-id="customer-existing-value" を持つ要素

<div data-al-bg-id="customer-existing-value">

顧客の !important が SDK を上回る

.customer { background-image: url("/cat1.webp") !important; }

9. <picture> + <source> タグ

<picture>内の<source>要素のsrcset URL翻訳。ブラウザは<source>を<img>より優先する。

9-1: フォーマットフォールバック (type)

WebP対応ブラウザは<source>のWebP画像、非対応は<img>のPNGを表示。

<picture>
  <source srcset="/cat1.webp" type="image/webp">
  <img src="/al-feature.png">
</picture>

9-2: レスポンシブ画像 (media)

ビューポート幅に応じて異なる画像。800px以上 / 480px以上 / フォールバック。

<picture>
  <source srcset="/cat3.webp" media="(min-width: 800px)">
  <source srcset="/cat2.webp" media="(min-width: 480px)">
  <img src="/cat1.webp">
</picture>

9-3: <source>に複数エントリのsrcset

1つの<source>に幅descriptor付きの複数エントリ。各URLが個別に表示される。

<picture>
  <source srcset="/cat3.webp 800w, /cat2.webp 480w" type="image/webp">
  <img src="/cat1.webp">
</picture>

9-4: <source>と<img>が同じURL

<source>と<img>が同じURLを共有する場合。

<picture>
  <source srcset="/cat1.webp" type="image/webp">
  <img src="/cat1.webp">
</picture>

9-5: <video>内の<source>（対象外）

<video>内の<source>は画像翻訳の対象外。

<video controls>
  <source src="/nonexistent-video.mp4" type="video/mp4">
</video>