What size should I export images for retina screens?

Export at 2× the size the image is displayed at. If your layout renders an image in a 600×400 box, export it at 1200×800 so it stays sharp on devices with a devicePixelRatio of 2. Going beyond 2× is rarely worth the extra bytes, since the visible benefit is minimal even on 3× displays.

Does resizing an image remove EXIF data?

Yes, when resizing happens through an HTML canvas — as it does on toolz.dev — the tool re-encodes the image into a new file and EXIF metadata does not carry over. That means camera details, capture time, and GPS coordinates are all stripped. For publishing, this is a privacy benefit; if you need EXIF preserved, use a tool that explicitly supports it.

Can I resize an animated GIF and keep the animation?

Not with a canvas-based resizer. Canvas captures a single frame, so the output is a still image in PNG, JPEG, or WebP format. Resizing an animation while preserving all its frames requires a dedicated GIF processing tool.

How do I resize an image to a specific file size in KB?

File size is not something you set directly — it falls out of dimensions, format, and compression quality. Work backwards: reduce the dimensions to what the image is actually displayed at, export as WebP or JPEG rather than PNG for photographs, then step the quality down and re-check the output size. Hitting a hard target like "under 100 KB" is usually two or three passes of that loop, not one.

How do I resize an image without cropping it?

Keep the aspect ratio locked. When width and height stay in their original proportion, every pixel of the frame is preserved and only the scale changes. Cropping only becomes unavoidable when the target shape differs from the source shape — fitting a 3:2 photo into a 1:1 avatar slot means either letterboxing the empty space or cutting some of the image away.

Should I resize or compress my images first?

Resize first, then compress. Reducing dimensions removes pixels outright — halving both the width and height eliminates 75% of them — which is nearly always a bigger file-size win than compression alone. Compressing before resizing wastes effort on pixels you are about to discard and can bake artifacts into the ones you keep.

What is the difference between resizing and cropping?

Resizing changes the dimensions of the whole image, keeping all of its content. Cropping cuts away part of the image to change its framing or aspect ratio. If you need a square from a rectangular photo, resizing with the aspect ratio locked will fit the image inside the square rather than fill it — you need a crop to fill the frame.

Is there a file size limit for resizing images in the browser?

There is no server-imposed limit, because nothing is uploaded — the practical ceiling is your device's available memory. Typical photos, including large camera files, resize instantly. Extremely large images (very high-resolution scans, for example) may take a moment or, on a memory-constrained phone, fail to load.

Why does my image still look blurry after resizing to the right dimensions?

Check three things in order: whether you scaled up from a smaller original (unfixable — find a bigger source), whether you accounted for device pixel ratio (a 600px file on a 2× screen needs to be 1200px), and whether the platform you uploaded to re-compressed the image afterwards. The third is common on social media and is best mitigated by uploading at the platform's recommended dimensions.

在线调整图像大小:视网膜陷阱和画布悄悄扔掉的东西

6个月左右的时间里,这个博客上的每一个缩略图都略微柔软,没有坏,没有明显错误,只是... 模糊按照你从眼角注意到的方式,然后说服自己不要注意到。

Layout 说缩略图插槽宽 600 像素,于是我导出缩略图宽 600 像素,那正好是错误的做法,而且我花了很长时间尴尬地弄清楚原因,因为在我的显示器上看起来很好,在手机上看起来像复印件的复印件。

CSS像素不是设备像素的原因,现代手机或视网膜笔记本电脑将两个或三个物理像素打包到每个CSS像素中- that's what window.devicePixelRatio reports。so我的600像素图像被拉伸到1200个物理像素的玻璃上,浏览器发明了这种差异。 您无法在文件中发明 't 的细节。 修复方法是导出为 1,200,让 CSS 显示为 600。

That's这个指南是围绕错误构建的,以及其他三四个使调整大小的图像看起来比应有的更糟糕的。The 图像调整工具大小 toolz。dev上做浏览器中的工作- 文件永远不会离开你的机器- 但工具是容易的部分,知道要输入哪些数字才是真正重要的部分。

TL;博士: 导出于 2× 显示屏尺寸 为视网膜屏幕(600px的插槽需要1,200px的文件),并且从不缩放起来-你可以't添加从未捕捉到的细节锁定宽高比,除非你真心想扭曲图像调整大小之前你压缩,而不是之后。使用图像调整工具大小要设置尺寸, 纵横比计算器找出缺失的一面,以及图像压缩器事后要缩小文件大小。一切都运行客户端。一个值得提前知道的警告:调整大小重新对图像进行编码,所以 所有 EXIF 元数据均被删除- 非常适合隐私,偶尔会令人惊讶。

为什么我的图像调整大小后看起来很模糊?

十分之九是's三件事之一,它们're都是可以修复的。

你扩大了规模。 400×300的照片放大到1600×1200,要求软件为它拥有的每一个生成十二个像素的信息,它通过插值来做到这一点 - 对邻居进行平均以猜测属于两者之间 - 结果很软,因为细节确实不存在,除了生成模型之外没有什么可以发明回来。 始终从您拥有的最大原创作品开始并缩小规模。 Down几乎是无损的;向上是一个猜测。

您忽略了像素比。 I上面描述的错误,如果CSS框是600×400,用户's屏幕是2×,浏览器需要1200×800真实像素才能渲染清晰,2×导出,让浏览器缩放- 浏览器中的缩放看起来很棒;上缩看起来像泥巴。

你之后还有其他东西压缩了它。 您仔细调整大小,然后上传到一个平台,该平台按照自己的质量设置重新编码您的图像。每个社交平台都会这样做。您可以't停止它,但您可以减少它:上传到接近平台's的目标维度,因此它尽可能少地做工作,并递给它一个文件's已经干净了,而不是它必须修复的一个。

当您调整图像大小时实际会发生什么?

值得理解,因为它解释了大部分惊喜。

光栅图像是像素网格,使该网格变小意味着决定什么是 a 新 pixel应该是坐在几个旧的中间,那个决定叫 重新采样,并且算法很重要:

最近的邻居- 抓住最接近的原始像素。快速、块状、锯齿状的边缘。仅对像素艺术正确,其中块性是重点。
双线性- 平均四个最近的像素。光滑,有点柔软。
双立方-用立方曲线称重十六个周围像素。比双线性更清晰;大多数桌面软件中的合理默认值。
兰佐斯- 较大街区的窗式 Sinc 滤波器。降尺度最佳的质量,最慢,可以在高对比度边缘产生微弱的振铃。

Browser 画布大小调整位于双线性到双三次范围内,并且不't 让您精确选择 - 您只能要求平滑质量,而 HTML 规范's 默认的该提示是 "low"。that's 很好绝大多数的网络工作和它's为什么工具z。dev工具感觉即时。

有一种权力用户技巧值得了解。当您一步大幅缩减 - 说 4000px 降至 400px,减少 10× - 一些浏览器实现样本太稀疏,您会得到混叠:闪烁的边缘、织物或砖砌的摩尔纹图案以及失去精细细节。解决方法是 逐步缩小规模:反复减半(4000 → 2000 → 1000 → 500 → 400),因此每一步只会丢弃一半的像素。如果大幅减少比您预期的更脆,那么'的原因,并且分两次进行会修复它。

Toolz。dev 调整工具大小实际上是做什么的?

I'宁愿准确地告诉你,也不愿你以后发现。It's 基于画布的调整大小器:

您的文件通过对象 URL 读入浏览器。它是 从未上传过-那里's没有服务器上传到。
It's绘制到目标维度的HTML画布上。
画布被重新编码为 PNG、JPEG 或网络P (有损格式的质量默认为 0.9)。
您下载结果。

3个后果由此而来,其中只有一个在大多数工具'营销文案:

EXIF 元数据被剥离。 Canvas重新编码产生一个全新的文件。相机模型,镜头,捕捉时间,以及- 重要的是- GPS 坐标 do not survive。you're发布的任何东西,that's一个隐私功能,和一个真实的功能:直接从手机上的照片例行携带他们被拍摄的确切坐标,如果你需要 EXIF(对于摄影作品集,比如说),使用一个明确保存它的工具调整大小,如果源直接从相机卷上取下来,请在发布之前查看输出方向。

动画 GIF 作为单帧出现。 Canvas画一帧,没有什么诚实的方式可以形容这只是一个限制- 如果你需要调整动画大小并保持它移动,这不是工具(I'宁愿说得很清楚,也不愿让你下载后发现它。)

锁定纵横比意味着"适合内部",而不是"伸展以填充"。 如果您输入比率已锁定的宽度和高度,则图像会按比例缩放以适合在内 that box while keeping its programme。So 16:9 照片与一个 1000×1000 目标出来 1000×563,而不是 1000×1000。它永远不会扭曲你的图像 - 但它也赢了't 裁剪它来填充正方形。如果你需要一个精确的正方形从矩形, 你需要一个裁剪, 而不是一个大小。那个区别不断地混淆了人们和它's 值得精确的关于。

纵横比实际上如何发挥作用?

A纵横比就是宽÷高,表示成一对,数学简单,脑袋里应该可以做,因为它防止了最常见的大小错误: 压扁。

要找到缺失的一面,请保持比率恒定:

new_height = new_width × (original_height ÷ original_width)

4000×3000的照片(4:3)大小为1200宽变成1200×(3000/4000)= 900 tigh。type 1200和800代替,而你've将一个4:3的图像压扁成3:2-脸变窄,圆圈变成椭圆形,每个人都可以说出一些东西's off即使他们可以't说什么纵横比计算器为您这样做并降低比例。

以下是不断得出的比率,检查数学而不是复制数学:

比率	十进制	典型用途	示例大小
1:1	1.000	方形帖子、个人资料图像、徽标	1080×1080×快播电影大全, 苍井空电影大全1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1080×1
4:5	0.800	肖像社交帖子(提要中的最大垂直空间)	1080×1350×快播电影大全, 苍井空电影大全1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1080×1350×1350×1080×1350×1350×1350×1350×1
9:16	0.563	故事、卷轴、短片、TikTok - 全屏垂直	1080×1920×快播电影大全, 苍井空电影大全1080×1920×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1980×1920×1980×1920×1980×1920×1980×1920×1980×1920×1980×1920×1920×1
16:9	1.778	视频缩略图、宽屏英雄图像、幻灯片	1280×720×快播电影大全, 苍井空电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造
~1.91:1	1.911	链接预览卡(OpenGraph 形状)	1200×628×快播电影大全, 苍井空电影大全000×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×628×1200×6
3:1	3.000	宽型横幅	1500×500×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造
4:1	4.000	超宽个人资料横幅	1584×396×快播电影大全, 苍井空电影大全884×396

That "1.91:1"行上的一条诚实的笔记,因为它每次都困扰着我:1200×628实际上不是1.91:1。适当减少它's 300:157,或1.911。行业绕过它,每个人都耸耸肩它没有't在实践中很重要-但是如果你'曾经想过为什么1200×628没有't分成任何干净的东西,那个's为什么。

平台像素规格发生变化;比率几乎永远不会发生变化。 Blog post(包括这个)中的一张维度表,而不是相信一个重要的战役,检查平台's自己的当前规格,然后使用上面的比率来命中它。即使数字漂移,形状也是稳定的。

网络图像实际上应该有多大?

对于您控制的网站 - 您'优化最大内容涂料而不是其他人'上传者 - 推理是不同的并且更好。

CSS框开始,而不是从图像开始。 查找图像在布局中实际渲染的宽度。不是容器's max width - the 图片's width,在你关心的断点。然后双倍它视网膜。that's你的导出大小。超出那一切都是字节你're支付发货和用户支付下载,为零可见利益。

服务于一种以上尺寸。 2400px的单个文件对于将以380 CSS像素渲染的手机来说是浪费的。 srcset 正是为此而存在的:

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200" height="675"
  alt="..."
/>

浏览器选择在该设备上仍然看起来很清晰的最小文件。并始终设置 width 並 height 属性 - 它们让浏览器在图像加载之前保留空间,这可以阻止页面跳转并破坏您的累积布局移位分数。

首先调整大小,然后压缩。 这是人们倒退的顺序。压缩 4000px 图像然后将其调整为 800px 意味着您花费了精力优化即将丢弃的像素 - 您可能会将压缩伪影烘烤到您保留的像素中。首先剪切尺寸,然后压缩剩下的 's 图像压缩器.无论如何,维度几乎总是更大的胜利:将图像的两面减半会删除 75% 在压缩机触摸它之前它的像素。我更深入地探讨了图像压缩指南。

然后选择正确的格式。 粗略地说:照片的 JPEG、需要透明度或清晰的文本和线条时的 PNG、网络上基本所有内容的 WebP,因为它以同等的质量击败两者。图像格式转换器处理该步骤,并且图像工具概述涵盖各个部件如何组合在一起。

如何调整 Toolz。dev 上图像的大小?

打开图像调整工具大小。 没有帐户,没有什么可安装的。
将您的图像放入。 它直接加载到浏览器中。如果您不想提供任何证据,请观看网络选项卡's被发送到任何地方 - that's值得在您粘贴私人照片的任何图像工具上运行的支票。
输入您的目标尺寸。 Type宽度;在锁定比率的情况下,高度随之而来,如果这是屏幕,请记住双倍视网膜。
选择您的输出格式- PNG、JPEG 或 WebP。
下载。 在您的浏览器中生成,直接发送到您的磁盘。

如果您'重新以多种尺寸生成相同的图像,每次都从最大的原始数据进行工作。 Don't 将 1200px 导出调整为 600px - 返回到原始数据并从中导出 600。对已经丢失的文件进行每次重新编码都会使损坏更加复杂,就像复印件的复印件降级一样。它's 是最终结果中出现的一个小学科。

常见问题

我可以在不损失质量的情况下调整图像大小吗?

Downscaling 几乎失去任何可感知的东西 - you're 丢弃你不再需要的像素数据,屏幕上的结果看起来很尖锐 Upscaling 总是失去质量,因为软件必须插值从未捕获的像素,产生柔软度或可见伪影。总是从你拥有的最大原始版本缩小大小,而不是从小原始版本向上。

我应该导出多少尺寸的视网膜屏幕图像?

2× 导出图像显示的大小,如果您的布局在 600×400 框中渲染图像,则以 1200×800 导出,因此它在带有 a 的设备上保持清晰 devicePixelRatio 的 2。超过 2× 很少值得额外的字节,因为即使在 3× 显示器上,可见的好处也是最小的。

调整图像大小是否会删除 EXIF 数据?

是的,当通过 HTML 画布调整大小时 - 正如在 toolz。dev 上所做的那样 - 该工具会将图像重新编码为新文件,并且 EXIF 元数据不会延续。这意味着相机详细信息、捕获时间和 GPS 坐标都被剥离。对于发布,这是一项隐私福利;如果您需要保存 EXIF,请使用明确支持的工具。

我可以调整动画 GIF 的大小并保留动画吗?

Based resizer 的情况下没有。Canvas 捕获单个帧,因此输出是 PNG、JPEG 或 WebP 格式的静态图像。在保留所有帧的同时调整动画大小需要专用的 GIF 处理工具。

如何将图像调整为 KB 中的特定文件大小?

File size不是你直接设置的- 它会脱离尺寸、格式和压缩质量。向后工作:将尺寸缩小到图像实际显示的位置,导出为WebP或JPEG而不是PNG用于照片,然后向下步进质量并重新检查输出大小。击中像"100 KB"以下的硬目标通常是该循环的两到三遍,而不是一遍。

如何调整图像大小而不裁剪它?

Keep the aspant ratio locked 当宽度和高度保持原来的比例时,帧的每个像素都被保留下来,只有比例发生变化只有当目标形状与源形状不同时,裁剪才变得不可避免 - 将一张 3:2 的照片装入 1:1 的头像插槽中,意味着要么信箱空白,要么将部分图像剪掉。

我应该首先调整图像大小或压缩图像吗?

先调整大小,然后压缩。缩小尺寸会彻底消除像素 - 将宽度和高度减半,从而消除其中 75% 的像素 - 这几乎总是比单独压缩更大的文件大小的胜利。在调整大小之前压缩会浪费精力在您即将丢弃的像素上,并且可以将工件烘烤成您保留的。

调整大小和裁剪有什么区别?

Resizing 改变整个图像的尺寸,保留其所有内容裁剪会剪掉图像的一部分以更改其取景或长宽比如果您需要从矩形照片中取出正方形,则锁定长宽比的调整将适合正方形内部的图像而不是填充它 - 您需要裁剪来填充框架。

浏览器中调整图像大小是否有文件大小限制?

没有服务器施加的限制,因为上传的任何内容都不是 - 实用的天花板是您的设备's可用内存。典型的照片,包括大型相机文件,可以立即调整大小。极大的图像(例如,非常高分辨率的扫描)可能需要片刻时间,或者在内存受限的手机上,无法加载。

为什么我的图像在调整到正确的尺寸后仍然看起来模糊?

3件事依次检查:是否从较小的原始(无法修复 - 找到更大的来源)放大,是否占用设备像素比(2×屏幕上的600px文件需要1200px),以及您上传的平台是否在之后重新压缩图像,第三种在社交媒体上很常见,最好通过在平台上传来缓解's推荐尺寸。

Frequently Asked Questions

Downscaling loses almost nothing perceptible — you're discarding pixel data you no longer need, and the result on screen looks sharp. Upscaling always loses quality, because the software has to interpolate pixels that were never captured, producing softness or visible artifacts. Always resize down from the largest original you have rather than up from a small one.