Edit a stored image in the browser

Make the image fit what you need next

Uploaded images are usually close to being complete. Screenshots may have excessive white space around them. Product photos could be the incorrect size for cards used on websites. Social media images may need at least one label added to them prior to being shared.

The Media2URL Image Editor allows you to edit and update supported image files that are currently located within your working environment. The editor will allow you to crop, resize, adjust color/contrast/brightness/etc., add text/layers to the image, and ultimately determine if you wish to overwrite the original image file with the updated one or save it as an additional copy.

Open Image Editor Review image editor plan options

Crop presets, the image canvas and editing controls stay visible together in the workspace.

The workflow

Most edits start with one simple problem

Support screenshots don't require the same attention to detail that campaign graphics do. Campaigns may require a variety of things including but not limited to resizing, adding text, watermarking and/or exporting into different formats. However, most likely all you will have to do with your support screenshot is crop it and add an arrow.

The most simple approach to fixing problems on an image would be to make sure that those issues are resolved before anything else on the image is modified.

1
Open the image from your library
Select an existing, compatible image that is currently in your Media Library. Open this image in the Editor. You will not require to download the image, make minor changes elsewhere, and then upload it back into the system so that you can continue editing the exact same asset.
2
Fix the shape and size first
Before placing the smaller visual elements on the image, use the cropping, resizing, or straightening tool. When the final output has to be in a specific format (e.g., square), having the correct canvas format in place will help with the later placement of text and overlays. You can set custom pixel dimensions in the present editor constraints, provided that the destination requires a specific width and height.
3
Add only what the image actually needs
When the base image is created, you may continue working with your additional elements such as adjustments, text, drawings, shapes, overlays and other available element types. Since these additional elements exist as individual layers during the editing process, it will be much simpler to make adjustments to labels, watermarks, arrows, etc., without having to rebuild the entire image.
4
Check the result before you save it
When something goes wrong with an edit, you can use "Undo" and "Redo." When you want to look at something very closely, you can use "Zoom." The "Before & After" view can give you a better idea if the changes made to the image are an improvement. When you are happy with the results of your edits, you can then export the edited image as a JPEG, PNG, or WebP file. You can select the Save Option based on how you want the original image to be handled.

Cropping and sizing

The final destination usually decides the shape

A crop does more than just cut off unwanted edges. A crop also determines how the subject is positioned within the area that the image will ultimately be displayed.

Product photos used within square catalog cards will require a different frame than those used as thumbnails for wide videos. Social media posts with portraits create yet another format.

In addition to the most frequently used aspect ratios (1:1, 16:9, 4:3, 3:2, 4:5, and 9:16), the editor also provides pre-defined sizes based on the layout of common types of publications.

Free crop is selected; the amber outline points to that control among the available aspect-ratio presets.

Preset group examples

Preset group	Examples available in the editor
General ratios	1:1, 16:9, 4:3, 3:2, 4:5 and 9:16
Social posts	Instagram square and portrait, Facebook feed, LinkedIn feed and X post
Large headers	Facebook cover, LinkedIn cover, X header and YouTube channel banner
Web content	YouTube thumbnail and 1200 × 630 blog or Open Graph canvas

The use of these presets is a great way to start using the editor. Since each social platform can update its own recommended size and/or safe area, it is important to review any important campaign images with the platform you intend to post on prior to making those images public.

Crop, resize and canvas size change different things

Cropping will eliminate a portion of the original image that is visible. On the other hand, resizing will modify the size (dimensions) of the remaining part of the original image.

The size of the canvas will determine the amount of extra space available for the image. This can be beneficial if you need additional room for your image rather than wanting to decrease the size.

For example, you can take a landscape-oriented product image and convert it to a square to fit into a catalog. At the same time, if you want to use the same source image as a thumbnail for YouTube, you don't have to be forced to use only the square version; you can have another version of the original image with a wider aspect ratio.

Correct the image before styling it

Sometimes the image itself needs attention before any creative effect is added.

When you are unable to see the source clearly due to lack of light, brightness will allow you to adjust the lighting of your source. Contrast allows you to create more separation between your light and dark elements of the image, while saturation allows you to control how much color is used in your image. Finally, temperature can change the overall tone of your image so that it looks either warmer or cooler than the original.

Sharpness/definition helps make important edges of objects clearer. On the other hand, blur can reduce the level of detail (soften) in an area, or block/obscure some part of the image, while opacity determines how well a layer is visible over what is below it.

Creative effects, including grayscale, are available for images that require an artistic style as opposed to being corrected.

Filters do not have to be all or nothing

The editor offers different effects including Vivid, Mono, Warm, Cool, Vintage, Fade, and Dramatic. All of these effects have a way to control their intensity. This allows you to choose to lower the amount of effect applied rather than using the full effect as it would appear when first applied.

Texture Overlays include choices like grids, diagonal patterns, halftones, scan lines, or vignettes. Frames include simple borders, bold borders, double lines, photo style mattes, and cinema style bars.

These options are most applicable to thumbnails and advertising visuals, rather than to all images. For documentation screenshots, it's typically easier to focus on the key components of the visual, keeping the design clean and clear so that the user can quickly locate what they need.

Annotations and layers

Sometimes the image only needs to point at something

A support message containing a screen shot of a problem can be difficult to interpret even if the problem itself is obvious to the individual that took the screen shot.

A box around the incorrect field or a line to a button may describe the problem faster than adding another paragraph of explanation below the image.

The editing tool provides pencils and highlighters as well as rectangles, circles, lines, and arrows. In addition to these tools you are able to include text, badges, emojis, and images as overlays if you would like a more distinct visual representation.

The use of an image layer for a logo or watermark is a good way to control where you place it, how large you make it and how visible (or invisible) you want it to appear. You will also have the ability to change these settings at any point during your creative process, without having to flatten the layer before you can do so.

Layers keep the edit flexible

In the final stage of creating an image, when all elements (text, shapes, and overlays) are combined into a single layer, it becomes much more difficult to make edits to individual components of the image.

Having individual layers for each item will allow you to bring an item forward or back, turn off its visibility for a short period of time, freeze its location, and give it another name as the workspace becomes cluttered.

This will be particularly beneficial if you have a screenshot with multiple call-outs, or a campaign image that has text, a badge, and a watermark all within one area.

Undo and redo are helpful for correcting common errors. Before and after comparisons answer a different question: did all of your edits make the image better?

Exporting the image

JPEG, PNG and WebP suit different kinds of output

The editor can export supported results as JPEG, PNG or WebP.

JPEG is best used when you want to use a image without any transparent parts. PNG is best when you need to have a image that has some transparency, and it does so by using an alpha channel.

WebP can be used with both lossy and lossless compression. It also supports alpha-channel transparency, so it is a good choice for most web-based image usage decisions regarding file size.

The use of adjustable compression in creating a final product makes the quality control of that final product essential. If you select a very low setting, your final product will be smaller, however, it may also result in the quality of the text, edges and/or photo details within your final product being compromised.

Look at the completed picture when you are editing at about the same size people will be able to view the image. When you export an image, it may appear good while you're zoomed out in the editor, but once it appears on a webpage, you may notice significant compression artifacts.

Decide what the edited file should become

Save option	Use it when
Replace Source	The edited result should become the active file for the existing asset
Attach as Version	The edit belongs to the same asset and the earlier version should remain available for rollback
Save as Variant	You need a related version such as another crop or social size while keeping its connection to the source
Save as New Asset	The finished image should exist as its own separate library item

If the edited version of an image is intended to replace the original, then replacing the source is logical.

If you are going to produce multiple variations of an image from a single source document, then this is not the right tool for you. Creating a new variation, a new version, or a separate asset allows you to make further crops in the future without having to try and recreate the original source you previously destroyed.

Batch image work

Repeating the same edit fifty times is a different problem

In many cases, an individual decision will be made on each photo. On the other hand, in a large collection of photos (such as a catalog) you may need to use similar approaches to all the photos.

The current version of the Batch Image Processing workflow supports processing as many as 250 images simultaneously. A user can create a processing template (Preset) which can then be applied to all the images in the batch, so they do not have to repeat the same selections each time an image is processed individually.

A preset is capable of storing settings for image manipulation, like sizing, cropping options, file type used when exported, and where the file will be saved.

The method described is ideal for creating an itemized list of products, a collection of pictures used in articles, or a group of assets that have been treated similarly.

Use the standard Image Editor for each image that requires unique creative choices. Batch processing works better if the same setup is used repeatedly.

Real uses

Where the editor fits into real work

Cleaning up a documentation screenshot

A screenshot may contain browser controls, white space or irrelevant portions of the screen. Remove these areas from the screenshot prior to adding a line/arrow or brief explanation/label to point out the most relevant area for the reader. After cropping the screenshot, export the final product in the same file type as that required by the documentation. It would be wise to save a copy of the original screenshot should you need to produce additional versions at some point in the future.

Making several social versions from one source

You might need to create multiple formats of an image (a square, a portrait, and a wide header) from the same initial photo for your campaign. It would be best to use the preset options that match your format needs, then crop each format as needed, and finally save these variations as separate files so you do not have to continuously make changes to the single source file. This allows you to have access to the original file should you ever need to create another format.

Adding review notes without damaging the clean artwork

The use of comments directly on a client's draft is sometimes necessary. The comments may be made using text, arrows or other types of shapes which can provide clarity in understanding what you wish to say. When you have created an annotated copy of the client's draft, it is best to save it separately from the "clean" copy so that the "clean" copy is available for the final deliverable.

Preparing product and website images

A product image may be significantly larger than what will ultimately appear on your website. When you are ready to use the image, resize it to fit your intended purpose; select the desired file type for your application; and review the final quality of the image prior to uploading. For jobs that require the same processing of many product images, utilize Batch Image Processing instead of individually adjusting each image's settings.

Before replacing an important image

Check the parts that are hard to undo later

The user should check the cropped area in relation to what is going to be displayed in the final product. Even though the cropping appears correct on a large screen in an editor, some parts of the image, such as small text or elements of the subject, may disappear as the size decreases.
When there is still a possibility of additional versions, keep the source version. An alternative or appended version will provide a more secure beginning for your project than if you replaced the only viable copy of the material at an earlier stage.
The processing constraints of the editor and workspace remain true for large-sized canvases and custom dimensions. Please verify the size of your asset prior to creating a unusually large final product.
Review the exported file directly. The appearance of the final image may differ from the way it appears when you are working on it, due to compression, transparency and other visual effects.

Questions about Image Editor

Frequently asked questions

The answer is no. You edit the image in the editor before deciding on how to save the final product. Your options for saving are "Replace Source," "Attach as Version," "Save as Variant," and "Save as New Asset." Therefore, the original will only become the active editing file if you select the option that replaces it.

Yes, within the editor, you may crop and resize any of the supported images that are located in your Media Library. In addition to being able to select one of several commonly used aspect ratios, platform presets or enter custom dimensions up to the maximum permitted by the editor at present.

Yes. Text can be on its own layer, and an image (e.g. logo/watermark) can be on another overlay. You may change its position, size, and transparency, but keep the editable layers separate.

The present editor has the ability to export the results of your work in the form of an image file (JPEG, PNG, or WebP). JPEG format works well for most types of photography; PNG format is ideal if you need a result that will not lose quality during subsequent editing, or if you need to create a transparent background for your image; WebP format provides you with another alternative to use on the Internet that supports both lossy and lossless compression, as well as providing support for transparent backgrounds.

Cropping is the removal of a section of the image that can be seen. Changing the size of the image that is left after cropping is called resizing. While these two techniques can be combined to achieve your goals, each addresses a unique issue.

Yes, the editor has pre-set ratios for various types of layouts including; Instagram, Facebook, LinkedIn, X, YouTube, and Web Content. It is helpful to save these as variants (or separate) so you have multiple versions of an image available without having to replace the source version each time.

Yes. The editor has an option for both the original image and the edited version to be displayed side-by-side. This feature will be beneficial if there are numerous edits being made and you wish to verify that the final product does in fact look better than the original.

Yes, Batch Image Processing is made to be used for repeat jobs on several files, and the current system allows for queues of up to 250 images. Users can create a preset with repeated choices, including resize behavior, crop settings, output formats and destination folders, and use those same settings for each of their selected images.

Next steps

Explore related image tools

Media Library

For finding the original, variants and saved outputs later.

Image to URL tool

When the image is already ready and only needs a hosted URL.

Bulk image uploader

When several new source images first need to be uploaded.

Media Processing

For the broader processing workflow around saved media.