Evitar que una imagen sea arrastrable o seleccionable sin usar JS

He estado olvidando compartir mi solución, no pude encontrar una manera de hacer esto sin usar JS. Hay algunos casos de esquina donde @ Jeffery CSS sugerido de madera simplemente no cubrirá.

Esto es lo que aplico a todos mis contenedores de IU, no es necesario aplicarlo a cada elemento ya que se vuelve a aplicar a todos los elementos secundarios.

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

Esto era mucho más complicado de lo que tenía que ser.

Puedes usar la propiedad pointer-events en tu CSS, y establecerla igual a 'none'

img {
    pointer-events: none;
}

Editado

Esto bloqueará el evento (clic). Así que mejor solución sería

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Dependiendo de la situación, a menudo es útil hacer que la imagen sea una imagen de fondo de un div con CSS.

<div id='my-image'></div>

Luego en CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

Ver esto JSFiddle para un ejemplo en vivo con un botón y una opción de tamaño diferente.

Probablemente podrías recurrir a

<img src="..." style="pointer-events: none;">

Puede establecer la imagen como imagen de fondo. Dado que reside en un div, y el div es indragable, la imagen será indragable:

<div style="background-image: url("image.jpg");">
</div>

Una solución genérica especialmente para el navegador Edge de Windows (como la regla-ms-user-select: none; CSS no funciona):

Ventana.ondragstart = function () {return false}

Nota: Esto puede ahorrarle tener que agregar draggable=false a cada etiqueta img cuando aún necesita el evento de clic (es decir, no puede usar pointer-events=none), pero no desea que aparezca la imagen del icono de arrastre.