客户's首页第一次失败a 核心网络活力 audit因为我, 罪魁祸首是一个单一的英雄形象:一个设计师4.2 MB PNG已经从Figma直接导出, 掉入WordPress媒体库, 它显示在1200 px宽, 存储在3800 px页面花了十一个秒在节流的移动连接上绘画I'd发货了。
那是在我的 WP 管理时代,它教会了我一些东西,这些东西塑造了我后来构建的每个图像工具 Toolz.dev:大多数图像问题都是't编辑问题,它们're 管道 problems。尺寸错误,格式错误,没有压缩通行证。你不需要't需要photoshop来修复任何一个。你需要三四个小工具,做一件事很好,运行速度快。
本指南贯穿了每一次日常图像操作 - 调整大小、压缩、格式转换和背景删除 - 每一次背后的推理以及 I've 所犯的错误,以便您可以跳过。toolz。dev 上的每个工具都完全在浏览器中处理图像。您的照片永远不会触摸服务器,这比人们一旦处理客户端工作或个人照片就意识到的更重要。
TL;博士: 对于常见的工作,您可以 100% 留在浏览器中: 图像调整大小 要固定尺寸, 图片压缩 要剪切文件大小, 格式转换器 在 PNG/JPEG/之间移动网络P/AVIF,以及 后台卸妆师 为干净的产品和个人资料拍摄。没有任何上传 - 文件从您的磁盘移动到浏览器选项卡并保留在那里。正确的优化顺序几乎总是调整大小,然后转换,然后压缩。
为什么要在浏览器中处理图像而不是上传它们?
Most "免费在线图片工具"下面也同样的工作方式:你上传文件,一个服务器处理它,你下载结果网页是某个地方租来的机器上面的薄皮,那个模型有三个问题,隐私只是最大声的一个。
Privacy是明显关注的禁运下的产品拍摄、证件照、内部仪表板截图、个人图片- 人们最常需要调整大小或压缩的图片正是应该't坐在陌生人's temp目录下"一小时后删除的文件"是一个承诺你可以't审计。
Latency是更安静的成本,通过办公Wi-Fi上传一批20 MB的相机图像比大小本身花费的时间更长,基于浏览器的工具跳过往返 - "上传"是即时因为文件只是移动到内存中,当I'm处理产品照片的文件夹时,那个区别是咖啡休息和连续流动的区别。
然后是墙壁,直到它们达到一个:文件大小的上限、每日限制、"升级到 Pro 以处理超过 10 MB 的图像,"免费层上的水印。客户端工具恰好有一个限制,它'是你的机器'的 RAM。
在选项卡中完成所有这些的技术多年来一直是标准配置。 HTML <canvas> element及其2d上下文,无需任何服务器即可对光栅图像进行解码、重采样、重新编码,浏览器'自己的 Image decoder处理jpeg,png,webp,以及越来越多的avif。there's不再是技术上的原因,通过互联网发送图片只是为了使其800 px宽。
如何将图像调整到正确的尺寸?
Resizing是我最能达到的操作,而正好向上游获取尺寸可以防止下游大多数性能问题,我希望I'd更早内化的规则:永远不要存储比它将要显示的最大尺寸大得多的图像。
上的工作流程 图像调整大小 工具:
- 将图像拖到工具上或单击浏览。
- 以像素输入目标宽度和高度。
- 保持纵横比锁定,除非您故意想要拉伸 - 打开它,改变宽度自动调整高度,这样就不会扭曲。
- 选择重采样方法(双立方是照片的安全默认值;对于您想要保持清晰的像素艺术来说,最近的邻居)。
- 处理和下载。
1个值得记忆的数字是视网膜乘数,800 px显示的插槽应该能在大约1600 px的高度保存图像,所以它在2×屏幕上保持清晰- 不是我第一次发货的3800 px怪物显示尺寸的两倍,而不是五倍。
Here's我一直钉着的用例小抄,因为"这个应该是什么宽度"是每个项目都会出现的问题:
| 用例 | 目标宽度 | 纵横比 | 格式 |
|---|---|---|---|
| 网站英雄 | 1920 便士 | 16:9 | 网络P |
| 博客/内容图片 | 1200 磅 | 3点2分或16点9分 | 网络P |
| 缩略图 | 320 400 磅 | 1:1或4:3 | 网络P |
| Instagram 帖子 | 1080 磅 | 1:1 | JPEG |
| X/推特提要中 | 1200 磅 | 16:9 | JPEG |
| 电子邮件标头 | 600 磅 | 3:1 | JPEG |
| 电[子商]务产 品 | 1000 1500 磅 | 1:1 | WebP 或 PNG |
![]()
Code review 中我仍然不断看到的一个错误:升级。制作一个图像 更大 than its source can't发明从未捕获的细节-工具只是插值新的像素,超过大约200%你得到一个柔和,糊状的结果如果客户端发送500 px的标志,需要在2000 px,诚实的答案是"从矢量源重新导出它,"不是"升级它,希望"
如何在不破坏图像的情况下压缩图像?
压缩是真正的页面权重节省的地方。图像通常是网页上最重的东西,因此缩小图像是大多数网站可以做的最高杠杆性能工作。
有两种,区别决定一切:
有损压缩 throws away data 人眼不太可能错过-微妙的色彩变化,高频纹理 80%质量的JPEG通常比同一图像在最高质量下小60 x 70%,在正常观看尺寸下没有可见差异,这就是你想要的照片。
无损压缩 更有效地重新排列数据,而不会丢弃任何数据;解压缩后的图像是像素对像素相同的。PNG 这样工作。当每个像素都很重要时使用它 - 徽标、屏幕截图、图表、任何文本清晰或硬边的东西。
的 图片压缩 tool让你设定一个品质等级,预览结果,并排比较档案大小再来承诺,我诚实的网页照片预设是80%品质 - I've测试越低越高跨越很多页面,而80是我停止能在真实的观看尺寸下从原件中分辨压缩版本的点,如果你想要完整的推理,the 图像压缩指南 深入探讨为什么这个数字成立。

我犯的错误是长得令人尴尬:压缩 之前 riesizing。if你压缩一个3800 px的图像,然后将其调整大小为1200 px,那么你把所有的压缩努力都花在了像素你're即将扔掉,最终文件比你'd做到了相反的方式。先调整大小,然后压缩较小的图像。总是。
您应该实际使用哪种图像格式?
格式景观比以前有更多的好选择,这是一个很好的问题。这里's我如何决定,没有营销光泽。
JPEG 是通用的有损格式 - 在任何地方都支持,非常适合照片,没有透明度。It's安全后备,仍然是正确的电子邮件呼叫,其中客户端对新格式的支持是抛硬币。
巴布亚新几内亚 是无损的,完全透明。it's截图,徽标,以及任何带有文字或尖锐边缘的东西的正确选择。它是 错 照片选择 - 以 PNG 形式保存的照片可能比与 JPEG 相同的照片大很多倍,但没有明显的好处。
网络P 2026年是我的web默认值,它既有损又无损,支持透明度,运行质量相当,比jpeg小大约25.35%,浏览器支持在这一点上实际上是通用的,如果我必须为新站点选择一种格式's图像,这就是它。
阿维夫 压缩更硬 - 通常比 JPEG 小 50% 左右 - 具有出色的梯度处理和精细纹理。权衡是较慢的编码和支持 that's 非常好,但不是很到处。我将其用作 a 中的首选 <picture> 元素下方有 WebP。
SVG isn't 完全是一种光栅格式 - it's 向量,因此它可以缩放到任何大小,而无需单个模糊像素。将其用于徽标、图标和插图。Don't 尝试将照片转换为它。
在这些之间进行转换是一项两键作业 格式转换器:掉图,挑目标格式,质量有损就调's,下载 我在真实站上发货的图案使用浏览器's自己的格式协商:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description" width="1200" height="675" loading="lazy">
</picture>
浏览器选择它理解的第一个格式,因此现代手机可以获得 AVIF,旧手机可以获得 WebP,任何古代手机仍然可以获得可用的 JPEG。注意显式 width 並 height-那些aren't装饰,他们保留布局空间,并阻止页面在图像加载时跳转,这是一个累积布局转移的胜利。
如何删除浏览器中的图像背景?
背景删除过去的意思是订阅工具或 Photoshop 中使用笔工具的二十分钟。现在,一个小到可以在浏览器选项卡中运行的机器学习模型可以在几秒钟内处理常见情况。
的 后台卸妆师 分析图像,构建将主体与背景分开的像素掩码,并输出具有透明 alpha 通道的 PNG。上传,稍等片刻,检查边缘,下载。整个事情保持本地化 - 模型在您的机器上运行,因此即使是敏感的产品镜头也不会离开它。
当你给它一个战斗机会时,它效果最好:甚至是灯光,主体和它背后的东西之间有像样的对比's,以及相当高分辨率的源头发,毛皮和细腻的边缘仍然是这些模型挣扎的地方- 如果结果在某人周围有光环's头,那's预期的失败模式,而不是你可以配置掉的错误像包装产品这样的干净边缘的主体出来近乎完美。

What's优化网络图像的正确顺序?
I've每次跳过这个顺序或乱序做,I've都付钱,按这个顺序做,输出既小又好看:
步骤 1 - 调整尺寸以显示尺寸。 找出图像将呈现的最大尺寸,将其加倍于视网膜,并且 调整大小 到那。这一步通常对文件大小的作用比其他任何事情都要大,因为你'删除永远不会被看到的像素。
2步 - 转换为正确的格式。 兑 webp(或带后备的avif)的照片。将徽标和屏幕截图保留为png。将正版矢量艺术保留为svg。
第 3 步 - 压缩至目标质量。 压缩 对于有损网络图像,其含量约为 80%,然后以实际大小观察结果。
4步 - 在HTML中负责任地服务。 用 srcset 因此浏览器下载适合设备的大小,然后添加 loading="lazy" 到折叠以下的任何东西,这样它就不会't阻挡初始油漆。
值得保留的宽松绩效预算:200 KB 以下的英雄图像(他们驱动最大的内容绘画,所以他们最重要)、100 KB 以下的常规内容图像、30 KB 以下的缩略图和 10 KB 以下的徽标 - 使用 SVG 和您'll 通常在不尝试的情况下击败这些领域't 法律,他们're 气味测试。如果单个图像从桶中吹过,它's 值得再看一眼。
常见问题
最好的免费在线图像工具是什么?
Job而定,这就是为什么toolz。dev将它们拆分为聚焦工具而不是一个臃肿的编辑器,对于维度,使用 图像调整大小。对于文件大小,使用 图片压缩.改变格式,用 格式转换器.对被试进行隔离,用 后台卸妆师。四者都是免费的,不需要注册,并且完全在浏览器中处理图像。
如何调整图像大小而不损失质量?
Downscaling - 使图像更小 - 几乎不花任何质量,因为源的细节比较小的尺寸需求更多 使用双三次重采样获得最平滑的结果 Upscaling 是危险的方向:工具必须发明像素,因此质量下降,超过原始尺寸的 200% 左右的柔软度变得明显 当您需要大得多的版本时,请返回原始源文件而不是放大小副本。
我的网站应该使用什么图像格式?
WebP用于照片和大多数内容图像-it's大约比JPEG小25.35%,在2026年几乎普遍支持使用SVG用于徽标和图标,因此它们在任何尺寸下都保持清晰仅在您需要无损质量时使用PNG,透明,当您想要最大压缩时达到AVIF,并且可以将其与WebP后备器配对在a中 <picture> 元素。
我应该在压缩之前或之后调整大小?
Resize first, then compress。compressing a large image and then shrinking it was was effort on pixels that get discarded during the resize, and final file ended up greater and lower quality than if you'd d d ad air order。rives reasizing first means the compressor works on the smaller image, producing the smallest, cleanest result。
使用带有个人或客户照片的在线图像工具安全吗?
大多数在线图像工具将您的照片上传到其服务器进行处理,这对于任何私有或 NDA 下的任何事情来说都是一个真正的担忧。toolz。dev 上的图像工具使用画布 API 以及浏览器内 ML 模型处理浏览器中的所有客户端。您的图像永远不会离开您的设备,因此它们'对于个人图片、客户端工作和机密产品拍摄来说是安全的。
WebP 和 AVIF 有什么区别?
JPEG和PNG都是在压缩上击败的。WebP比JPEG小25.35%左右,并具有有效的通用浏览器支持,这使其成为实际的默认值。AVIF进一步推动压缩 - 通常比JPEG小50%左右 - 并且处理梯度和纹理更好,但它编码更慢,并且支持是't相当普遍的方法是首先以WebP作为后备服务AVIF,因此每个浏览器都获得它可以解码的最佳格式。
如何免费从图像中删除背景?
打开 后台卸妆师(drop your image in),浏览器内模型检测主题并用透明替换背景,给你一个带有alpha通道的PNG,它最适合均匀的照明和主题与背景之间的清晰对比,像飞扬的头发这样的精细细节仍然是任何自动工具的硬壳,所以在你依赖结果之前检查边缘。
为什么我的网站图像会减慢页面速度?
几乎总是它's三件事之一:图像存储的比它显示的大得多,它's像未压缩的PNG照片一样的旧格式,或者它从未通过压缩通道按顺序修复它们-调整大小以显示尺寸,转换为WebP,然后压缩到大约80%的质量-而你'll通常将总图像重量削减一半以上,这直接显示在你的最大内容绘画分数中。
如何获取低于 100 KB 的图像?
按此顺序工作,并在您 're 限制下立即停止:调整图像实际显示的尺寸,转换为 WebP,然后以 80% 的质量压缩对于组合落在 60 到 120 KB 之间的典型 1600px 宽照片,如果您 're 仍然结束,请在进一步缩小尺寸之前将质量降至 70% - 70% 的质量损失远不如明显较小的图像明显。
我可以将 HEIC 照片从 iPhone 转换为 JPG 吗?
是的。将。heic 文件放入 格式转换器 jpg、png或webp的形式导出,heic是iphone默认保存到的格式,虽然它压缩得很好,但大多数windows应用程序、较旧的浏览器和内容管理系统仍然拒绝打开它- 这就是为什么在上传到任何地方之前转换为jpg或webp通常是安全的举措。



