Display images in your developer console!

Download

You can download the latest version from the GitHub repository:

https://github.com/workeffortwaste/consoleimg/

Usage

Use the following code before the closing </body> tag. 
    <script src="consoleimg.min.js"></script>
    <script>
        consoleimg.load('image.jpg', {size: 320, color: '#FFFFFF'})
    </script>

Optional arguments

size
Maximum height for the image to be displayed at. The default is 320.

color
CSS background-color to be used for the image. The default is transparent.

Compatibility

Browsers

Image Formats

All image formats that are supported by CSS background-image should work without issue, including SVGs with animation.

Yes, that does include animated .gifs.

Yes, it also means you could do *that*.

Demo

Look at this site's developer console to see an animated SVG example, otherwise use the tool below to instantly see how your images will look in the developer console.

Image Checker
Drag and drop an image here.

Frequently Asked Questions

Why on earth would you make this?

Sorry :-(

Will it slow down my website?

The image request uses the fetch API asynchronously, unless you're loading large images there shouldn't be a significant impact.

What happens on mobile?

By default the images will still be downloaded. It's up to you to decide if you want to detect for a mobile device and not push the image to the console.

Who made this?

I did, you can find me on Twitter for more nonsense like this.

@defaced