How can I avoid flickering when image is changed for another with MouseEvent?
<p>I have a clickable image (logo) that I want to be defined in HTML (not CSS) since it's a logo that sits in the menu, should be scaled with the text and also is a semantic part of the content.</p>

<p>I want it to change on hover so:</p>

<pre><code>&lt;img src="logo.svg"
    onmouseover="this.src='logo_hover.svg'"
    onmouseout="this.src='logo.svg'"&gt;
</code></pre>

<p>The problem is that the menu and logo flickers when I hover the image. This doesn't always happen but seems to have to do with that it takes a blink for the new image to be scaled right. I have <code>width: 100%</code> on the logo and <code>width: 5em</code> set on the div that holds it.</p>

<p><strong>How can I avoid this flickering?</strong> Should I set both width and height on the image, if so how do I find out what height the image should have? Or is there some other way to avoid the browser being "surprised" when the new image is loaded?</p>

<hr>

<p><strong>What I've triend so far:</strong></p>

<p>I've already tried to preload the image with javascript, and also with a <code>&lt;link rel='prefetch'&gt;</code> tag, but the flickering still happens.</p>