Introduction to My Image Converter #

Hello everyone! In this post, I would like to introduce the image converter I developed, share my experiences during the development process, and outline my plans for future improvements.

This project is based on React and is designed to allow users to easily convert JPEG or PNG files into the WebP format. WebP is an image format that provides excellent compression and quality, making it useful for optimizing websites.

Web Image Converter Project - WebP Converter Built with React #

https://imgtowebp.honeybam.com/
Convert your images to WEBP format quickly and easily. Free online tool for image conversion supporting multiple formats.

Project Overview and Motivation #

The motivation behind developing the image converter was to enable more efficient image management in web environments. Specifically, WebP can reduce file sizes compared to JPEG or PNG, improving page loading speeds and enhancing user experience. This project started as a simple idea, but as I progressed with development, I was able to solve various problems and enhance its features.

Key Features #

Multiple Image Selection and Upload #

Users can upload multiple JPEG or PNG files at once. A list of selected files is displayed on the screen, allowing users to review the files before executing the conversion.

const [files, setFiles] = useState([]);
const [webpUrls, setWebpUrls] = useState([]);

Conversion to WebP #

When the user clicks the button for each file, the conversion begins. The canvas.toBlob() method is used to generate high-quality WebP images without loss. Once the conversion is complete, a download button is displayed, enabling users to easily download the converted images.

canvas.toBlob(
  (blob) => {
    if (blob) {
      const webpUrl = URL.createObjectURL(blob);
      setWebpUrls((prevUrls) => [...prevUrls, webpUrl]);
    }
  },
  "image/webp",
  { quality: 1 }
);

Batch Conversion and Download #

If multiple files are selected, users can convert all of them to WebP at once by clicking the "Convert All" button. Once the conversion is complete, users can download all files in bulk using the "Download All" button.

Google AdSense Script Management #

I efficiently managed the window.adsbygoogle script within the webpage to prevent duplicate ads. This optimization maximizes ad revenue without compromising user experience.

Future Improvement Plans #

1. Adding a Progress Bar
   Currently, the conversion status is provided only as text, but I plan to implement a progress bar to give users a clear view of the progress. This will provide better feedback during the conversion of large images or multiple files.

2. Preview Feature Addition
   I plan to add a feature that allows users to preview the converted images before downloading. This will enable users to quickly check the quality of the converted images and decide whether to re-convert if necessary.

3. Multilingual Support Implementation
   I aim to develop support for multiple languages, including English and Korean, to make the service more accessible to a wider audience. This will help expand the tool into a global service that users from various countries can conveniently use.

During the development process, I encountered several challenges. First, the complexity of state management increased when converting multiple files asynchronously. I solved this by using React's useState to track the conversion status for each file. Secondly, I faced an issue with the Google AdSense script loading multiple times, which I addressed by carefully controlling the script loading within useEffect.

This project started as a simple image converter, but it has been a valuable experience that made me consider important features for web optimization and user experience improvement. I aim to enhance the tool further by adding the progress bar, preview, and multilingual support.

I will continue to share my development experiences through this blog, so I appreciate your interest! 😊