How do I resize an image without losing quality?

Downscaling — making an image smaller — barely costs any quality because the source has more detail than the smaller size needs. Use bicubic resampling for the smoothest result. Upscaling is the risky direction: the tool has to invent pixels, so quality drops, and past about 200% of the original size the softness becomes obvious. When you need a much larger version, go back to the original source file rather than enlarging a small copy.

What image format should I use for my website?

Use WebP for photographs and most content images — it's roughly 25–35% smaller than JPEG with near-universal support in 2026. Use SVG for logos and icons so they stay sharp at any size. Use PNG only when you need lossless quality with transparency. Reach for AVIF when you want maximum compression and can pair it with a WebP fallback in a element.

Should I resize before or after compressing?

Resize first, then compress. Compressing a large image and then shrinking it wastes effort on pixels that get discarded during the resize, and the final file ends up larger and lower quality than if you'd done it in the correct order. Resizing first means the compressor works on the smaller image, producing the smallest, cleanest result.

Is it safe to use online image tools with personal or client photos?

Most online image tools upload your photos to their servers to process them, which is a real concern for anything private or under NDA. The image tools on toolz.dev process everything client-side in your browser using the canvas API and, for background removal, an in-browser ML model. Your images never leave your device, so they're safe for personal pictures, client work, and confidential product shots.

What is the difference between WebP and AVIF?

Both beat JPEG and PNG on compression. WebP is around 25–35% smaller than JPEG with effectively universal browser support, which makes it the practical default. AVIF pushes compression further — commonly about 50% smaller than JPEG — and handles gradients and texture better, but it encodes more slowly and support isn't quite everywhere yet. The common approach is to serve AVIF first with WebP as a fallback so every browser gets the best format it can decode.

How do I remove the background from an image for free?

Open the Background Remover, drop your image in, and an in-browser model detects the subject and replaces the background with transparency, giving you a PNG with an alpha channel. It works best with even lighting and clear contrast between subject and background. Fine details like flyaway hair are still the hard case for any automatic tool, so check the edges before you rely on the result.

Why are my website images slowing down the page?

Almost always it's one of three things: the image is stored much larger than it displays, it's in an old format like an uncompressed PNG photo, or it was never run through a compression pass. Fix them in order — resize to display dimensions, convert to WebP, then compress to about 80% quality — and you'll typically cut total image weight by more than half, which shows up directly in your Largest Contentful Paint score.

How do I get an image under 100 KB?

Work in this order and stop as soon as you're under the limit: resize to the dimensions the image actually displays at, convert to WebP, then compress at 80% quality. For a typical 1600px-wide photo that combination lands somewhere between 60 and 120 KB. If you're still over, drop the quality to 70% before you shrink the dimensions further — quality loss at 70% is far less noticeable than a visibly smaller image.

Can I convert HEIC photos from my iPhone to JPG?

Yes. Drop the .heic file into the Format Converter and export it as JPG, PNG, or WebP. HEIC is the format iPhones save to by default, and while it compresses well, most Windows apps, older browsers, and content management systems still refuse to open it — which is why converting to JPG or WebP before uploading anywhere is usually the safe move.

调整浏览器中图像的大小、压缩和转换

客户's首页第一次失败a 核心网络活力 audit因为我,罪魁祸首是单英雄形象:设计师直接从figma导出的一张4.2 MB PNG掉入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 "免费在线图像工具"下面工作一样:你上传文件,一个服务器处理它,你下载结果网页是某个地方租来的机器上面的薄皮,那个模型有三个问题,隐私只是最大声的一个。

Toolz.dev 自己的与 TinyWow 等网站的比较是关于这种仅使用浏览器的方法在图像方面仍然放弃的方面:没有AVIF或动画输出,因为没有浏览器可以从画布上编码AVIF,也没有批处理,因为这里的每个图像工具一次处理一个文件。

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更早内化的规则:永远不要存储比它将要显示的最大尺寸大得多的图像。

上的工作流程图像调整大小工具:

将图像拖到工具上或单击浏览。
以像素输入目标宽度和高度。
保持纵横比锁定,除非您故意想要拉伸 - 打开它,改变宽度自动调整高度,这样就不会扭曲。
选择重采样方法(双立方是照片的安全默认值;对于您想要保持清晰的像素艺术来说,最近的邻居)。
处理和下载。

Retina乘数值得记住的一个数字,一个显示在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×1000×1500×100另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造	1:1	WebP 或 PNG

Code review 中我仍然不断看到的一个错误:升级。制作一个图像更大 than its source can't发明从未捕获的细节-工具只是插值新的像素,超过大约200%你得到一个柔和,糊状的结果如果客户端发送500 px的标志,需要在2000 px,诚实的答案是"从矢量源重新导出它,"不是"升级它,希望"

如何在不破坏图像的情况下压缩图像?

压缩是真正的页面权重节省的地方。图像通常是网页上最重的东西,因此缩小图像是大多数网站可以做的最高杠杆性能工作。

有两种,区别决定一切:

有损压缩 trows away data 人眼不太可能错过的 - 微妙的色彩变化,高频纹理 80%质量的JPEG通常比同一图像在最高质量下小60 x 70%,在正常观看尺寸下没有可见差异,这就是你想要的照片。

无损压缩 更有效地重新排列数据,而不会丢弃任何数据;解压缩后的图像是像素对像素相同的。PNG 这样工作。当每个像素都很重要时使用它 - 徽标、屏幕截图、图表、任何文本清晰或硬边的东西。

的图片压缩 tool让你设定一个品质等级,预览结果,并排比较档案大小再来提交,我对于网页照片的诚实预设是80%品质 - I've测试越低越高跨越很多页面,而80是我停止能在真实观看大小下从原件中分辨压缩版本的点,如果你想要完整的推理,the 图像压缩指南深入探讨为什么这个数字成立。

Comparison showing original image vs compressed image with file sizes displayed

我犯的错误是长得令人尴尬:压缩之前 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预期的失败模式,而不是你可以配置掉的错误像包装产品这样的干净边缘的主体出来近乎完美。

Before and after comparison of background removal from cluttered to clean transparent background

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 做到了正确的顺序。resize first means the compressor works on the larter 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通常是安全的举措。

Frequently Asked Questions

It depends on the job, which is why toolz.dev splits them into focused tools rather than one bloated editor. For dimensions, use Image Resize. For file size, use Image Compress. For changing formats, use the Format Converter. For isolating subjects, use the Background Remover. All four are free, need no signup, and process images entirely in your browser.