Media optimization

Media optimization makes the pictures and videos on your board lighter, or changes their size. Lighter files can help a board open faster.

• Make files smaller: compress pictures, SVGs, and videos, choose their format and quality, and cut away the parts you can't see.
• Resize pictures: shrink them, or enlarge them with AI and compare the result with the original.
• Work on several files: give many pictures or videos the same settings at once.
• Compress on import: compress supported files that are too big for a board before they come in.
• Turn camera views into pictures: save what a camera sees as an image.

Compressing an image

Makes a picture file smaller, or changes its format or size. It works on pictures and on image fills.

• Operation:
  1. Select the element and choose Edit asset in the Actions panel.
  2. Set the options below in the Attributes panel. The preview shows the original on one side and the result on the other.
  3. Choose what to do with the result. See Applying the result.
• Needs: a still picture. Animated pictures can't be compressed.
• Result: the panel shows:
  • File size: before and after, and how much it changed.
  • Layers and masks: for a picture edited in the image editor, their size. They're compressed too. Masks stay PNG, and layers that need transparency stay PNG when you choose JPEG.
• Tip: a very large picture asks you to confirm with Continue before its preview is processed. To leave without applying, choose Exit edit mode.

The options:

• Format: the file type of the result:
  • JPEG: transparent areas are filled with the board's background color.
  • PNG: keeps transparency.
  • WebP: keeps transparency and lets you set the quality.
  • SVG: only for SVG pictures. See Compressing an SVG.
• Quality: from 1 to 100, for JPEG and WebP. Lower values usually make smaller files and can lose detail.
• Resize image: lets you change the size. When you turn it on, it starts at the original size, or at 1920 pixels on the long side for bigger pictures.
• Resolution: the new width and height. They keep the picture's proportions and can be larger than the original.
• Method: Basic, or Smart (AI) to enlarge a single picture with AI. See Upscaling with AI.
• Remove cropped area: deletes the pixels outside the crop of a cropped picture, so the file gets smaller and the crop can't be widened afterwards. It starts on for cropped pictures and isn't available for tiled ones.
• Reset settings: goes back to the default settings.

Applying the result

When the result looks right, choose what to do with it. The buttons depend on how many elements you are editing:

• One element:
  • Replace: puts the new file in the element, in place of the old one. A trimmed video whose animation blocks play times outside the new clip can't be replaced; use Create Shape instead.
  • Create Shape: adds a new element with the new file, slightly offset from the original, which stays.
  • Download: saves the file to your device. A picture is saved with its layers merged and without board effects such as filters.
  • Copy: pictures only. Copies the picture as PNG or as SVG code, to paste it elsewhere. The browser may ask for permission.
• Several elements, in a batch:
  • Replace All: replaces the file of every element.
  • Create Copies: adds a new element for each file, to the right, in the same arrangement.
  • Download Zip: saves all the files in one ZIP file, including videos too large for the board.
  • Download files: pictures only. Saves them as separate, numbered files.
  • Copy: pictures only. Copies the picture shown in the preview.

Compressing an SVG

Makes an SVG picture smaller while keeping it an SVG, so the drawing stays sharp at any size. Pixel pictures inside it keep their resolution. Icons from the icon library are SVGs too.

• Operation:
  1. Select the element and choose Edit asset in the Actions panel.
  2. Keep Format on SVG in the Attributes panel and set the options below.
  3. Compare the drawing in the preview, then apply the result.
• Needs: an SVG that is:
  • Self-contained: a still SVG with no links to outside picture or font files, and the pictures inside it aren't animated.
  • Safe: a valid SVG without scripts or other code.
  • Not too big: up to 10 MB and 10,000 parts, counting any SVGs inside it.
• Result: the file usually gets smaller:
  • SVG layers and masks: compressed the same way.
  • Pixel layers and masks: unchanged, unless Remove cropped area trims them.
  • No size reduction: shown when the file size didn't change. A positive percentage means it grew. You can still apply the result.
• Tip: check the preview, since optimizing can change how the drawing looks.

SVG options

• Format: starts on SVG. Choose JPEG, PNG, or WebP to turn the SVG into a pixel image. See Turning an SVG into a pixel image.
• Remove cropped area: starts on for cropped pictures that aren't tiled. It changes the drawing's visible area to the crop, and content outside it may stay in the file. The result keeps the element's place and size on the board, and the crop is cleared.
• Number precision: how many decimals the drawing's coordinates keep, from 0 to 8 (3 by default). Fewer decimals make a smaller file but can move small details.
• Transform precision: the same for the drawing's moves, rotations, and scaling, from 0 to 8 (5 by default).
• Advanced: extra cleanups. By default, all of them are on except the last two, and your previous SVG settings are remembered:
  • Multipass: repeats the cleanup several times for a smaller file.
  • Remove comments: removes notes written inside the file.
  • Remove editor metadata: removes the extra information drawing apps store in the file.
  • Optimize styles: merges and simplifies the drawing's style rules.
  • Clean up IDs: removes unused element names and shortens the rest, when it's safe.
  • Remove hidden and unused content: removes hidden parts and pieces nothing uses.
  • Optimize paths: simplifies the outlines.
  • Simplify groups: removes groups that aren't needed.
  • Merge paths: joins outlines that can be drawn as one.
  • Remove embedded images: removes the pixel pictures stored inside the SVG, which changes the drawing.
  • Remove content outside the view: removes outlines lying fully outside the visible area. With Remove cropped area on, the cropped area counts as the visible area.
• Reset settings: goes back to the default settings. Your SVG settings are remembered in this browser for every board.

Turning an SVG into a pixel image

Turns an SVG into a picture made of pixels, for example to paint on it in the image editor.

• Operation: follow the steps in Compressing an image, choosing JPEG, PNG, or WebP in Format. Resolution goes up to 4096 pixels on the long side.
• Result: the picture can be opened with Open image editor. It can no longer be turned into shapes with Convert SVG image to shapes.
• Tip: the SVG options don't apply to pixel formats. Choosing SVG again brings back the original size and crop, unless Remove cropped area is on.

Compressing a video

Makes a video file smaller, or keeps only part of it.

• Operation:
  1. Select the video and choose Edit asset in the Actions panel.
  2. Set the options below in the Attributes panel, then choose Generate preview. Sizes are estimates until the preview is ready.
  3. Apply the result.
• Needs:
  • File: a video file added to the board, not one linked from a website.
  • Size: within the limits.
  • Browser: one able to process video.
• Result: the panel shows the file size before and after, and the new width and height. A replaced video gets a new cover picture when one can be made, and keeps a cover you chose yourself.
• Tip: after changing a setting, choose Generate preview again before applying. Cancel preview stops it.

The options:

• Output: the file type, MP4 or WebM.
• Codec: how the video is compressed inside that file type. Auto chooses for you, and the browser may switch to another codec or file type when it can't use the chosen one.
• Video kbps: how much data each second of picture uses, from 16 to 100,000. Higher values give the picture more data and usually make bigger files.
• Audio kbps: the same for the sound, from 0 to 512. Zero removes the sound.
• FPS: frames per second, from 1 to 60.
• Remove cropped area: keeps only the visible part of a cropped video and clears the crop.
• Keep only selected clip: keeps only the video's clip, the part between the video's start and end, which becomes the whole video. With it off, the whole video is kept. The clip is the video's own, not a video animation block's.
• Resolution: keeps the original size, or makes it smaller with the same proportions.
• Reset: goes back to the default settings.

The preview plays the original and the result at the same time, with a slider to move through the video. Only the result plays sound. Changing the preview's start or end also changes the video's clip.

• Play / Pause: starts or pauses playback.
• Play to start: jumps to the start of the clip.
• Play to end: jumps to the end of the clip.
• Repeat: plays the clip again and again.
• Speed: changes the playback speed.
• Volume: changes the volume. Zero mutes it.

Upscaling with AI

Enlarges a picture with an AI model that runs in your browser and adds detail; compare the result with the original.

• Operation:
  1. While compressing an image, turn on Resize image, set Resolution above the original size, and choose Smart (AI) in Method.
  2. Choose a model in Quality. See Models.
  3. Choose Load AI model. The first time, this downloads the model, which the browser keeps for next time.
  4. Apply the result.
• Needs:
  • Browser: one able to run the AI model and store it.
  • Picture: a single picture made of pixels, without SVG layers or masks. Each side must be at least 32 pixels, and the long side less than 4096 pixels.
  • Crop: Remove cropped area must be off.
• Result: a progress bar shows how far the enlargement is. The chosen Format and Quality apply to the result.
• Tip: Cancel upscale stops it. After a failure, Try again starts it over.

Models

Both models are versions of Swin2SR, an AI model for enlarging pictures. They download from Hugging Face the first time you use them, and your picture is enlarged on your device.

• Auto (Fast 2x) / Auto (Photo 4x): uses Fast for enlargements up to 2×, and Photo above that. The label shows which one it will use.
• Fast (2x, ~8 MB): a small model that doubles the size, for enlargements up to 2×.
• Photo (4x, ~53 MB): a bigger model that makes the picture 4 times bigger. It also works for smaller enlargements.

Each model enlarges by its own fixed amount, and the result is then resized to the size you asked for. Download sizes are approximate.

Batches

Gives several pictures or videos the same settings at once.

• Operation:
  1. Select the pictures or the videos and choose Edit asset in the Actions panel.
  2. Set the shared options in the Attributes panel. For videos, Generate previews one of them.
  3. Apply the result. Files still without a preview are processed then.
• Needs:
  • Kind: pictures or videos, not both.
  • Each file: one that could use Edit asset on its own.
• Result: the files are processed one after another:
  • If one fails, the others still finish.
  • One undo reverts the whole batch.
• Tip:
  • The starting format is SVG for a batch of SVGs, usually the first picture's format for a batch of pixel pictures, and usually PNG for a mix of both.
  • A large batch of videos may ask you to choose Continue before processing.

The batch options:

• Previous shape: shows the previous file in the preview.
• Next shape: shows the next file.
• Resolution: a width or height shared by all files:
  • Each file keeps its proportions.
  • When resizing, no side goes above 4096 pixels. Pictures you don't resize keep their size.
  • Small pictures can grow more than 4 times.
• Export name: the name for downloaded pictures, which are numbered. Downloaded videos keep their own names, followed by -compressed and the file extension.
• Cancel: stops the batch. Files already finished stay, but an unfinished ZIP isn't saved.

Optimizing on import

Imported files can be made lighter in two places:

• App Settings: options that apply to the pictures you import.
• A compression window: opens by itself for supported files too big for a board.

Automatic optimization

Open the App menu and choose App Settings. These options apply to the pictures you import:

• Optimize raster: compresses still pictures made of pixels, such as photos. GIFs aren't changed.
• Optimize SVG: a light cleanup of SVG files, which keeps them easy to edit.
• Max image dimension: bigger still pixel pictures are scaled down to this width or height, even with Optimize raster off. It doesn't apply to SVGs or GIFs.

Animated pixel pictures and GIFs skip these adjustments.

Files too big for a board

Pictures over 10 MB and videos over 50 MB are too big to add to a board. When you import one, a window opens to compress it first: Compress image to import or Compress video to import.

• Operation:
  1. Import the file.
  2. Adjust the settings in the window if needed. For a video, you can also choose which part to keep.
  3. Check the preview, then choose Import compressed. For a video, choose Generate preview again after changing a setting.
• Needs:
  • Pictures: still JPEG, PNG, or WebP pictures. SVGs, GIFs, and animated pictures over the limit can't be imported.
  • Videos: within the limits.
• Result: the compressed file is added to the board. With several files, the next one follows.

The window's other buttons:

• Reset settings (pictures) or Reset (videos): goes back to the default settings.

• Cancel preview: stops a video preview.

• Download: saves the compressed file to your device.

• Skip: leaves this file out, when importing several.

• Cancel: stops the files still waiting.

Exporting from cameras

A shortcut that turns what a camera sees into a picture and compresses it in the same step. The capture opens in the same workspace as Edit asset, so you can set its format, quality, and size before adding it to the board, downloading it, or copying it.

• Operation:
  1. Set the camera's view and its export size.
  2. Choose Create and edit image, or Create and edit images for several cameras, in the Actions panel.
  3. Set the picture options in the Attributes panel, then choose:
     • Create image shape: adds the picture to the board. For several cameras, Create image shapes.
     • Download: saves the picture to your device. For several cameras, Download Zip or Download files.
     • Copy: copies the picture as PNG.
• Needs: content inside the camera's view, or a lens that makes its own picture.
• Result: each picture shows the board as it was at that moment. Later changes don't update it, and the cameras stay as they are.

Limits

• Enlarging a single picture: a pixel picture can grow up to 4 times its original size, and up to 4096 pixels on the long side. Pictures you don't resize keep their size, even above 4096 pixels.
• Videos to compress: up to 250 MB, 10 minutes long, and 4096 pixels on the long side.
• Videos on the board: up to 50 MB. Downloads can be bigger.
• AI enlargements: each result must be no larger than 10 MB to be placed on the board or downloaded.
• Camera pictures: up to 96 megapixels each.
• Downloads: a batch, or a set of camera pictures, can save up to 1 GB in total. Camera pictures added to the board share the same total.