先說結論
開啟圖片縮放,把圖丟進去,只打一個數字,一般是寬度,另一個留空。高度按畫面本身的比例跟著走,而這幾乎總是你要的:「寬 1920」的意思就是「寬 1920,高該多少是多少」。
下面講的都是一個數字不夠用的情況:人家給了你一個兩邊都定死的框、圖片必須變大,或者一整個資料夾的檔案得出來一個樣。
縮小安全,放大不安全
這不是同一個操作的兩個方向,為什麼不是,值得說清楚。
把圖變小是在扔資訊,而且是唯一無害的那種扔法:進去的畫素比出來的多,所以結果裡每一個畫素都由真實測到的細節平均而來。縮得好的小圖,往往比原圖在同樣大小下看起來更好,因為平均把雜訊抹掉了。這裡沒有任何東西是編出來的。
把圖變大就非編不可了。那些細節不是檔案裡沒存,是當初根本沒拍到。放大器唯一能做的,是拿鄰居猜出中間的畫素,而兩個已知值之間的猜測就是一條平滑的斜坡,所以放大的照片看起來發糊,不會更銳利。它是同一張圖的一份更大的副本,不是一份更細的。
所以這裡的工具預設開著「絕不把圖片放大」。你要是真需要那個畫素數,印刷廠要求最小尺寸、模板不收低於某個寬度的圖,那就把它關掉,但心裡得清楚:你買到的是畫素,不是細節。
那些看起來真能補出細節的機器學習放大器,完全是另一回事:它們是按「圖片通常長什麼樣」的模型,編出一層看起來合理的紋理。做桌布沒問題。可要是一張人像、一份檔案,或者任何會有人據此下判斷的東西,你得明白那些多出來的細節是虛構的。
說清楚尺寸的三種辦法
多數工具,包括這一個,都接受這三種,各有各的用武之地。
- 精確畫素。人家指定了數字就用它:頭像必須 400×400,橫幅必須寬 1500。除非兩邊都給了你,否則只填一邊,另一邊讓它自己跟。
- 百分比。你只想整體等比小一圈、並不在乎具體數字時用它,比如一批要放進文件的照片,「縮一半」。
- 長邊。三種裡對混雜的一批最好用。「最長邊 1600」讓每張圖,不管橫的直的,都能放進一個 1600 畫素的方框裡,而實際生活中所謂「把這些都弄成合適大小」,說的一般就是這個意思。
框的比例跟畫面對不上的時候
縮放真正見分曉的就在這裡。寬和高你都給了,又跟畫面本身的比例對不上,那就總得有一樣讓步,而能讓的一共就四種:
- 整張放進框裡。畫面全留住,某一個方向上比框小一截。什麼都沒丟,也沒變形,只是你要的那個精確尺寸沒拿到。絕大多數情況下,這該是預設選項。
- 鋪滿框,溢位的裁掉。尺寸精確到你要的那個數,畫面掛在框外的部分沒了。縮圖、頭像、封面這類形狀定死、主體又在中間的,用它對;要緊的東西靠邊站的,用它就錯。
- 墊起來。畫面全留住,居中放,剩下的地方用你挑的顏色填上。系統要求尺寸精確、而畫面一點都不能少時用這個,商品圖經常是這麼辦的。
- 拉伸。把畫面擠扁或者拽長以塞進框裡。除非你就是故意要這個效果,否則它從來不是你想要的,而且是這四種裡所有人一眼就看得出不對勁的那一種。
要是你發現自己伸手去點拉伸,那你多半想要的其實是裁切。
裁切是另一件事,而且往往才是對的那件
縮放改的是用多少畫素來描述整張畫面。裁切改的是你留下畫面裡的哪一塊。心裡想的是後者、手上卻去動前者的人,多得出乎意料,而「這張得是方的」從頭到尾是個裁切問題,不是縮放問題。
順序也照這個來:先裁出你要的取景,再把結果縮到你要的尺寸。反過來,就等於在一張已經丟過畫素的圖上挑構圖。
這裡的工具把兩件事放在一趟裡做,正是這個道理:拉個框,需要固定比例就鎖一個形狀,然後說結果要多大。放在一趟裡做還有個好處,畫面只被編碼一次,為什麼這要緊,下一節說。
整批裁切
在一張圖上畫的框,套到其餘圖上時,用的是同樣的相對區域,也就是各自寬高的同樣比例。一批本來尺寸就一致的截圖或者匯出圖,那就是完全相同的一個矩形。一批尺寸混雜的,那就是同樣的取景而不是同樣的矩形,這通常正合你意,但拿它去處理五十個檔案之前,值得先知道。
重新編碼的代價,以及怎麼讓它只發生一次
縮放一張 JPEG 或者 WebP,等於把它解碼、把畫素縮放、再編碼回去,而最後這一步是有損的。掉畫質的不是縮放本身,是那次重新編碼。
由此有兩點。第一,出口那個品質設定很要緊:照片放在 80 到 85 上下就已經看不出來了,檔案卻比 100 小得多。第二,只做一次。一張已經縮過兩次的圖再縮一次,就是三代有損編碼疊在一起,那是看得出來的。
PNG 沒有這筆代價,因為它是無損的,縮放後的 PNG 就是縮放後的那些畫素。你要是中間還有好幾步、最終格式又沒定,那中途用 PNG 運作,可以避免代際累積。
這裡的工具有個細節值得知道:一個你其實壓根沒改動的檔案,會被逐位元組原樣還給你,不重新編碼。對一批圖要求「最長邊 1600」,那些本來就不到 1600 的會原樣出來,標籤一個不少。一個悄悄把它們重編一遍的工具,等於在沒人要求它動的檔案上白白扣掉你的畫質。
透明,以及它的下場
PNG 和 WebP 能存透明。JPEG 不能,這個格式裡壓根沒有 alpha 通道。所以把一張帶透明的圖存成 JPEG,就必須在它後面墊點什麼,而墊的是一塊純色。
多數工具用白色,也不跟你說一聲。這沒什麼問題,直到你的 logo 落在一個深色頁面上,外面套著一個白框。要麼自己有意識地挑這個顏色,要麼存成 PNG 或者 WebP,把透明留住。墊成固定尺寸時用的也是這個顏色,那是人們意外撞見這件事的另一個場合。
人家給了你一個數字,該用哪個工具
別人扔給你的數字有兩種,需要的工具也不同。
「寬 1200 畫素」是尺寸問題。該用圖片縮放:你說要多少畫素,它就給你多少。
「不能超過 500 KB」是檔案大小問題,而縮尺寸只是解決它的辦法之一。圖片壓縮會去找剛好塞進目標的最高畫質,只有畫質單獨夠不到時才動尺寸,這一下的代價,它那篇指南裡講了。
這些事一樣都不用上傳
解碼一張圖、縮放它、再編碼回去,瀏覽器早就做得到很多年了,網頁把一張圖畫成另一個尺寸,用的就是同一套東西。你的照片要變小,技術上根本沒理由跑一趟伺服器再回來,而這裡的工具也確實哪裡都不發:頁面的 Content-Security-Policy 把它可能聯的地址全列了出來,沒有一個是本站的。
與其聽我們說,不如把頁面開啟,拔掉網線,照縮一張試試。把檔案傳給線上轉換器安全嗎?裡還有另外三個檢查,用在任何工具上都管用。