Plugin: Simple Image Resize [v1.1.0, 2025-09-15]

Plugins
1

NOTE:
My coding knowledge is currently very limited. This plugin was created entirely with AI tools, and I may be limited in my ability to fix any issues.

Simple Image Resize

A Joplin plugin that provides a simple dialogue to switch image syntax between markdown/html and losslessly resize images (inside the markdown editor) by setting the width/height attributes.

simple-image-resize-demo

NOTE: In-editor image rendering of HTML embedded image in the above example is provided by the Rich Markdown plugin

How to use

In the markdown editor, right click anywhere inside a markdown or HTML image embed and select "Resize Image".

Alternately, you can highlight the entire image embed and select Edit | Resize Image (or use the keyboard shortcut if bound).

This will open a simple image resize dialogue, the following options are provided.

Switch image syntax

You can switch the image syntax between markdown (![alt text](:/resourceId)) and HTML (<img src=":/resourceId" alt="alt text" width="315" height="238" />).

External URLs are also supported (![alt text](https://example.com/image.png) and <img src="https://example.com/image.png" alt="alt text" width="315" height="238 />).

HTML Syntax is selected by default (and resizing is only supported using HTML syntax). You can switch to markdown syntax if you want to revert the image to a standard markdown image embed without a custom size.

Resize Image

With image syntax set to HTML, you can resize the image by Percentage (default) or Absolute size.

Enter the desired image size (in percentage or pixels) and click OK, and the plugin will automatically update the image embed with the new image syntax.

Note

When using absolute size, populating one of the dimensions and leaving the other blank will automatically maintain aspect ratio.

Settings

You can choose if the default resize mode is Percentage or Absolute in the plugin settings (default is Percentage).

3 Likes
2

Versions 1.0.1 - 1.0.3:

  • Show clear message when invoking command from rich text editor instead of cryptic error
  • add missing attributes to radio boxes, fixes issue where you couldn't toggle percentage/absolute size by clicking the text next to the box
  • Improve wording on info toast messages
  • dynamically register context menu, so context menu entry only shows in markdown editor context menu
  • preserve trailing whitespace, streamlines resizing images on their own line. Just double click to select the image (which sometimes selects the trailing newline in joplin) > resize image > paste and it will preserve the original trailing newline(s), if there were any in the original selection.
  • prevent accidentally pasting over other text after resizing if user accidentally included additional text in selection (and selection also contained a complete image embed). You will now see a toast message if (non-whitespace) text is included in selection in additional to a complete image embed
1 Like
3

I am using this,

seems to work great, Thanks!

1 Like
4

v1.0.4

  • Allow resizing image embeds that reference external https URLs
  • Use Joplin imaging API to retrieve original image dimensions (better performance), but also implemented fallback to previous base64 method if it fails to retrieve valid dimensions
  • improve regex detection, allow selections containing title attribute which is supported by both markdown and img embeds
  • maintain title attribute (if present) when converting syntax
  • escape quotes/single quotes/less than/greater than in HTML attributes
5

v1.1.0

  • Implemented cursor detection, you no longer need to manually select an entire image embed (though you still can), you can just right click anywhere inside an image embed to access the resize image option.
  • Clicking OK on resize image dialogue now directly updates the image syntax in the editor (instead of copying to clipboard)

simple-image-resize-demo

6

I must be getting something wrong here. I tried this and it does not resize the image. It just adds width and height so it is rendered a different size. Go to another note where that image is used and the image hasn’t changed. To resize the image I have to (in the viewer) Right-click and “Open…” so it loads it into a paint app, resize it and then save it. What am I doing wrong?

7

This is the intended behavior, it's the same way that resizing an image in the rich text editor works (switching the image embed syntax to HTML and adding the width/height attributes)

I might be able to add a lossy resize option that resizes the actual image file (or perhaps a context menu option to open the resource in your preferred external editor), but it's not something I've looked into yet

8

OK. Thanks, I thought I had something configured wrong. I’ll stick with my old-fashioned way and edit the image when I need to.