htmlfirefoxbase64png

base64 encoded image not showing in Firefox, but works in Safari

Consider the following MWE:

<html><body>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAQAACAYAAAAY4xeyAAAFBUlEQVR4nO3TsQ0DAQwDMSX77+wUGeIfOKpgbRnQJiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiUs/d7rtteJDb5w1nAA9hAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhYAmAHiWADaWADaWADaWABgBohjAWhjAWhjAWhjAYAZII4FoI0FoI0FoI0FAGaAOBaANhaANhaANhaA273hDD9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9QX30/UN8P1FffD9T3A/XV9wP1/UB99f1AfT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f0gX98P1G/X94N8fT9Qv13fD/L1/UD9dn0/yNf3A/Xb9f+5xy8QERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERGR/QDbFZbTN31phAAAAABJRU5ErkJggg==" style="width: 20px; height: 200px; border: 1px solid black;" />
</body></html>

The image shows properly in Safari:

enter image description here

But not in Firefox:

enter image description here

Why is that happening, and how can it be fixed?

The image is a PNG file.

Solution

  • Firefox apparently doesn't like images with dimensions that large. The limit for either dimension is 32,766, where yours is 65,536 pixels tall (and one pixel wide). The solution would be to simply make your image smaller.

    Update:

    That limit is out of date. However there is still a limit that excludes your image, but just. Per the tests I did, the current version of Firefox will display 65535x1 and 1x65535 pixel images, but not 65536x1 or 1x65536 pixel images. So the limit is 65535. All you need to do is remove one pixel from your image, and it will work with Firefox!