---
title: "Media Optimizer"
description: "The Media Optimizer plugin optimizes images and videos in content."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/uploadcare/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/uploadcare/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 3405
---
# Media Optimizer

The Media Optimizer plugin provides comprehensive media management capabilities for TinyMCE, supporting both image and video optimization, upload, and processing through the Uploadcare service.

## Overview

The Media Optimizer plugin extends TinyMCE with powerful media handling features that enable uploading, processing, and embedding both images and videos directly within the editor. The plugin also supports uploading and linking document files (PDF, Word, Excel, PowerPoint, and more) through the [Link](../link/) plugin’s dialog. The plugin leverages Uploadcare’s infrastructure to provide real-time media processing, responsive delivery, and advanced optimization capabilities.

## Key benefits

- Upload and optimize both images and videos directly within the editor
- Upload and link document files (PDF, Word, Excel, PowerPoint, and more) through the [Link](../link/) plugin’s dialog
- Real-time media optimization and compression
- Responsive media delivery with automatic format selection
- Advanced image filtering and video player customization
- Drag-and-drop media upload with file selection and URL input
- Non-destructive transformations and adjustments
- Enterprise-ready cloud storage with global CDN delivery
- Built-in security with malware protection and content detection

## Full featured interactive example

**Example**

```js
tinymce.init({
  selector: "textarea#uploadcare-full-feature",
  plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
  uploadcare_public_key: '<your-public-key>',
  uploadcare_filters: [
    { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris'
    { name: 'adaris', amount: -100, label: 'Vintage' }, // Adaris with inverted effect (amount -100), label reads 'Vintage'
    { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base'
    { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light'
    { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense'
    { name: 'galen', amount: 80, label: 'Soft' }, // Galen with softening effect (amount 80), label reads 'Soft'
    { name: 'carris', amount: 120, label: 'Sharp' }, // Carris with high contrast (amount 120), label reads 'Sharp'
    { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night'
    { name: 'none' }, // No filter applied
  ],
  // Video configuration
  uploadcare_video_properties: {
    autoplay: false,
    controls: true,
    loop: false,
    muted: true,
    preload: 'metadata',
    posterOffset: "0:10",
    showLogo: false,
    fluid: true,
  },
  // File upload configuration - enables file uploads in the link dialog
  documents_file_types: [
    { mimeType: 'application/msword', extensions: [ 'doc' ] },
    { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
    { mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt', 'pps' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
    { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
    { mimeType: 'text/plain', extensions: [ 'txt' ] }
  ],
  a11y_advanced_options: true,
  toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare uploadcare-video | code preview",
  height: 700,	
  content_style: `
  body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.17em; }
  h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
  p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
  p { line-height: 1.6; margin: 0; } 
  p + p { margin-top: 1rem; }
  a { color: #2b70e3; }
  blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
  figcaption { font-size: 0.875em; }
  uc-video { display: block; margin: 1rem 0; width: 100%; }
  `
});
```

## Quick start

To add the Media Optimizer plugin to the editor, include `uploadcare` in the `plugins` option in the editor configuration.

Example
```js
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare link', // Include 'link' plugin for file upload support
  toolbar: 'uploadcare uploadcare-video link',
  uploadcare_public_key: '<your-public-key>', // Required for Uploadcare integration
  uploadcare_resources: 'uploadcare/uploadcare', // Required when Media Optimizer addon is bundled with TinyMCE
  // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({
  //   signature: 'sig',
  //   expire: 123
  // }), // Recommended option for secure uploads
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## Features

For a complete guide to the features provided by the Media Optimizer plugin, see the following pages:

- **[Image](../uploadcare-image/)** — Image optimization options, including image filtering, resizing, and adjusting.
- **[Video](../uploadcare-video/)** — Video optimization options, including video player customization, resizing, and adjusting.
- **[Files and Documents](../uploadcare-documents/)** — Document file upload and linking options, including support for PDF, Word, Excel, PowerPoint, and more.

## Options

The following configuration options affect the behavior of the Media Optimizer plugin:

### `uploadcare_public_key`

Defines the public API key required to authenticate and interact with the Uploadcare API. This key identifies your account and ensures that uploads and operations are associated with your project. Without setting this key, the Uploadcare integration will not function.

> **Important:** This option is mandatory for using Uploadcare.
**Type:** `String`

#### Example: Setting `uploadcare_public_key`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
});
```

### `uploadcare_signed_upload_auth_provider`

Specifies a function used to generate secure signatures for authenticated requests to Uploadcare. This function is required when enabling Uploadcare’s signed uploads feature, which ensures that only authorized users can upload files using your `uploadcare_public_key`. The function should return a `Promise` that resolves with an object containing the signature and expiration timestamp.

Use this option to enforce secure uploads, preventing unauthorized users from uploading files via your application.

For more information on Uploadcare Signed Uploads, refer to the official documentation at [Uploadcare Signed Uploads](https://uploadcare.com/docs/security/secure-uploads/).

**Type:** `Function`

#### Example: Setting `uploadcare_signed_upload_auth_provider`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_signed_upload_auth_provider: (publicKey) => Promise.resolve({
    signature: 'sig',
    expire: 123
  }),
});
```

> **Tip:** Starter Project To get started quickly and understand how Uploadcare Signed Uploads integrates with TinyMCE Media Optimizer, Tiny recommends trying the starter project on GitHub to set up Media Optimizer with Signed Uploads. Clone the repository and follow the steps to set up the project. The link leads to the GitHub page for the starter project, where the source code is available for viewing: [TinyMCE Media Optimizer Signed Uploads Starter Project](https://github.com/tinymce/tinymce-uploadcare-signed-uploads-starter).

> **Important:** Tiny recommends configuring the `uploadcare_signed_upload_auth_provider` option to secure uploads and prevent misuse of your Uploadcare `uploadcare_public_key`. This option is essential for applications requiring:
> 
> - Prevention of unauthorized file uploads via your `uploadcare_public_key`.
> - Enforcement of secure upload practices for application integrity.
> 
> > **Note:** This option **only** secures unauthorized access to upload files to the uploadcare storage by verifying signatures during uploads.
> For most integrations, enabling signed uploads by configuring this option ensures that only authorized uploads occur, reducing the risk of abuse and maintaining secure usage of your `uploadcare_public_key`.

### `uploadcare_cdn_base_url`

Specifies the domain used for the Uploadcare service. This domain determines where your files are uploaded and accessed. By default, the plugin uses the Uploadcare CDN `ucarecdn.com` to host and deliver your files. If you use a custom domain, update this option to match your configuration.

**Type:** `String`

**Default:** `https://ucarecdn.com/`

#### Example: Customizing `uploadcare_cdn_base_url`

```js
tinymce.init({
  selector: "textarea",
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_cdn_base_url: 'https://cdn.mydomain.com',
});
```

### `uploadcare_store_type`

Specifies the storage type for uploaded files. Use this option to control whether files are stored temporarily or permanently, or allow Uploadcare to decide automatically based on your project settings.

- `auto`: Defer the choice of storage behavior to the auto-store setting in the Uploadcare Dashboard.
- `temporary`: Files are stored temporarily and removed after 24 hours.
- `permanent`: Files are stored permanently in your Uploadcare account.

Select the appropriate value based on your application’s requirements, such as whether files should persist for long-term use or be available for a limited time.

**Type:** `String`

**Default:** `permanent`

**Possible values:** `auto`, `temporary`, `permanent`

#### Example: Using `uploadcare_store_type`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_store_type: 'temporary',
});
```

### `uploadcare_resources`

Specifies the base path where the Uploadcare plugin resources are loaded from. This allows you to specify a different location for the Uploadcare resources if they are hosted separately from the main TinyMCE installation.

**Type:** `String`

**Default:** `'<plugin-path>'`

Example: Setting `uploadcare_resources`
```js
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>',
  uploadcare_resources: 'path/to/uploadcare-resources/',
  license_key: '<your-license-key>'
});
```

#### Resources Structure

When using `uploadcare_resources`, ensure your directory structure follows this pattern, specifically the `js` and `css` subdirectories, and that the necessary resource files are present:

Example directory structure:
```text
project/
│  └── uploadcare/
│     ├── js/
│     │   └── ucvideo.min.js
│     ├── css/
│     │   └── uc-video.css
│     └── plugin.min.js
└── tinymce/
    └── tinymce.min.js
```

> **Note:** This option does not control the loading of the main Uploadcare plugin script, which should be included in the `plugins` or `external_plugins` configuration options as appropriate.

### `a11y_advanced_options`

This option affects the functionality of:

- The [Accessibility Checker](../a11ychecker/) plugin (`a11ychecker`).
- The [Image](../image/) plugin (`image`).
- The [Media Optimizer Powered by Uploadcare](#) plugin (`uploadcare`).

Setting `a11y_advanced_options` to `true`:

- Adds the **Image is decorative** option to the *Insert/Edit Image* dialog, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes.
- Adds the **Decorative image** button to Media Optimizer’s *Alt text* context toolbar, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes.
- Adds the **Image is decorative** option to the *Accessibility Checker error* dialog for images that need to be marked as decorative.

> **Important:** If `a11ychecker_allow_decorative_images` is not explicitly set, the value defined in `a11y_advanced_options` will be used.
**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `a11y_advanced_options`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'uploadcare',
  toolbar: 'uploadcare',
  uploadcare_public_key: '<your-public-key>',
  a11y_advanced_options: true,
});
```

## Toolbar buttons

The Media Optimizer plugin provides the following toolbar buttons:

| Identifier | Description |
| --- | --- |
| `uploadcare` | Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Media Optimizer plugin provides the following menu items:

| Identifier | Description |
| --- | --- |
| `uploadcare` | Inserts an image placeholder element. This placeholder supports image uploads via drag-and-drop, file selection, or by providing a URL. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

> **Note:** The Media Optimizer plugin overrides the [Quickbar](../quickbars/) quickimage toolbar item. To ensure a better user experience and to avoid having two image buttons configure `quickbars_insert_toolbar` to omit the `quickimage` toolbar item.