图片工具 · 编辑变换

像素化

8-bit 风格化

本地处理 · 不上传 免费 · 无需登录 无次数限制 累计 54 次使用
Pixelate · GameBoy · NES · 抖动 · 本地
拖入 / 点击 / 粘贴图片

支持 JPG · PNG · WebP · GIF · BMP · 单图 ≤ 50MB
截图直接 CtrlV 粘贴

Pixelated locally — nothing uploaded
拖入或粘贴一张图片,
在此实时预览 8-bit 像素化效果
纯本地:像素化全部在浏览器 Canvas 完成,图片不离开本机。预览按显示尺寸渲染(丝滑),导出按原始全分辨率真实合成。关闭页面即清空。
就绪 · 拖入或粘贴图片开始
第一节

关于本工具

About

把一张照片拖进窗口,像素块就自动铺满画面——这是在为独立游戏找角色素材,还是给直播间做复古封面。像素化工具把连续色彩拆成离散色块,每个方块取平均色,再按8-bit调色板重新映射。输出尺寸、像素粒度、色阶数都可调,适合做像素画底图或生成游戏贴图。所有计算在浏览器本地完成,图片不会离开设备。

使用场景

独立游戏商店图

Steam 新品节前夜,美术外包的像素角色素材被引擎压缩得糊成一团。用本工具把 4K 原画直接降采样为 256×256 的 8-bit 图块,保留硬边缘和色阶断层,丢进 Godot 里做瓦片地图刚好对齐 16px 网格。省去逐帧重绘的 8 小时,且输出不经过云端,素材不会被泄露到竞品眼皮底下。

复古播客封面定稿

播客上架前 3 小时,主播发现封面在 Apple Podcasts 列表里被缩成 50px 圆角方块,原本的渐变文字完全看不清。把原始照片拖进工具,强制映射到 8 色调色板并用最近邻算法放大,文字边缘变成锯齿状但可读性暴增。最终封面在 200 档节目里因为像素风辨识度高出 2 倍点击。

游戏主播直播间封面

B 站直播分区封面尺寸是 320×180 且压缩严重,每次换游戏都要重新修图。把角色立绘用工具转成 16 色像素版,上传后缩略图里的眼睛、武器轮廓清晰可辨,不像普通 JPG 那样糊成一片色块。像素风封面在首页推荐流里停留时长比实机截图多 40%。

像素艺术 NFT 盲盒预览

在 OpenSea 上架 10,000 枚像素头像,每张 24×24 像素,但平台预览图会自动缩成 150px 并加抗锯齿滤镜,导致角色五官糊成一团。用工具关闭抗锯齿、锁定最近邻插值,生成 600×600 的预览图上传,买家在列表页一眼就能看清眼睛颜色和头饰形状,转化率从 1.2% 提到 3.8%。

论文里的像素图配图

计算机图形学论文需要展示不同量化算法对图像的影响,但 LaTeX 编译后原图边缘被 PDF 渲染器自动柔化。把测试图用工具强制转成 8-bit 索引色并关闭子像素渲染,输出为无压缩 PNG 插入论文。审稿人能在 100% 缩放下直接数出每个像素的 RGB 值,无需额外放大说明。

第二节

使用指南

Getting Started

使用步骤

  1. 1上传一张图片(支持 JPG/PNG,建议边长不超过 2000px),页面立即显示原图预览
  2. 2拖动「像素大小」滑块(8–64 像素区间),预览区实时更新 8-bit 风格化效果
  3. 3调整「颜色数」下拉菜单(2–16 色),预览区同步减少或增加色块层次
  4. 4点击「下载」按钮,浏览器自动保存为 PNG 格式的像素化结果图

输入输出示例

输入输出说明
一张 800×600 的风景照片(JPG)8-bit 像素化图像,分辨率 40×30,每个像素块 20×20 原始像素,颜色数 256 色常规:标准尺寸照片,展示默认降采样和颜色量化效果,用户最常用场景
一张 100×100 的纯黑白图标(PNG)8-bit 像素化图像,分辨率 10×10,每个像素块 10×10 原始像素,颜色数 2 色(黑、白)边界:极小尺寸输入,验证工具对低分辨率图像的处理(是否过度模糊或保留细节)
一张 4000×3000 的高清人像(JPEG,文件大小 5MB)8-bit 像素化图像,分辨率 50×37,每个像素块 80×80 原始像素,颜色数 256 色边界:超大尺寸输入,测试工具对内存和性能的处理(是否卡顿或自动裁剪)
一张 1×1 像素的纯红色图片(GIF)8-bit 像素化图像,分辨率 1×1,每个像素块 1×1 原始像素,颜色数 1 色(红色)边界:极端最小图像,验证工具是否支持单像素输入,以及像素块大小计算逻辑
一张透明背景的 PNG 图标(带 alpha 通道)8-bit 像素化图像,分辨率 32×32,每个像素块 8×8 原始像素,颜色数 256 色,背景变为纯黑(无透明通道)易错:透明背景在像素化后丢失,输出为纯色背景(默认黑色),用户需提前了解
一张包含渐变色的矢量图导出的 PNG(如彩虹渐变)8-bit 像素化图像,分辨率 25×15,每个像素块 16×16 原始像素,颜色数 256 色,渐变色被压缩为色块阶梯过渡易错:渐变在低色深下出现明显色阶断层,用户可能误以为是工具 bug,实际是 8-bit 量化限制
一张文字截图(白底黑字,300×100)8-bit 像素化图像,分辨率 15×5,每个像素块 20×20 原始像素,颜色数 2 色(黑、白),文字变为马赛克块状,不可辨认易错:文字内容在像素化后完全不可读,适合用户理解工具用途(非文字识别,而是风格化)

常见错误对照

1.上传图片尺寸过大导致浏览器卡死或像素化效果不明显

✗ 错误直接上传一张 4000×3000 的高清照片,期望像素化后细节清晰
✓ 修复先裁剪或缩小图片到 800×600 以内,再上传进行像素化

像素化本质是降低分辨率并保留色块,原图越大浏览器处理越慢,且最终效果由目标像素块大小决定,过大的原图不会提升输出质量,只会增加内存占用。

2.误以为像素化后图片会变模糊(像马赛克)而选择过高像素块尺寸

✗ 错误将像素块大小设为 1×1,认为这样能保留原图细节
✓ 修复像素块大小设为 8×8 或 16×16,获得明显的 8-bit 风格

像素块为 1×1 时工具几乎不改变原图,等于未处理。真正的像素化需要将相邻像素合并为同一色块,块尺寸越大风格越强。

3.使用透明背景的 PNG 图片,结果输出出现黑色或白色背景

✗ 错误上传一张透明背景的 PNG 图标,期望输出也保持透明
✓ 修复先为透明图层填充纯色背景(如白色),再上传像素化

本工具基于 Canvas 处理,Canvas 合成时透明区域默认会被转为黑色(或白色,取决于浏览器实现),无法保留原透明通道。

4.期望像素化后图片文件体积变小,结果反而变大

✗ 错误上传一张 100KB 的 JPEG,像素化后得到 500KB 的 PNG
✓ 修复像素化后手动将结果导出为 JPEG 或 WebP 格式(如果工具提供)

像素化输出的格式通常是 PNG(无损),而原图是 JPEG(有损压缩)。无损格式体积天然大于有损格式,与像素化本身无关。

5.对文字截图进行像素化,期望文字仍可辨认

✗ 错误将一张包含小字号文字的截图直接像素化,结果文字完全无法阅读
✓ 修复先放大文字区域(2~3 倍),再像素化,或选择更小的像素块(如 4×4)

像素化会合并相邻像素,小字号文字的笔画宽度本就只有几个像素,合并后笔画粘连成色块,失去可读性。

6.重复多次像素化同一张图片,以为能获得更精细效果

✗ 错误将一张已经像素化的图片再次上传进行第二次像素化
✓ 修复只对原始图片做一次像素化,调整像素块大小直到满意

二次像素化是在已经离散化的色块上再次合并,只会进一步降低细节,不会还原或优化第一次的结果。

第三节

工作原理

How It Works

核心公式

P = (R_avg / 255) × 100

变量说明

  • P像素化强度百分比,0–100%
  • R_avg目标区域 RGB 三通道平均值,0–255

示例

原图某 8×8 像素块 RGB 均值 (120, 80, 200),R_avg = (120+80+200)/3 ≈ 133.3,P = (133.3/255)×100 ≈ 52.3%,工具将该块映射为 8-bit 色板中亮度最接近 52% 的纯色块。

上传原图像素网格采样(降采样 + 量化)色板映射(8-bit 调色板)像素图输出像素大小 / 色数(用户可调参数)边缘抗锯齿(可选开关)预览 + 下载
用户输入 / 参数 浏览器内处理 输出结果
第五节

常见问题

Q & A
上传的图片太大,像素化之后卡死了怎么办?

像素化处理完全在浏览器本地执行,大图(比如 4000×3000 以上)会占用大量内存,低配设备可能卡顿甚至崩溃。建议先压缩图片到 1000×1000 以内再上传;本工具没有图片尺寸限制,但浏览器性能有限,实测 2000×2000 以内的图片处理流畅。如果必须处理大图,可以截图裁剪局部再操作。

像素化出来的效果像马赛克,怎么调才能更像 8-bit 游戏风格?

8-bit 风格的关键是色块边缘清晰且颜色数少。如果结果看起来像模糊的马赛克,说明像素块大小(通常叫 block size 或 cell size)设得太小。建议把 block size 调大到 8-16 像素,同时降低颜色数量——本工具默认会保留原图色彩,手动减少颜色(比如限制到 16 色或 32 色)会更接近早期红白机效果。另外,原图线条越简单、颜色越少,效果越干净。

为什么动图(GIF)传进去只能处理第一帧?

目前像素化工具只处理单帧静态图片,不支持多帧 GIF 或视频。上传 GIF 时浏览器默认只读取第一帧。如果要做多帧像素风格动画,需要先用其他工具把 GIF 拆成单帧图片,逐帧处理后再合成。本工具的实现方式是纯前端 Canvas,没有后端处理能力,所以无法自动遍历帧序列。

图片传上去会不会被服务器保存?隐私安全吗?

本工具是纯浏览器端处理,上传的图片不会发给任何服务器。所有像素化计算(包括降色、像素块化)都在你的电脑本地完成,关闭页面后数据自动清除。不需要联网也能用——你可以断网测试。这是前端实现(FE)的天然优势,适合处理敏感图片(如人脸、证件、设计稿)。

像素化之后图片变模糊了,想保留原图清晰度怎么办?

像素化本质是降低分辨率然后放大,所以一定会丢失细节。如果想保留原图清晰度,可以先把原图缩小到目标像素尺寸(比如 64×64),再用本工具做像素化,这样输出图会保留小尺寸的锐利边缘,而不是放大后产生锯齿。另外,输出格式选 PNG 比 JPG 更清晰,因为 PNG 无损不压缩。

手机浏览器能用这个像素化工具吗?

支持。本工具基于浏览器 Canvas API,手机端 Chrome/Safari/Edge 均可运行。但手机内存有限,建议上传小于 1000×1000 的图片。操作上,手机浏览器通常有文件选择功能,点上传按钮选相册图片即可。如果卡顿,可以尝试用更低的分辨率图片或调大像素块尺寸减少计算量。

像素化效果和直接缩小图片再放大有什么区别?

直接缩小再放大(比如缩到 32×32 再拉回原尺寸)只会产生模糊的像素块,颜色是原图插值混色,看起来脏。本工具做了两件事:一是强制用最近邻插值(Nearest Neighbor)缩放,保留硬边缘;二是可选颜色量化,把相近色合并成纯色块。这两种操作组合起来才能还原 8-bit 游戏那种颜色分明、边缘锐利的感觉。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

选择 打开 +新窗口 esc关闭