Tip #9: Disable image drag by setting draggable to false

  • — HTML

  • 1 min. read

  • — 2/15/2023

Annoyed that your users can drag and save your images offsite?

It's actually an intended feature of the browser (and its recommend you keep it enabled for accessability purposes)

Though sometimes there are good reasons for disabling image dragging/saving all-together like when you have purely graphical SVG elements.

Whatever your use case is, here's two simple ways to disable image dragging in HTML:

  1. Add draggable="false" to your img tag (ex: <img draggable="false" src="..."/>
  2. Add user-drag: none; to img selector in a CSS file (recommended)

I prefer the second method here because you only have to define 1 CSS selector and 1 property for it to take effect site-wide.

Keep in mind though, you probably don't want to disable image dragging unless you have a compelling reason to!

Shaun Chander

hey (again), I'm shaun

I'm posting 3 tips on creative web development daily. Subscribe below to to get tips delivered straight into your inbox!