Pic Smaller – Compress JPEG, PNG, WEBP, AVIF, SVG and GIF images intelligently
Pic Smaller is a super easy-to-use online image compression tool. Simply upload your desired image(s), and Pic Smaller will automatically perform its compress functionality and provide details on the results. Users can also customize features to suite their desired output, such as setting the output format or number of output colors. It's intuitive, website and mobile friendly, and supports compression configuration. At the same time, because of purely local compression without any server-side logic, it is completely safe.
Pic smaller has been deployed to vercel
, you can use it by visiting the URL pic-smaller.vercel.app. Due to the GFW, Chinese users can use it by visiting the URL picsmaller.com
picsmaller.com is a new domain that has just been applied for. The old domain txx.cssrefs.com is still accessible, but will be expired on
2025-02-22
and payment will not continue. Please use the latest domain to access the service.
Node.js
node -v
Pic smaller is a Vite + React project, you have to get familiar with them first. It uses modern browser technologies such as OffscreenCanvas
, WebAssembly
, and Web Worker
. You should also be familiar with them before developing.
# Clone the repo
git clone https://github.com/joye61/pic-smaller.git
# Change cwd
cd ./pic-smaller
# Install dependences
npm install
# Start to develop
npm run dev
Hold control and left click the URL next to "Local:" to open the website on your local machine.
Figure 4: Where to open the localhost website link
If you want to independently deploy this project on your own server, the following document based on Docker, and Dockerfile script has been tested. Within the project root directory, follow the instructions to start docker application
# Build docker image from Dockerfile
docker build -t picsmaller .
# Start a container
docker run -p 3001:3001 -d picsmaller
Now you can access the project via http://127.0.0.1:3001. If you want your project to be accessible to everyone, you need to prepare a domain name pointing to your local machine, and then proxy it to port 3001 of this machine, through a reverse proxy server like nginx.
Our standards for contributions: By using welcoming and inclusive language, respecting diverse viewpoints and experiences, embracing constructive criticism, and prioritizing what’s best for the community, we can create a positive and collaborative environment for everyone.
The src folder stores in all the files and components used in the react application like App.tsx. The tests folder includes code to test particular features during the development process. The docs folder includes the pictures used for this README documentation.
This project is under MIT license.
Please contact the repository owner joye61's email for any questions: [email protected]