Dev Tips

DevTools: Drag and drop new images to override them on a website

You can use the Local Overrides feature of DevTools to easily drag/drop images from your filesystem into DevTools. Doing this overrides the usual website image with your version. Subsequent page reloads use your new local image rather than the production version.

To try this, you must:

Enable local overrides.
Locate the original website image in the Sources Panel > Page Pane.
Drag and drop your new image from the filesystem over the existing image in the Sources Panel.

Tip: Check out my video Improving page performance with Chrome DevTools for a practical use case for using the Local Overrides feature.