A utility for converting images to WebP format and uploading them to ImgBB
npm install imgbb-webp-uploaderA React package that simplifies uploading images to ImgBB with automatic WebP conversion to reduce file size. Created and maintained by Qrinux.
- 🖼️ WebP Conversion - Automatically converts images to WebP format before uploading
- 📊 Progress Tracking - Real-time progress updates for both conversion and upload
- 📏 Size Comparison - Shows file size before and after WebP conversion
- 🧩 Multiple Integration Options - Use as a React component, hook, or direct API
``bash`
npm install imgbb-webp-uploaderor
yarn add imgbb-webp-uploader
The simplest way to use the package is with the included React component:
`jsx
import React from 'react';
import { ImgBBUploader } from 'imgbb-webp-uploader';
function App() {
return (
$3
For more control over the UI, use the hook:
`jsx
import React from 'react';
import { useImgBBUploader } from 'imgbb-webp-uploader';function CustomUploader() {
const {
selectedFile,
previewUrl,
isUploading,
uploadedImage,
error,
progress,
originalSize,
webpSize,
sizeReduction,
handleFileChange,
uploadImage,
resetUpload
} = useImgBBUploader({
apiKey: "YOUR_IMGBB_API_KEY",
webpQuality: 0.8,
maxWidth: 1920
});
return (
{previewUrl && (

)}
{isUploading && Uploading: {progress}%
}
{uploadedImage && (
Image URL: {uploadedImage.url}
Size reduction: {sizeReduction}%
)}
);
}
`$3
For non-React applications or more advanced use cases:
`javascript
import { uploadToImgBB } from 'imgbb-webp-uploader';async function uploadImage(file) {
try {
const response = await uploadToImgBB(file, {
apiKey: "YOUR_IMGBB_API_KEY",
convertToWebP: true,
webpQuality: 0.8,
maxWidth: 1920,
onProgress: (progress) => {
console.log(
Upload progress: ${progress}%);
}
});
console.log('Upload successful:', response);
} catch (error) {
console.error('Upload failed:', error);
}
}// Use with file input
document.getElementById('fileInput').addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
uploadImage(file);
}
});
`$3
To use with
react-hook-form, first install the required dependencies:`bash
npm install react-hook-form imgbb-webp-uploader
`Here's an example implementation:
`typescript
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { ImgBBUploader } from 'imgbb-webp-uploader';interface FormValues {
image: string;
}
const ReactHookFormExample = () => {
const { control, handleSubmit } = useForm();
const onSubmit = (data: FormValues) => {
console.log('Form submitted with image URL:', data.image);
};
return (
);
};export default ReactHookFormExample;
`$3
- Seamless integration with react-hook-form`| Prop | Type | Default | Description |
|------|------|---------|-------------|
| apiKey | string | - | Required. Your ImgBB API key |
| webpQuality | number | 0.8 | Quality of WebP conversion (0-1) |
| maxWidth | number | 1920 | Maximum width of the converted image |
| convertToWebP | boolean | true | Whether to convert to WebP before upload |
| onSuccess | function | - | Callback when upload succeeds |
| onError | function | - | Callback when upload fails |
| showPreview | boolean | true | Whether to show image preview |
| showFileInfo | boolean | true | Whether to show file size info |
| buttonText | string | "Upload to ImgBB" | Text for upload button |
| processingText | string | "Processing..." | Text during upload |
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| apiKey | string | - | Required. Your ImgBB API key |
| webpQuality | number | 0.8 | Quality of WebP conversion (0-1) |
| maxWidth | number | 1920 | Maximum width of the converted image |
| convertToWebP | boolean | true | Whether to convert to WebP before upload |
| onSuccess | function | - | Callback when upload succeeds |
| onError | function | - | Callback when upload fails |
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| file | File | - | Required. The image file to upload |
| options | object | - | Upload options |
| options.apiKey | string | - | Required. Your ImgBB API key |
| options.webpQuality | number | 0.8 | Quality of WebP conversion (0-1) |
| options.maxWidth | number | 1920 | Maximum width of the converted image |
| options.convertToWebP | boolean | true | Whether to convert to WebP before upload |
| options.onProgress | function | - | Progress callback function |
MIT
This package is created and maintained by Qrinux, a software development company specializing in web technologies and image optimization solutions.
For support, feature requests, or bug reports, please visit Qrinux website or open an issue on GitHub.