Image Optimizer Powered by Uploadcare plugin

partial$misc/admon-requires-7.6v.adoc

Overview

The Image Optimizer plugin offers a range of powerful features for image hosting, serving, and editing. These include responsive image delivery, automatic image format selection, automatic compression, and non-destructive image transformations and adjustments, all powered by Uploadcare.

Key benefits

Improve page loading speed and save on bandwidth by serving images in the optimal size, format, and compression based on the visitor’s browser and device.
Ditch the image editor and adjust images right inside {productname} with non-destructive transformations and adjustments. Change your mind any time!
Stay safe and compliant with secure uploads, built in malware protection, and unsafe content detection
Enterprise-ready scalable cloud storage provided by Uploadcare, delivered through its lightning-fast global CDN, and compliant with SOC2 and GDPR standards.

Interactive example

liveDemo::uploadcare[]

Basic setup

To add the Image Optimizer Powered by Uploadcare plugin to the editor, add uploadcare to the plugins option in the editor configuration.

For example:

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
  // }), // Recommended option for secure uploads
});

Note	The Image Optimizer Powered by Uploadcare plugin overrides the Quickbar 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.

Image Operations

Below is an overview of the features of the Image Optimizer Powered by Uploadcare plugin includes for image optimization:

Feature	Operation	Description
Align		Provides alignment options for the image or element.
	Align Left	Aligns the image to the left.
	Align Centre	Centers the image.
	Align Right	Aligns the image to the right.
Transform		Allows users to apply transformations to the image:
	Rotate Left	Rotates the image counterclockwise (left).
	Rotate Right	Rotates the image clockwise (right).
	Flip Vertically	Flips the image vertically.
	Flip Horizontally	Flips the image horizontally.
	Resize	Changes the size of the image.
Alt Text		Adds alternative text to describe the image for accessibility purposes.
	Decorative Image	Marks the image as decorative, indicating it doesn’t require alternative text for accessibility. This icon will only appear when the `a11y_advanced_options` configuration option is enabled.
Caption		Adds a caption below the image for additional context.
Adjust		Provides tools for adjusting image properties:
	Brightness	Adjusts the image brightness.
	Contrast	Adjusts the image contrast.
	Exposure	Adjusts the image exposure.
	Gamma	Adjusts the image gamma.
	Vibrance	Adjusts the image vibrance.
	Saturation	Adjusts the image saturation.
	Warmth	Adjusts the image warmth.
	Grayscale	Converts the image to grayscale.
	Invert Colors	Inverts the image colors.
	Sharpen	Sharpens the image.
	Blur	Blurs the image.
Revert		Restores the image to its original state by undoing all edits.