图压压 (TuYaYa) - 在线图片压缩工具 | Online Image Compression Tool

English | 中文

中文

图压压是一款免费的在线图片压缩工具，帮助用户轻松压缩图片，无需下载软件，保持图片质量的同时减小文件大小。该项目使用React和Vite构建，并可部署在Cloudflare Pages或Workers上。

特性

• 🖼️ 支持多种图片格式 (JPG, PNG, WEBP)
• 🔄 在浏览器中进行压缩，无需服务器处理
• 📱 响应式设计，适配各种设备
• 🌐 支持多语言 (中文, 英文, 法语, 意大利语, 西班牙语, 日语, 韩语)
• 🎛️ 可调节压缩质量和尺寸
• 📊 显示压缩前后对比和节省空间
• 📸 支持批量压缩多张图片，可单独或一次性压缩全部图片
• 📥 灵活的下载选项，支持下载单张或全部压缩后的图片
• 🔍 优化的SEO功能
• 🔄 解决React水合问题，提供平滑的用户体验
• ☁️ 易于部署到Cloudflare Pages或Workers

English

TuYaYa is a free online image compression tool that helps users easily compress images without downloading software, reducing file size while maintaining image quality. The project is built with React and Vite, and can be deployed on Cloudflare Pages or Workers.

Features

• 🖼️ Support for multiple image formats (JPG, PNG, WEBP)
• 🔄 Compression in the browser without server processing
• 📱 Responsive design for all devices
• 🌐 Multilingual support (Chinese, English, French, Italian, Spanish, Japanese, Korean)
• 🎛️ Adjustable compression quality and dimensions
• 📊 Display before/after comparison and space savings
• 📸 Batch compression support for multiple images, with options to compress single or all images at once
• 📥 Flexible download options, supporting download of single or all compressed images
• 🔍 Optimized SEO
• 🔄 Solved React hydration issues for smooth user experience
• ☁️ Easy deployment to Cloudflare Pages or Workers

技术栈 | Tech Stack

中文

• React 18
• TypeScript
• Vite
• TailwindCSS
• React Router v6 (路由管理)
• browser-image-compression (开源图片压缩库)
• react-dropzone (文件拖放上传)
• i18next (国际化与本地化)
• React-Country-Flag (国旗图标显示)
• React Helmet (SEO优化)
• Cloudflare Pages/Workers (部署)

English

• React 18
• TypeScript
• Vite
• TailwindCSS
• React Router v6 (routing management)
• browser-image-compression (open-source image compression library)
• react-dropzone (file drag-and-drop upload)
• i18next (internationalization and localization)
• React-Country-Flag (country flag icons display)
• React Helmet (SEO optimization)
• Cloudflare Pages/Workers (deployment)

本地开发 | Local Development

中文

1. 克隆仓库

git clone https://github.com/wangzi0218/tuyaya.git
cd tuyaya

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

4. 在浏览器中访问 http://localhost:5174

English

1. Clone the repository

git clone https://github.com/wangzi0218/tuyaya.git
cd tuyaya

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Visit http://localhost:5174 in your browser

构建和部署 | Build and Deploy

中文

构建项目

npm run build

部署到Cloudflare Pages

npm run deploy

注意：部署前需要先安装并登录Cloudflare Wrangler CLI工具。

English

Build the project

npm run build

Deploy to Cloudflare Pages

npm run deploy

Note: You need to install and log in to the Cloudflare Wrangler CLI tool before deployment.

国际化 | Internationalization

中文

本项目支持以下语言：

• 中文 (zh)
• 英文 (en)
• 法语 (fr)
• 意大利语 (it)
• 西班牙语 (es)
• 日语 (ja)
• 韩语 (ko)

要添加新的翻译或修改现有翻译，请编辑 src/locales/ 目录下的相应JSON文件。

English

This project supports the following languages:

• Chinese (zh)
• English (en)
• French (fr)
• Italian (it)
• Spanish (es)
• Japanese (ja)
• Korean (ko)

To add new translations or modify existing ones, edit the corresponding JSON files in the src/locales/ directory.

项目结构 | Project Structure

中文

├── public/              # 静态资源
├── src/
│   ├── components/      # React组件
│   ├── locales/         # 国际化翻译文件
│   │   ├── zh/          # 中文翻译
│   │   ├── en/          # 英文翻译
│   │   ├── fr/          # 法语翻译
│   │   ├── it/          # 意大利语翻译
│   │   ├── es/          # 西班牙语翻译
│   │   ├── ja/          # 日语翻译
│   │   └── ko/          # 韩语翻译
│   ├── pages/           # 页面组件
│   ├── utils/           # 工具函数
│   ├── App.tsx          # 应用入口
│   ├── i18n.ts          # 国际化配置
│   ├── main.tsx         # 主入口文件
│   └── vite-env.d.ts    # Vite类型声明
├── index.html           # HTML模板
├── package.json         # 项目依赖
├── tsconfig.json        # TypeScript配置
├── vite.config.ts       # Vite配置
└── README.md            # 项目说明

English

├── public/              # Static assets
├── src/
│   ├── components/      # React components
│   ├── locales/         # Internationalization translation files
│   │   ├── zh/          # Chinese translations
│   │   ├── en/          # English translations
│   │   ├── fr/          # French translations
│   │   ├── it/          # Italian translations
│   │   ├── es/          # Spanish translations
│   │   ├── ja/          # Japanese translations
│   │   └── ko/          # Korean translations
│   ├── pages/           # Page components
│   ├── utils/           # Utility functions
│   ├── App.tsx          # Application entry
│   ├── i18n.ts          # Internationalization configuration
│   ├── main.tsx         # Main entry file
│   └── vite-env.d.ts    # Vite type declarations
├── index.html           # HTML template
├── package.json         # Project dependencies
├── tsconfig.json        # TypeScript configuration
├── vite.config.ts       # Vite configuration
└── README.md            # Project documentation

许可证 | License

中文

本项目使用MIT许可证。详情请查看LICENSE文件。

English

This project is licensed under the MIT License. See the LICENSE file for details.

贡献 | Contributing

中文

欢迎提交问题和拉取请求！

English

Issues and pull requests are welcome!

最近更新 | Recent Updates

中文

• 添加了多语言支持 (法语、意大利语、西班牙语、日语、韩语)
• 修复了React组件水合问题
• 优化了所有页面的加载状态UI
• 改进了UI组件的一致性和响应式设计
• 添加了隐私政策和服务条款页面

English

• Added multilingual support (French, Italian, Spanish, Japanese, Korean)
• Fixed React component hydration issues
• Optimized loading state UI for all pages
• Improved UI component consistency and responsive design
• Added privacy policy and terms of service pages