Hello, I am a web developer who loves researching and learning new things, sharing what I learn with my friends around. This is my first blog post and my first published side project.
I plan to share what I find interesting or useful about interface development, accessibility, and best practices not just with those around me but with all visitors to my blog. In this post, I will discuss why I felt the need to publish this application, the challenges I faced during publication, the tech stacks I used, the hosting service I chose, and my future plans.
While coding the front end of web projects, I use the Lighthouse tab under Google DevTools to measure site performance and do my best to achieve the highest possible score in the SEO, performance, accessibility, and best practices categories. One of the most common recommendations I encounter regarding performance is that the images I use should be presented in the modern WebP format . So, what is WebP, and why should it be preferred? WebP is a modern image format that provides superior lossless and lossy compression for web images.
To convert my images to the WebP format, I searched on Google and visited the first websites that appeared in the results. I successfully converted my images to WebP format, significantly reducing the file size without losing any image quality. However, the websites I used allowed me to convert a limited number of images to WebP format; after a certain number, they directed me to purchase a paid membership.
Motivated by this need, I decided to create the towebp.online site. ToWebP is a free application that allows you to convert your JPG, PNG, or GIF images to WebP format without any quality loss, without requiring a membership, with no restrictions, and prioritizing privacy. The entire process is done in the browser, meaning your images are not uploaded to the server. It also provides statistics about your converted images, such as the total original file size, the size after conversion to WebP, and the total savings.
So, what tech stacks did I use? The technologies I used to publish this application are Vite.js, React, and Tailwind CSS. For the domain and hosting, I chose Hostinger. As mentioned above, I also tested this application with Lighthouse and managed to achieve a score of 100 in all categories.
As for my future plans, I intend to further develop this blog. I plan to write articles about the problems I faced, the solutions I found, best practices, examples, and current technologies to share what I’ve learned. Thank you for visiting my site and taking the time to read my first blog post.