# Compress an image for faster upload We can use the [quality](../../api/image-editor/exports/#createdefaultimagewriter) property on the `createDefaultImageWriter` function or `imageWriter` property to compress images to lower the output image size in bytes. As the `quality` property is only supported for JPEG and WEBP we need to also set the `mimeType` property to make sure input images are always converted to a compressible format. When using one of the default factories or components we only have to set the `imageWriter` property. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-0) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-0) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-0) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-0) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-0) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-0) * [index.html](#index-html-panel-0) `
` * [App.jsx](#App-jsx-panel-0) * [App.css](#App-css-panel-0) `import '@pqina/pintura/pintura.css'; import './App.css'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults({ imageWriter: { quality: 0.1, mimeType: 'image/jpeg', }, }); function App() { return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-0) ` ` * [App.svelte](#App-svelte-panel-0) `
` * [app.component.ts](#app-component-ts-panel-0) * [app.component.html](#app-component-html-panel-0) * [app.component.css](#app-component-css-panel-0) * [app.module.ts](#app-module-ts-panel-0) `import { Component } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { editorDefaults: any = getEditorDefaults({ imageWriter: { quality: 0.1, mimeType: 'image/jpeg', }, }); } ` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularPinturaModule } from '@pqina/angular-pintura'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AngularPinturaModule], exports: [AppComponent], providers: [], bootstrap: [AppComponent], }) export class AppModule {} ``` * [index.html](#index-html-panel-0) `
` When not using a default factory we need to manually import the `createDefaultImageWriter`. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-1) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-1) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-1) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-1) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-1) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-1) * [index.html](#index-html-panel-1) `
` * [App.jsx](#App-jsx-panel-1) * [App.css](#App-css-panel-1) `import '@pqina/pintura/pintura.css'; import './App.css'; import { PinturaEditor } from '@pqina/react-pintura'; import { createDefaultImageReader, createDefaultImageWriter, createDefaultImageOrienter, setPlugins, plugin_crop, locale_en_gb, plugin_crop_locale_en_gb, } from '@pqina/pintura'; setPlugins(plugin_crop); const editorDefaults = { imageReader: createDefaultImageReader(), imageWriter: createDefaultImageWriter({ quality: 0.1, mimeType: 'image/jpeg', }), imageOrienter: createDefaultImageOrienter(), locale: { ...locale_en_gb, ...plugin_crop_locale_en_gb, }, }; function App() { return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-1) ` ` * [App.svelte](#App-svelte-panel-1) `
` * [app.component.ts](#app-component-ts-panel-1) * [app.component.html](#app-component-html-panel-1) * [app.component.css](#app-component-css-panel-1) * [app.module.ts](#app-module-ts-panel-1) `import { Component } from '@angular/core'; import { createDefaultImageReader, createDefaultImageWriter, createDefaultImageOrienter, setPlugins, plugin_crop, locale_en_gb, plugin_crop_locale_en_gb, } from '@pqina/pintura'; setPlugins(plugin_crop); @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { editorDefaults: any = { imageReader: createDefaultImageReader(), imageWriter: createDefaultImageWriter({ quality: 0.1, mimeType: 'image/jpeg', }), imageOrienter: createDefaultImageOrienter(), locale: { ...locale_en_gb, ...plugin_crop_locale_en_gb, }, }; } ` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularPinturaModule } from '@pqina/angular-pintura'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AngularPinturaModule], exports: [AppComponent], providers: [], bootstrap: [AppComponent], }) export class AppModule {} ``` * [index.html](#index-html-panel-1) `
`