<p>I've discovered that GIMP (as of v2.10) has a new set of &quot;default&quot; blending modes which is what I used for creating my images.  If, using the two images, I blend them using &quot;legacy normal&quot; then I get results matching that of web browsers.</p>
<p>&quot;Default&quot; blending is done in linear light while &quot;legacy&quot; blending is done in gamma-corrected (perceptual) space.</p>
<p>By altering the blending of all my original layers (at least those with non-binary transparency) to be the &quot;legacy&quot; version and merging into two layers as described in the question, I can then overlay the results using a web browser to get the expected results.</p>
<p>It seems a &quot;default normal&quot; blending opacity of 67% is equivalent to a &quot;legacy normal&quot; blending opacity of 40% (or at least close enough that I couldn't see any difference visually).</p>

CC BY-SA 4.0
2023-09-11T14:57:54.170Z
2023-09-11T14:57:54.170Z
Brian White
<p>I have some graphic drawings of the floors of a hours that I want to display on a web page.  Drawn in GIMP, there are several layers all with &quot;normal&quot; mode:</p>
<p><a href="https://i.sstatic.net/55Nh2.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/55Nh2.png" alt="house layers" /></a></p>
<p>From bottom to top, the layers are:</p>
<ul>
<li>ground (grass and building outline)</li>
<li>first floor, with shutters outside the window</li>
<li>ground copy to cover those shutters</li>
<li>67% opaque black &quot;scrim&quot;</li>
<li>second floor</li>
</ul>
<p>If there was no &quot;ground copy&quot; then the shutters from the first floor would be visible when viewing the second floor and, because they're black, not be distinguished as &quot;behind the scrim&quot; and thus on a lower level.  It doesn't look good and sometimes they clash with shutters from second-floor windows.  Hence: Just remove them by copying the ground over them.</p>
<p>The result, when composited in GIMP is this:</p>
<p><a href="https://i.sstatic.net/6AIIB.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/6AIIB.png" alt="composited image" /></a></p>
<p>For my web page, I want the &quot;ground&quot; level to always exist and just change floor graphics.  The first floor has only &quot;on&quot; or &quot;off&quot; transparency and works fine.  The second floor, with collapses the top 4 layers (including the scrim), ends up like this:</p>
<p><a href="https://i.sstatic.net/61VY6.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/61VY6.png" alt="second floor overlay" /></a></p>
<p>You'll note that the &quot;ground cover&quot; is opaque (but dimmed) while the &quot;scrim&quot; is partially (33%) transparent.</p>
<p>If I composite only that merged overlay with the original &quot;ground&quot; layer in GIMP, I get something identical to the original composited image, which is as you'd expect.</p>
<p>However, when I place the composited &quot;second floor&quot; layer over the &quot;ground&quot; layer <em>on my web page</em>, it doesn't behave the same.  I get this:</p>
<p><a href="https://i.sstatic.net/uy5XL.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/uy5XL.png" alt="web composited result" /></a></p>
<p>You can see that all the opaque areas of the second floor appear correctly but the &quot;ground&quot; behind it is much dimmer, passing maybe 1/2 as much color at a guess.</p>
<p>There is no CSS.  It's currently just two overlaid images:</p>
<pre><code>&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div style=&quot;position: absolute;&quot;&gt;&lt;img src=&quot;1.png&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;position: absolute;&quot;&gt;&lt;img src=&quot;2.png&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><em>Can anybody explain why my web browser (Chrome) would composite two graphic layers differently than GIMP?</em></p>

<transparency><compositing>
How is HTML Alpha-Blending Different than GIMP?
Brian White
# How is HTML Alpha-Blending Different than GIMP?

(Asked by: username_0 on 2023-09-11)

I have some graphic drawings of the floors of a hours that I want to display on a web page. Drawn in GIMP, there are several layers all with "normal" mode:

[![house layers](https://i.sstatic.net/55Nh2.png)](https://i.sstatic.net/55Nh2.png)

From bottom to top, the layers are:

* ground (grass and building outline)
* first floor, with shutters outside the window
* ground copy to cover those shutters
* 67% opaque black "scrim"
* second floor

If there was no "ground copy" then the shutters from the first floor would be visible when viewing the second floor and, because they're black, not be distinguished as "behind the scrim" and thus on a lower level. It doesn't look good and sometimes they clash with shutters from second-floor windows. Hence: Just remove them by copying the ground over them.

The result, when composited in GIMP is this:

[![composited image](https://i.sstatic.net/6AIIB.png)](https://i.sstatic.net/6AIIB.png)

For my web page, I want the "ground" level to always exist and just change floor graphics. The first floor has only "on" or "off" transparency and works fine. The second floor, with collapses the top 4 layers (including the scrim), ends up like this:

[![second floor overlay](https://i.sstatic.net/61VY6.png)](https://i.sstatic.net/61VY6.png)

You'll note that the "ground cover" is opaque (but dimmed) while the "scrim" is partially (33%) transparent.

If I composite only that merged overlay with the original "ground" layer in GIMP, I get something identical to the original composited image, which is as you'd expect.

However, when I place the composited "second floor" layer over the "ground" layer *on my web page*, it doesn't behave the same. I get this:

[![web composited result](https://i.sstatic.net/uy5XL.png)](https://i.sstatic.net/uy5XL.png)

You can see that all the opaque areas of the second floor appear correctly but the "ground" behind it is much dimmer, passing maybe 1/2 as much color at a guess.

There is no CSS. It's currently just two overlaid images:

```
<html>
<head></head>
<body>
<div style="position: absolute;"><img src="1.png"></div>
<div style="position: absolute;"><img src="2.png"></div>
</body>
</html>

```

*Can anybody explain why my web browser (Chrome) would composite two graphic layers differently than GIMP?*

**Tags:** transparency, compositing


---

## 1 answers

### Answer by username_0 on 2023-09-11. Score: 1 | Accepted answer

I've discovered that GIMP (as of v2.10) has a new set of "default" blending modes which is what I used for creating my images. If, using the two images, I blend them using "legacy normal" then I get results matching that of web browsers.

"Default" blending is done in linear light while "legacy" blending is done in gamma-corrected (perceptual) space.

By altering the blending of all my original layers (at least those with non-binary transparency) to be the "legacy" version and merging into two layers as described in the question, I can then overlay the results using a web browser to get the expected results.

It seems a "default normal" blending opacity of 67% is equivalent to a "legacy normal" blending opacity of 40% (or at least close enough that I couldn't see any difference visually).


---

