Embedding Images

Image management for embedding and editing is one of strongest arguments for using a dedicated Markdown Editor. Markdown Monster gives you lots of options to embed and work with images in your documents.

Image Embedding

Image Manipulation

Image Embedding

Image embedding is one of the strengths of Markdown Monster and you have many, many options of getting images into the editor from doing it manually, pasting, dragging or using the various tools.

Using Markdown Image Syntax

When linking local content that is well known and in a relative path, it's easy to simply type the image link directly into the Markdown document:

![automated like clockwork](clockwork.jpg)

The two parameters here are the optional title and image URL respectively. Typing is easy if you're familiar with Markdown, and the image is easily referenced as a local relative link from your document.

Paste an Image from the Clipboard

A very common image use case is to capture images from other sources and paste them into the editor. It's easy to get images onto the clipboard from your Web Browser, screen capture, or simple Ctrl or Alt-PrtScrn to capture the desktop or active window.

If you have an image on the clipboard you can paste it into the document using ctrl-v or the editor context menu and Paste Image. When pasted MM asks for a file name to save to - by default in the same folder as the markdown document.

Images can be saved in a number of formats. Screen capture smallest as PNGs, while photos work best as JPGs. PNG images are automatically optimized for maximum PNG compression. JPG image compression can be set via the JpegImageCompressionLevel which defaults to 80.

Using the Image Dialog from the Toolbar

You can click on the Image button in the Toolbar to activate the Image Dialog. Using this dialog you can add an image from a URL, from the file system or the Clipboard. If you pick from disk the image is optionally copied to the local or relative folder where the Markdown document lives. The dialog also automatically picks up clipboard images if no file is selected but an image is on the clipboard. Clipboard images can be saved to disk and embedded from here.

You can also use the Edit button to open the image in your configured editor which can be configured in the Tools -> Settings with the ImageEditor key.

Drag Images from Folder Browser

Markdown Monster includes a File and Folder Browser that lets you browse files including images. You can click on the image to preview it, and click and hold to drag the image into the active document.

It's most useful for working with files in the current document directory and you can easily drag images from the folder browser into the editor. Images are automatically embedded at the cursor drop location.

Drag Image from Explorer

You can also drag an image from Explorer directly into a document. Simply pick a file in Explorer (or other Shell Explorer) and drag an image file into the editor. When the file is dropped MM prompts to save the file to disk, by default in the same location as the current document.

The Screen Capture Addin

You can also use the Screen Capture addin using the Screen Capture button on the toolbar to capture images from your screen, including mouse pointers and menus and using features like delayed captures so you can capture screen interactions like open menus and selections.

You can choose from the built in screen capture shown above, or using the built-in integration for popular SnagIt Tool from Techsmith

Addin.OnSaveImage()

It's also possible to override the above two behaviors by creating an add-in that overrides the OnSaveImage() method. The method is passed either a string with a filename or a Bitmap and the add-in can then decide on how to manage the save operation. For example, you could create a save handler that automatically saves to Azure Blob storage or an Imgur image save operation.

More in a Blog Post

For a more detailed look at image saving options, see this very detailed blog post:

Getting Images into Markdown Documents and Weblog Posts with Markdown Monster

Working with Existing Images

Once images have been captured and saved you can also easily view and edit them directly from Markdown Monster.

Once an image has been embedded into the editor you can open the image again in the Image Link Dialog or you can edit the image in your preferred external (and configurable) editor.

Embedded images in the editor can be accessed by right clicking in the editor. Using the Edit Image Link link reopens the Image dialog shown above to allow you to edit the link or paste in a new image. From the dialog you can also copy the image to the clipboard.

Editing an Image in External Editor

The other Image option on the dropdown menu is Edit Image which allows you to open the image in an external editor that is configurable in Settings->ImageEditor. The default is Paint.Net if installed or plain old Paint if not. You can specify a path to any other image program you want to use for editing images.

Folder Browser Image Options

The folder browser includes a host of features that make it easy to work with images:

Image Preview

You can see images previewed in a preview tab by clicking on the image in the Folder Browser or by navigating with keys and pressing space or ENTER on the image. Images are display with pixel dimension and size on disk.

View and Edit Images

Like the editor options for embedded images you can preview images in an external viewer or open images from the Folder Browser in an external editor of your choice. I like to use the SnagIt Editor to edit images as it provides a host of cropping and sizing features, as well as the ability to easily mark up the image with captions, markers and other highlights.

Optimize Image Size

You can also use the Optimize Image option to optimize the size of an image. This uses an external image optimization tool (Pingo) to reduce the image size drastically with minimal quality loss.

Image Optimization is not Lossless
The image optimization used is not lossless and images can be slightly affected by the optimization, so if image quality is paramount or you need to hang on to original images make sure you have a backup or don't use this feature. However, we've found the image optimization to be very good resulting in large savings for very minor quality loss especially for content like screen captures.

© West Wind Technologies, 2016-2023 • Updated: 02/14/22
Comment or report problem with topic