Docs: Added image optimizer

packages/ckeditor5-image/docs/_snippets/features/build-image-optimizer-source.js

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/* globals window */
+import { Uploadcare, UploadcareImageEdit } from '@ckeditor/ckeditor5-uploadcare';
+import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox';
+import { ImageResize, ImageInsert, AutoImage, PictureEditing } from '@ckeditor/ckeditor5-image';
+import { LinkImage } from '@ckeditor/ckeditor5-link';
+import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
+import { Alignment } from '@ckeditor/ckeditor5-alignment';
+
+// Umberto combines all `packages/*/docs` into the `docs/` directory. The import path must be valid after merging all directories.
+import ClassicEditor from '../build-classic.js';
+
+ClassicEditor.builtinPlugins.push( ImageResize );
+ClassicEditor.builtinPlugins.push( ImageInsert );
+ClassicEditor.builtinPlugins.push( LinkImage );
+ClassicEditor.builtinPlugins.push( AutoImage );
+ClassicEditor.builtinPlugins.push( PictureEditing );
+ClassicEditor.builtinPlugins.push( HorizontalLine );
+ClassicEditor.builtinPlugins.push( Alignment );
+ClassicEditor.builtinPlugins.push( CKBox );
+ClassicEditor.builtinPlugins.push( CKBoxImageEdit );
+ClassicEditor.builtinPlugins.push( Uploadcare );
+ClassicEditor.builtinPlugins.push( UploadcareImageEdit );
+
+window.ClassicEditor = ClassicEditor;

packages/ckeditor5-image/docs/_snippets/features/image-image-optimizer-ckbox.html

@@ -0,0 +1,11 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
+<div class="ck ck-content" id="image-optimizer-ckbox">
+	<h2>Warsaw's Charm</h2>
+
+	<figure class="image image-style-side">
+		<img src="%BASE_PATH%/assets/img/warsaw.jpg" srcset="%BASE_PATH%/assets/img/warsaw.jpg, %BASE_PATH%/assets/img/warsaw_2x.jpg 2x" alt="The panorama of Warsaw">
+		<figcaption><a href="https://en.wikipedia.org/wiki/Panorama">Panorama</a> of Warsaw downtown.</figcaption>
+	</figure>
+
+	<p>Warsaw, the vibrant capital of Poland, is a city steeped in history and culture. Despite being heavily damaged during World War II, Warsaw has been meticulously reconstructed, showcasing its rich heritage through landmarks like the Royal Castle and the Old Town Square. Today, it's a modern metropolis with a thriving arts scene, diverse culinary offerings, and a dynamic atmosphere that blends its historical charm with a contemporary spirit.</p>
+</div>

packages/ckeditor5-image/docs/_snippets/features/image-image-optimizer-ckbox.js

@@ -0,0 +1,75 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+import { TOKEN_URL } from '@ckeditor/ckeditor5-ckbox/tests/_utils/ckbox-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#image-optimizer-ckbox' ), {
+		removePlugins: [ 'ArticlePluginSet', 'LinkImage', 'Uploadcare', 'UploadcareImageEdit' ],
+		toolbar: {
+			items: [
+				'undo', 'redo',
+				'|', 'heading',
+				'|', 'bold', 'italic',
+				'|', 'link', 'uploadImage', 'ckbox', 'insertTable', 'mediaEmbed',
+				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
+		},
+		ckbox: {
+			tokenUrl: TOKEN_URL,
+			allowExternalImagesEditing: [ /^data:/, 'origin', /ckbox/ ],
+			forceDemoLabel: true
+		},
+		image: {
+			toolbar: [
+				'toggleImageCaption',
+				'imageTextAlternative',
+				'|',
+				'imageStyle:inline',
+				'imageStyle:block',
+				'imageStyle:wrapText',
+				'|',
+				'resizeImage:25',
+				'resizeImage:50',
+				'resizeImage:original',
+				'|',
+				'ckboxImageEdit'
+			],
+			resizeOptions: [
+				{
+					name: 'resizeImage:original',
+					value: null,
+					icon: 'original'
+				},
+				{
+					name: 'resizeImage:25',
+					value: '25',
+					icon: 'small'
+				},
+				{
+					name: 'resizeImage:50',
+					value: '50',
+					icon: 'medium'
+				}
+			],
+			resizeUnit: '%'
+		},
+		cloudServices: CS_CONFIG,
+		licenseKey: 'GPL'
+	} )
+	.then( editor => {
+		window.editorInsertImageViaUrl = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

packages/ckeditor5-image/docs/_snippets/features/image-image-optimizer-uploadcare.html

@@ -0,0 +1,12 @@
+<div class="ck ck-content" id="image-optimizer-uploadcare">
+	<h2>Tokyo: A City of Contrasts</h2>
+
+	<figure class="image" data-uc-image-id="0e264706-82e0-4af5-a3b4-21f3e3bd57ef">
+		<picture><source srcset="https://ckeditor.ucarecdn.com/0e264706-82e0-4af5-a3b4-21f3e3bd57ef/-/resize/320x/ 320w, https://ckeditor.ucarecdn.com/0e264706-82e0-4af5-a3b4-21f3e3bd57ef/-/resize/480x/ 480w, https://ckeditor.ucarecdn.com/0e264706-82e0-4af5-a3b4-21f3e3bd57ef/-/resize/768x/ 768w, https://ckeditor.ucarecdn.com/0e264706-82e0-4af5-a3b4-21f3e3bd57ef/-/resize/1024x/ 1024w, https://ckeditor.ucarecdn.com/0e264706-82e0-4af5-a3b4-21f3e3bd57ef/-/resize/1200x/ 1200w, https://ckeditor.ucarecdn.com/0e264706-82e0-4af5-a3b4-21f3e3bd57ef/-/resize/1600x/ 1600w, https://ckeditor.ucarecdn.com/0e264706-82e0-4af5-a3b4-21f3e3bd57ef/-/resize/1920x/ 1920w" sizes="(max-width: 1920px) 100vw, 1920px" type="image/webp"><img src="https://ckeditor.ucarecdn.com/0e264706-82e0-4af5-a3b4-21f3e3bd57ef/" width="1920" height="1283"></picture>
+	</figure>
+
+	<p>Tokyo, the vibrant capital of Japan, is a city that seamlessly blends ancient traditions with cutting-edge modernity. From the serene temples and meticulously manicured gardens to the neon-lit skyscrapers and bustling tech hubs, Tokyo offers a captivating experience for visitors from all walks of life.</p>
+
+	<p>One of the most fascinating aspects of Tokyo is its unique blend of old and new. While the city is a global leader in technology and innovation, it also holds onto its rich cultural heritage. You can find serene temples and traditional tea houses nestled amidst the towering skyscrapers and bustling shopping districts. This harmonious coexistence of the past and present is what makes Tokyo such a captivating and unforgettable destination.</p>
+
+</div>

packages/ckeditor5-image/docs/_snippets/features/image-image-optimizer-uploadcare.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/* globals ClassicEditor, console, window, document, LICENSE_KEY */
+
+ClassicEditor
+	.create( document.querySelector( '#image-optimizer-uploadcare' ), {
+		removePlugins: [ 'CKBox', 'CKBoxImageEdit', 'LinkImage' ],
+		toolbar: {
+			items: [
+				'undo', 'redo',
+				'|', 'heading',
+				'|', 'bold', 'italic',
+				'|', 'link', 'imageInsert', 'insertTable', 'mediaEmbed',
+				'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
+			]
+		},
+		image: {
+			toolbar: [
+				'toggleImageCaption',
+				'imageTextAlternative',
+				'|',
+				'imageStyle:inline',
+				'imageStyle:block',
+				'imageStyle:wrapText',
+				'|',
+				'uploadcareImageEdit'
+			]
+		},
+		ui: {
+			viewportOffset: {
+				top: window.getViewportTopOffsetConfig()
+			}
+		},
+		uploadcare: {
+			pubkey: '0132b29be08ee83d5ae0',
+			allowExternalImagesEditing: [ /^data:/, 'origin' ],
+			uploader: {
+				sourceList: [
+					'local',
+					'url',
+					'dropbox',
+					'gdrive',
+					'facebook',
+					'gphotos',
+					'instagram',
+					'onedrive'
+				]
+			}
+		},
+		licenseKey: LICENSE_KEY
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-image/docs/features/images-image-optimizer.md

@@ -0,0 +1,84 @@
+---
+category: features-images
+menu-title: Image optimizer
+meta-title: Image optimizer | CKEditor 5 Documentation
+meta-description: Learn all about image editing capabilities with CKBox and Uploadcare in CKEdiotr 5.
+modified_at: 2025-02-03
+order: 40
+badges: [ premium ]
+---
+
+{@snippet features/build-image-optimizer-source}
+
+Elevate your images with robust editing tools available through the premium {@link features/ckbox CKBox} and {@link features/uploadcare Uploadcare} integrations. In this guide you will discover how to modify and enhance visuals directly in the editor, giving you greater creative control.
+
+## Image optimizer by Uploadcare
+
+Uploadcare provides not only basic image editing capabilities, but also image properties adjustments and photo filters, further extending CKEditor 5 feature set.
+
+### Demo
+
+Click on the image to invoke the image toolbar, then use the image editing button {@icon @ckeditor/ckeditor5-ckbox/theme/icons/ckbox-image-edit.svg} to access the Uploadcare editor.
+
+{@snippet features/image-image-optimizer-uploadcare}
+
+<info-box info>
+	This demo presents a limited set of features. Visit the {@link examples/builds/full-featured-editor feature-rich editor example} to see more in action.
+</info-box>
+
+### Image editing
+
+Image optimizer by Uploadcare provides a handful of image editing capabilities, such as:
+
+* rotation, mirroring and flipping,
+* cropping,
+* [image parameters adjustment](#image-parameter-adjustment),
+* [filters](#photo-filters).
+
+What is great about image editing in Uploadcare is that all edits are not changing the original image. You can easily go back to the original after the cropping for examples.
+
+### Image parameter adjustment
+
+For more advanced image customization, Image optimizer by Uploadcare lets you fine-tune image parameters, ensuring you get the exact image you need. You can easily adjust brightness, exposure, gamma, contrast, saturation, vibrance and warmth.
+
+If you are not sure which of the options would yield best results for a specific image, you can use the enhance functionality, which will adjust the image’s colors, saturation, and levels to unveil previously hidden details and bring colors to life automatically.
+
+### Photo filters
+
+Image optimizer by Uploadcare also provides a wide range of predefined photo filters that can quickly change the visual style of your image. Each of the over 40 filters can be applied with variable intensity.
+
+### Configuration
+
+To set up the editing capabilities, read the {@link features/uploadcare#adding-image-editing-capabilities Uploadcare documentation}.
+
+All features listed above are available both for images uploaded to Uploadcare before editing and &ndash; if you enable the {@link features/uploadcare#editing-external-images external images editing option} &ndash; for images from other sources (external). Keep in mind that external images will be automatically uploaded to your Uploadcare account, once you click the edit image button {@icon @ckeditor/ckeditor5-ckbox/theme/icons/ckbox-image-edit.svg} to enable all the editing capabilities.
+
+## Image optimizer by CKBox
+
+CKBox provides image editing tools, straight from the asset manager or CKEditor&nbsp;5, making working on content faster and more efficient. It saves time and resources as there is no need to resort to using a dedicated image editing software.
+
+### Demo
+
+Click on the image to invoke the image toolbar, then use the image editing button {@icon @ckeditor/ckeditor5-ckbox/theme/icons/ckbox-image-edit.svg} to access the CKBox image editor.
+
+{@snippet features/image-image-optimizer-ckbox}
+
+<info-box info>
+	This demo presents a limited set of features. Visit the {@link examples/builds/full-featured-editor feature-rich editor example} to see more in action.
+</info-box>
+
+### Image editing
+
+CKBox premium feature provides editing capabilities such as:
+
+* rotation, mirroring and flipping,
+* cropping (freeform and to defined aspect rations),
+* resizing (also to predefined presets).
+
+All edits result in a new image being created on your CKBox account. This is done to preserve the original image, for example if it is used in other places. Editing and overwriting images is possible through the CKBox panel.
+
+### Configuration
+
+To set up the editing capabilities, read the {@link features/ckbox#installation CKBox documentation}.
+
+All the listed features are available both for images uploaded to CKBox before, and &ndash; if you enable  the {@link features/ckbox#editing-external-images external images editing option} &ndash; images from other sources (external). Keep in mind that external images will be instantly uploaded to your CKBox account, once you click the edit image button {@icon @ckeditor/ckeditor5-ckbox/theme/icons/ckbox-image-edit.svg} to enable all the editing capabilities.

packages/ckeditor5-image/docs/features/images-overview.md

@@ -37,8 +37,8 @@ The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckedit
 * {@link features/images-resizing Image resizing} lets the user control the dimensions of images in the content.
 * {@link features/images-linking Linking images} makes it possible to use them as URL anchors.
 * A selection of {@link features/image-upload image upload methods} allows for the most convenient way of adding images. These include support for {@link features/images-inserting#inserting-images-via-pasting-a-url-into-the-editor inserting an image via a URL} and even {@link features/images-inserting#inserting-images-via-a-source-url via pasting a URL into the editor} along with custom integrations.
-* The {@link features/ckbox CKBox management platform} provides support for {@link features/images-responsive responsive images} in CKEditor 5. Responsive images will display correctly on any viewport, enhancing the accessibility, reach, and user experience.
-* CKBox also provides basic editing capabilities, like cropping, resizing, rotating, and flipping right from the image contextual toolbar.
+* The {@link features/ckbox CKBox} and Uploadcare {@link features/uploadcare} management platforms provide support for {@link features/images-responsive responsive images} in CKEditor 5. Responsive images will display correctly on any viewport, enhancing the accessibility, reach, and user experience.
+* Both Uploadcare and CKBox provide {@link features/images-image-optimizer editing and optimization capabilities}, like cropping, resizing, rotating, and flipping right from the image contextual toolbar.
 
 ## Image contextual toolbar
 
@@ -91,7 +91,7 @@ You can also use the **Insert paragraph** handles on the bottom or top edge of t
 
 ## Image editing
 
-While the image feature does not provide native image editing support, the {@link features/ckbox CKBox premium feature} provides basic editing capabilities such as cropping to presets, flipping, or rotating. By default, images hosted in CKBox are always editable. You can also enable {@link features/ckbox#editing-external-images editing external images}.
+While the image feature does not provide native image editing support, the {@link features/ckbox CKBox} and Uploadcare {@link features/uploadcare} premium features provide {@link features/images-image-optimizer editing capabilities} such as cropping to presets, flipping, or rotating.
 
 ## Contribute