在线PNG和JPEG压缩工具推荐和自己做一个在线PNG和JPG压缩网站的方法

压缩PNG/JPG 是免费的线上工具（没有任何隐藏费用），可帮助你压缩图像（jpeg 或 png 格式）。基本上，您有几个解决方案可用来缩减图像的大小，但大多数时候这些解决方案也会降低图像质量。我们的工具可以让您在缩小图片的同时保持品的优良。

在您为网站添加高质量图像以使其更具吸引力并藉此改善用户体验时，必须下载以显示网页的数据量也跟着显着增加。这将导致网页显示缓慢 – 而这对访问您的网站的用户将造成不利，也会对您的网站在Google和其他搜索引擎中的排名产生负面影响。
Compress PNG / JPG能为您提供两全其美的解决方案 – 其允许您在网站上显示精美的高品质图像，而不会减慢显示网页所需的时间。

即使您不会在网站上使用图片，仍然应该缩小其尺寸。较小的图片文件大小意味着您可以在手机或磁盘驱动器上容纳更多图片而无需额外内存。这也意味着与朋友丶亲戚和同事分享您的照片会变得更容易丶更快捷。

以下是一些推荐的在线PNG和JPEG压缩工具，供你参考：

TinyPNG (适用于PNG和JPEG)：
- 网站：TinyPNG
- 简介：TinyPNG 使用智能有损压缩技术来减小 PNG 和 JPEG 文件的大小。压缩效果非常好，且不会明显降低图像质量。
Compressor.io (适用于PNG、JPEG、GIF 和 SVG)：
- 网站：Compressor.io
- 简介：Compressor.io 提供了高质量的压缩服务，支持多种图像格式。可以选择有损和无损压缩。
Optimizilla (适用于PNG和JPEG)：
- 网站：Optimizilla
- 简介：Optimizilla 可以批量压缩 PNG 和 JPEG 图像，提供高质量的压缩并保持图像质量。
Kraken.io (适用于PNG和JPEG)：
- 网站：Kraken.io
- 简介：Kraken.io 提供快速且高效的图像压缩服务，可以选择有损和无损压缩方式，并支持批量上传和压缩。
ImageOptim (适用于PNG和JPEG)：
- 网站：ImageOptim
- 简介：ImageOptim 提供了一种简单的在线图像压缩工具，重点在于无损压缩，保持图像质量的同时减小文件大小。
JPEG-Optimizer (适用于JPEG)：
- 网站：JPEG-Optimizer
- 简介：JPEG-Optimizer 专门用于JPEG图像压缩，可以调整图像尺寸和质量，压缩效果明显。

这些工具大多免费提供基本的压缩服务，有些也提供高级功能的付费版本，可以根据你的需求选择合适的工具。

创建一个在线PNG和JPEG压缩工具网站需要一定的前端和后端开发技能。以下是一个基本的实现步骤，包括前端、后端和图像压缩逻辑。

### 技术栈推荐

– 前端：HTML, CSS, JavaScript (可以使用框架如React或Vue)
– 后端：Node.js (可以使用Express框架)
– 图像压缩库：imagemin (Node.js库)

### 实现步骤

#### 1. 设置开发环境

– 安装Node.js和npm
– 初始化Node.js项目

“`bash
mkdir image-compressor
cd image-compressor
npm init -y
“`

#### 2. 安装依赖

“`bash
npm install express multer imagemin imagemin-pngquant imagemin-mozjpeg
“`

#### 3. 创建服务器 (server.js)

在项目根目录创建一个 `server.js` 文件，配置Express服务器并处理图像上传和压缩。

“`javascript
const express = require(‘express’);
const multer = require(‘multer’);
const imagemin = require(‘imagemin’);
const imageminPngquant = require(‘imagemin-pngquant’);
const imageminMozjpeg = require(‘imagemin-mozjpeg’);
const path = require(‘path’);
const fs = require(‘fs’);

const app = express();
const PORT = process.env.PORT || 3000;

// Set up multer for file uploads
const upload = multer({ dest: ‘uploads/’ });

app.use(express.static(‘public’));

app.post(‘/upload’, upload.single(‘image’), async (req, res) => {
const filePath = req.file.path;
const originalFileName = req.file.originalname;
const outputFilePath = path.join(‘compressed’, originalFileName);

try {
await imagemin([filePath], {
destination: ‘compressed’,
plugins: [
imageminPngquant(),
imageminMozjpeg({ quality: 75 })
]
});
fs.unlinkSync(filePath); // Delete the original file
res.download(outputFilePath, originalFileName, () => {
fs.unlinkSync(outputFilePath); // Delete the compressed file after download
});
} catch (err) {
res.status(500).send(‘Error compressing image’);
}
});

app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
“`

#### 4. 创建前端页面

在项目根目录下创建 `public` 文件夹，并在其中创建 `index.html` 和 `style.css` 文件。

`index.html`:

“`html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image Compressor</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<h1>Image Compressor</h1>
<form id=”upload-form” action=”/upload” method=”post” enctype=”multipart/form-data”>
<input type=”file” name=”image” accept=”image/png, image/jpeg” required>
<button type=”submit”>Upload and Compress</button>
</form>
<div id=”result”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
“`

`style.css`:

“`css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
text-align: center;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

input[type=”file”] {
margin: 10px 0;
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
“`

`script.js`:

“`javascript
document.getElementById(‘upload-form’).addEventListener(‘submit’, function(event) {
event.preventDefault();

const form = event.target;
const formData = new FormData(form);

fetch(‘/upload’, {
method: ‘POST’,
body: formData
})
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.style.display = ‘none’;
a.href = url;
a.download = ‘compressed-image’;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.getElementById(‘result’).textContent = ‘Image compressed and downloaded!’;
})
.catch(() => {
document.getElementById(‘result’).textContent = ‘Error compressing image’;
});
});
“`