Resizing images to the actual size used in the editor?

Is there a way to resize images to the actual size they will be shown in the post? I have users that import a large image and then resize it in the visual editor. This is easy, since they can just drag the image until it is the size they want, without first opening an image editor, resizing the image, saving it, and uploading it as a separate attachment. Of course, this sometimes results in an image that is 100px wide in the post, but 1500px in reality.

Is there a plugin that does this when a new post is saved? I would like to keep the existing full-size image (for linking, or later resizes), but just add an extra size (and save it in the _wp_attachment_metadata object), so this post has the image in the correct size, and a reference to the full-size attachment.

Of course, all existing posts should also be handled once. <img> tags there might have just a width, just a height, or none of them: this should all be cleaned up, so they all have the correct width, height and an image of that size.


I created two plugins that together should solve my needs. They are currently in an early alpha stage, and all comments are welcome.

The base plugin is an On-Demand Resizer. This plugins monitors requests for non-existing files in the uploads dir, and creates images of the requested size if needed. For example, image-200x100.jpg will create and return image.jpg, but resized to 200 by 100 pixels. The image is saved by that name in the directory, so further requests are handled straight by the server.

The second plugin, Resize img tags, modifies <img> tags so their src attributes include width and/or height data. This allows the first plugin to serve the correct images. Together they do what I want, and I only need to create a run-once function to convert all existing posts, but that should be easy (I don’t want to hook into the_content for something that should run only once).

A third “bonus” plugin, Virtual intermediate images, intercepts the creation of the intermediate images when uploading a new image in WordPress. Since they are still created by the first plugin if requested, this allows you to specify multiple image sizes without taking up disk space unless they are actually used. This is not needed for the two first to work, but it was an easy addition, and it highlights the fact that I still need to work around the WordPress image editor, but I will do that when I create my thumbnail editor, which will also use the first plugin.

Leave a Comment