A modern, client-side web application that converts various image formats to WebP with no server required. Optimize your images directly in the browser to save space and improve website loading times.
- 100% Client-Side Processing: All conversion happens in your browser - no data is sent to any server
- Multiple Format Support: Convert JPG, PNG, GIF, TIFF, BMP, AVIF and even existing WebP files
- Batch Processing: Convert multiple images at once
- Adjustable Quality: Fine-tune compression with a quality slider (1-100%)
- Resize Option: Optionally resize images to specific maximum dimensions
- Comparison View: See before/after results with file size reduction stats
- Batch Download: Download all converted images as a single ZIP file
- Multilingual: Supports 13 languages with auto-detection:
- English, French, Spanish, Portuguese, German, Italian
- Polish, Russian, Ukrainian, Chinese, Thai
- Right-to-left languages: Arabic and Hebrew
- Responsive Design: Works on any device from mobile to desktop
- Dark/Light Mode: Automatic theme based on system preference with toggle
Try it now: WebP Image Converter
- Upload Images: Drag & drop or select image files
- Configure Settings:
- Adjust quality (higher = better image quality but larger file size)
- Optionally enable resizing with custom dimensions
- Convert: Process all images with a single click
- Review Results: See comparison between original and WebP versions
- Download: Get individual files or all images as a ZIP
- Built with vanilla JavaScript - no frameworks or libraries for core functionality
- Uses Canvas API and
toBlob()for WebP conversion - Browser-image-compression library for initial optimization
- JSZip for batch downloads
- Tailwind CSS for styling with a clean Apple-inspired design
- Font Awesome for icons
- Supports all modern browsers with WebP capabilities
-
Clone the repository:
git clone https://github.com/l3dlp/js-webp-convertor.git cd js-webp-convertor -
Serve with any static file server:
# Using Node.js serve (install with: npm install -g serve) npx serve # Or Python's built-in HTTP server python -m http.server
-
Open your browser and navigate to
http://localhost:5000(or whatever port your server uses)
To integrate the converter into your own website:
- Copy the
srcdirectory to your project - Include the necessary scripts and styles
- Customize as needed (see the Customization section)
You can modify the application by:
- Editing the
main.cssfile to change styles - Adding more languages to
translations.json - Modifying quality defaults in the JavaScript
- Changing supported file types
Works in all modern browsers that support the WebP format and the Canvas API:
- Chrome (versions 23+)
- Firefox (versions 65+)
- Edge (versions 18+)
- Safari (versions 14+)
- Opera (versions 12.1+)
- Chrome for Android & iOS Safari
- Smaller File Size: WebP images are typically 25-35% smaller than JPEGs at equivalent quality
- Faster Loading: Reduced file size means faster page loading and better user experience
- SEO Benefits: Page speed is a ranking factor for search engines
- Transparency Support: WebP supports alpha channel transparency like PNG but with smaller file sizes
- Animation Support: WebP can replace animated GIFs with much smaller file sizes
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- l3dlp - GitHub
- browser-image-compression for image optimization
- JSZip for generating ZIP files
- Font Awesome for the beautiful icons
- Tailwind CSS for the utility-first CSS framework