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.

在線調整圖像大小:視網膜陷阱和畫布悄悄丟棄的東西

大約六個月來,這個部落格上的每個縮圖都稍微軟一些。沒有壞。沒有明顯錯誤。只是... 模糊,就像你從眼角注意到然後說服自己不注意到一樣。

佈局顯示縮圖插槽有 600 像素寬。所以我導出了 600 像素寬的縮圖。這完全是錯誤的做法,我花了很長時間才弄清楚原因,因為在我的顯示器上它看起來不錯,在我的手機上它看起來像複印件的複印件。

原因是 CSS 像素不是裝置像素。現代手機或視網膜筆記型電腦的每個 CSS 像素都包含兩個或三個實體像素 - that'什麼 window.devicePixelRatio 報告。因此,我的 600 像素影像被拉伸到 1,200 個物理像素玻璃上,瀏覽器正在發明差異。 您無法在文件中發明 't 的細節。 修復方法是匯出為 1,200,讓 CSS 顯示為 600。

That'這是本指南所圍繞的錯誤,以及其他三到四個錯誤,這些錯誤使調整大小的圖像看起來比應有的更糟。這影像調整大小工具在 toolz。dev 上,您可以在瀏覽器中完成工作 - 文件永遠不會離開您的機器 - 但該工具是簡單的部分。知道要輸入哪些數字才是真正重要的部分。

TL;DR: 導出於 2×顯示尺寸 對於視網膜螢幕(600px 插槽需要 1,200px 檔案),並且永遠不會縮放向上- 您可以't 添加從未捕捉到的細節。鎖定寬高比,除非您真的想扭曲影像。調整大小之前你壓縮,而不是在之後。使用影像調整大小工具設定尺寸, 縱橫比計算器找出缺失的一面,以及影像壓縮器之後縮小檔案大小。一切都運行客戶端。值得預先了解的一個注意事項:調整影像大小重新編碼,所以 所有 EXIF 元資料都被剝離- 非常適合隱私,偶爾令人驚訝。

為什麼調整大小後我的影像看起來模糊?

十分之九'是三件事之一,它們'都是可以修復的。

你擴大了。 將 400×300 張照片放大到 1600×1200 要求軟體為其擁有的每張照片產生 12 像素的資訊。它透過插值(對鄰居進行平均以猜測介於兩者之間的內容)來實現這一點,結果很柔和,因為細節確實不存在。沒有什麼比生成模型更能發明它了。 始終從您擁有的最大的原創作品開始並縮小規模。 下幾乎無損;向上是一個猜測。

您忽略了像素比。 我上面描述的錯誤。如果CSS框是600×400且使用者'螢幕是2×,瀏覽器需要1200×800個真實像素才能清晰呈現。以 2× 匯出並讓瀏覽器縮小 - 瀏覽器中的縮小看起來很棒;升級看起來像泥巴。

在你之後還有什麼東西壓縮了它。 您仔細調整大小,然後上傳到一個平台,該平台按照自己的品質設定重新編碼您的圖像。每個社交平台都會這樣做。你可以'阻止它,但你可以減少它:上傳到平台附近'目標尺寸,使其工作量盡可能少,並遞給它一個文件'已經乾淨了,而不是必須修復的。

調整影像大小時實際上會發生什麼?

值得理解,因為它解釋了大部分驚喜。

光柵影像是像素網格。使該網格變小意味著決定什麼是 a 新的像素應該位於幾個舊像素之間。這個決定被召喚了 重新採樣,演算法很重要:

最近的鄰居- 抓住最近的原始像素。快速、塊狀、鋸齒狀邊緣。僅適用於以塊性為點的像素藝術。
雙線性- 對四個最近的像素進行平均。光滑,有點軟。
雙三次- 用三次曲線稱重周圍十六個像素。比雙線性更尖銳;大多數桌面軟體中的合理預設值。
蘭佐斯- 較大鄰域上的有窗 sinc 濾波器。降尺度最佳品質、最慢品質、可在高對比邊緣產生微弱的振鈴。

瀏覽器畫布調整大小位於雙線性到雙三次範圍內,並且不't 讓您精確選擇 - 您只能要求平滑質量,而 HTML 規範和#39;s 預設為此提示 "low". That'對於絕大多數 Web 工作來說都很好,它's 為什麼 toolz。dev 工具感覺即時。

有一個強大的用戶技巧值得了解。當您一步縮小一個大因素時- 例如4000px 降至400px,減少10× - 某些瀏覽器實現採樣太稀疏,並且您會獲得混疊:閃爍的邊緣、織物或磚砌體的莫瓦雷圖案以及丟失的精細細節。解決方法是 逐步縮小規模:重複減半(4000 → 2000 → 1000 → 500 → 400),因此每一步只會丟棄一半的像素。如果大幅削減的結果比您預期的要脆,那麼#39;這就是原因,分兩次完成就可以解決這個問題。

Toolz。dev Resize 工具的實際作用是什麼?

I'寧願準確地告訴你,也不願稍後再知道。 It'是一個基於畫布的調整大小:

您的檔案會透過物件 URL 讀入瀏覽器。它是 從未上傳過- 那裡'沒有伺服器可以上傳到。
It'繪製在目標維度的 HTML 畫布上。
畫布被重新編碼為 PNG、JPEG 或網路P (有損格式的品質預設為 0.9)。
您下載結果。

由此產生了三個後果,而大多數工具中只有其中一個後果'行銷副本:

EXIF 元資料被剝離。 畫布重新編碼會產生一個全新的檔案。相機型號、鏡頭、拍攝時間,以及 - 重要的是 - GPS 座標 不要生存。對於任何你'重新發布,that's 隱私功能,也是真實的:直接從手機上拍攝的照片通常會帶有拍攝地點的準確座標。如果你需要 EXIF(例如,對於攝影作品集),使用明確保留它的工具調整大小。如果來源直接來自相機膠卷,請在發布之前查看輸出方向。

動畫 GIF 以單幀形式出現。 畫布畫一幀。除了限制之外,沒有誠實的方法可以將其描述為任何其他內容 - 如果您需要調整動畫大小並保持其移動,那麼這不是工具。 (I'寧願直白地說出來,也不願讓你在下載後發現它。)

鎖定縱橫比意味著"適合內部",不是"拉伸填充&報價;。 如果您輸入寬度和高程且比率鎖定,則影像會縮放以適合內那個盒子同時保持它的比例。所以一張 16:9 的照片,目標為 1000×1000,結果是 1000×563,而不是 1000×1000。它永遠不會扭曲你的圖像 - 但它也贏了't裁剪它以填充正方形。如果你需要從矩形中精確地呈現正方形,你需要裁剪而不是調整大小。這種區別經常讓人感到困惑,它'值得精確地了解。

縱橫比實際上如何運作?

長寬比只是寬度 → 高度,表示為一對。數學很簡單,您應該能夠在腦海中完成它,因為它可以防止最常見的調整大小錯誤: 壓扁.

若要找到缺失的一側,請保持比率恆定:

new_height = new_width × (original_height ÷ original_width)

4000×3000 張照片 (4:3) 調整為 1200 寬變為 1200 × (3000/4000) = 900 高。改為 1200 和 800 型,然後你'將 4:3 的圖像壓縮為 3:2 - 面變窄,圓圈變成橢圓形,每個人都可以分辨出一些東西'即使他們可以'說什麼。這縱橫比計算器為您執行此操作並降低您的比率。

以下是不斷出現的比率,檢查而不是複製數學:

比率	小數	典型用途	範例尺寸
1:1	1.000	方形貼文、個人資料圖像、標誌	1080×1080
4:5	0.800	肖像社交貼文(提要中的最大垂直空間)	1080×1350
9:16	0.563	故事、捲軸、短片、TikTok - 全螢幕垂直	1080×1920
16:9	1.778	影片縮圖、寬螢幕英雄影像、幻燈片	1280×720
~1.91:1	1.911	連結預覽卡(OpenGraph 形狀)	1200×628
3:1	3.000	寬輪廓橫幅	1500×500
4:1	4.000	超寬輪廓橫幅	1584×396

關於這一點的一個誠實的說明 "1.91:1"行,因為它每次都會讓我煩惱:1200×628 實際上並不是 1.91:1。正確減少它's 300:157,或 1.911。業界對此進行了四捨五入,每個人都聳聳肩。它不'在實踐中很重要 - 但如果你'曾經想知道為什麼 1200×628 不't 分成任何乾淨的東西,that's 為什麼。

平台像素規格發生變化;比率幾乎永遠不會發生。 不要相信部落格文章(包括這篇文章)中的維度表來進行重要的活動,而是檢查平台'擁有自己的當前規格,然後使用上面的比率來擊中它。即使數字漂移,形狀也是穩定的。

網路影像實際上應該有多大?

對於您控制的網站 - 您在哪裡'正在優化最大的內容繪畫而不是其他人's上傳者 - 推理是不同的並且更好。

從 CSS 框開始,而不是從影像開始。 找出圖像在佈局中實際呈現的寬度。不是容器's 最大寬度 - 圖像's 寬度,在你關心的斷點。然後將其加倍以獲得視網膜。那'是你的出口尺寸。超出此範圍的所有內容都是位元組 you'支付發貨費用,用戶支付下載費用,可見收益為零。

提供不只一種尺寸。 對於以 380 CSS 像素渲染的手機來說,單一 2400px 檔案是浪費。 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 值得在您貼上私人照片的任何圖像工具上運行的檢查。
輸入您的目標尺寸。 輸入寬度;當比率鎖定時,高度如下。如果是螢幕,請記住視網膜加倍。
選擇您的輸出格式- PNG、JPEG 或 WebP。
下載。 在瀏覽器中生成,直接發送到您的磁碟。

如果你'正在以多種尺寸產生相同的圖像,每次都從最大的原始圖像開始工作。 Don'將 1200px 匯出大小調整為 600px - 返回原始檔案並從中匯出 600。每次對已經有損的檔案進行重新編碼都會加劇損壞,就像影印件的影印件會退化一樣。 It'這是最終結果中出現的一個小學科。

常見問題

我可以在不損失品質的情況下調整影像大小嗎?

縮小規模幾乎不會失去任何可察覺的東西 - you'丟棄您不再需要的像素數據,螢幕上的結果看起來很清晰。升級總是會失去質量,因為軟體必須對從未捕獲的像素進行插值,從而產生柔軟度或可見的偽影。始終從最大的原始版本向下調整大小,而不是從小原始版本向上調整大小。

我應該匯出視網膜螢幕影像的尺寸是多少?

以影像顯示大小的 2× 匯出。如果您的佈局在 600×400 框中呈現影像,請以 1200×800 匯出,以便在具有 a 的裝置上保持清晰 devicePixelRatio 2. 超過 2× 很少值得額外的位元組,因為即使在 3× 顯示器上,可見的好處也是最小的。

調整影像大小會刪除 EXIF 資料嗎?

是的,當透過 HTML 畫布進行調整大小時(就像在 toolz。dev 上所做的那樣),該工具會將影像重新編碼到新檔案中,並且 EXIF 元資料不會延續。這意味著相機詳細資訊、擷取時間和 GPS 座標都會被剝離。對於發布,這是一個隱私優勢;如果您需要保留 EXIF,請使用明確支援它的工具。

我可以調整動畫 GIF 的大小並保留動畫嗎?

不使用基於畫布的調整器。 Canvas 擷取單一幀,因此輸出是 PNG、JPEG 或 WebP 格式的靜態影像。調整動畫大小同時保留其所有幀需要專用的 GIF 處理工具。

如何將影像調整為 KB 中的特定檔案大小?

文件大小不是您直接設定的 - 它超出了尺寸、格式和壓縮品質。向後工作:將尺寸減小到影像實際顯示的位置,匯出為 WebP 或 JPEG 而不是 PNG 的照片,然後降低品質並重新檢查輸出大小。擊中像 &quot 這樣的硬目標;低於 100 KB"通常是該循環的兩到三遍,而不是一次。

如何在不裁剪影像的情況下調整影像大小?

保持寬高比鎖定。當寬度和高度保持在原始比例時,幀的每個像素都會被保留,並且只有比例會改變。只有當目標形狀與來源形狀不同時,裁剪才會變得不可避免 - 將 3:2 的照片安裝到 1:1 的頭像槽中意味著將空白空間裝箱或將部分圖像剪掉。

我應該先調整影像大小或壓縮影像嗎?

先調整大小,然後壓縮。縮小尺寸可以徹底去除像素 - 將寬度和高度減半可以消除其中的 75% - 這幾乎總是比單獨壓縮更大的文件大小勝利。在調整大小之前進行壓縮會浪費您要丟棄的像素上的精力,並且可以將偽影烘烤到您保留的像素中。

調整大小和裁剪有什麼區別?

調整大小會改變整個影像的尺寸,保留其所有內容。裁剪會剪掉部分影像以變更其取景或長寬比。如果您需要矩形照片中的正方形,則鎖定長寬比調整大小將使影像適合正方形內部而不是填滿它 - 您需要裁剪來填滿框架。

瀏覽器中的影像大小是否有檔案大小限制?

伺服器沒有施加限制,因為沒有上傳任何內容 - 實際上限是您的裝置'可用記憶體。典型照片,包括大型相機文件,可立即調整大小。極大的影像(例如,非常高解析度的掃描)可能需要片刻,或者在記憶體受限的手機上無法載入。

為什麼調整到正確的尺寸後我的影像仍然看起來模糊?

按順序檢查三件事:您是否從較小的原始版本放大(不可修復 - 找到更大的來源),是否考慮了設備像素比(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.