Edge select image

HTML

<h1>Without timeout</h1>
<div contenteditable="true" style="outline: 1px dotted red; padding: 1em;">
    <img id="img-raw" alt="Saturn V carrying Apollo 11" src="//cdn-source.ckeditor.com/4.5.1/standard/samples/img/logo.png"/>
</div>

<h1>With timeout</h1>
<div contenteditable="true" style="outline: 1px dotted green; padding: 1em;">
    <img id="img-timeout" alt="Saturn V carrying Apollo 11" src="//cdn-source.ckeditor.com/4.5.1/standard/samples/img/logo.png"/>
</div>

<h1>Without JS help</h1>
<div contenteditable="true" style="outline: 1px dotted green; padding: 1em;">
    <img alt="Saturn V carrying Apollo 11" src="//cdn-source.ckeditor.com/4.5.1/standard/samples/img/logo.png"/>
</div>

JavaScript

var imgRaw = document.getElementById( 'img-raw' );

imgRaw.addEventListener( 'mousedown', function( evt ) {
    var r = document.createRange();
    r.setStartBefore( imgRaw );
    r.setEndAfter( imgRaw );
    
    var s = window.getSelection();
    s.removeAllRanges();
    s.addRange( r );
    
    evt.preventDefault();
} );

var imgTimeout = document.getElementById( 'img-timeout' );

imgTimeout.addEventListener( 'mousedown', function( evt ) {
    var r = document.createRange();
    r.setStartBefore( imgTimeout );
    r.setEndAfter( imgTimeout );
    
    setTimeout( function() {
        var s = window.getSelection();
        s.removeAllRanges();
        s.addRange( r );
    }, 100 );
    
    evt.preventDefault();
} );