在網(wǎng)站設(shè)計(jì)中都可以找到很多圖片。但是怎么壓縮卻成為很大的難題，GIF，PNG和JPEG之間的差別是如何的信息被壓縮，并在屏幕上顯示。在網(wǎng)絡(luò)上發(fā)布有很多技巧來(lái)構(gòu)成出色的圖片壓縮軟件，但是許多設(shè)計(jì)師仍然不了解其中的一些基本原理。

本期深圳網(wǎng)站設(shè)計(jì)公司Angle想分享一些有關(guān)正確進(jìn)行JPEG壓縮的方法。你想優(yōu)化圖像以減少網(wǎng)頁(yè)加載時(shí)間，同時(shí)還要保持不錯(cuò)的質(zhì)量。這是在文件大小和屏幕描繪之間找到平衡的全部方法。沒(méi)有完美的解決方案供設(shè)計(jì)師遵循。它需要一些初步的實(shí)踐，但是一旦你了解了圖片壓縮，將來(lái)開發(fā)網(wǎng)站就會(huì)變得更加容易。

1、避免節(jié)省100％
你在網(wǎng)站設(shè)計(jì)中永遠(yuǎn)都不要以100％的質(zhì)量保存JPEG圖片。這將不會(huì)產(chǎn)生最可能的“優(yōu)化”圖像。它實(shí)際上是通過(guò)優(yōu)化限制公式計(jì)算得出的，該公式極大地增加了文件大小。即使與90％或95％的質(zhì)量相比，你也會(huì)看到文件大小顯著下降。大多數(shù)情況下，建議你保存質(zhì)量遠(yuǎn)遠(yuǎn)低于90％的圖像。如果在Photoshop中打開“另存為Web”對(duì)話框，你會(huì)注意到它們提供了可以選擇的預(yù)設(shè)值。

我在下面添加了可能的JPEG值-請(qǐng)注意固有的命名約定。

• 低– 10％
• 中– 30％
• 高– 60％
• 很高– 80％
• 最高– 100％

即使在Adobe Photoshop中，60％的圖像質(zhì)量也被認(rèn)為是“高”的。許多網(wǎng)絡(luò)開發(fā)人員會(huì)提供50％-70％的安全范圍。

2、壓縮選項(xiàng)
首先，我們要弄清“壓縮”和“質(zhì)量”這兩個(gè)詞，它們是相反的。這意味著，如果你以40％的壓縮率保存JPEG，則將獲得60％的質(zhì)量（相比之下，沒(méi)有壓縮的最大質(zhì)量為100％）。這些是最基本的選擇，在保存到網(wǎng)絡(luò)上時(shí)就足夠了。普通用戶不會(huì)進(jìn)行更深入的自定義。在將RGB圖像轉(zhuǎn)換為YCbCr（亮度，色度藍(lán)，色度紅）的過(guò)程中，采樣會(huì)變得更加復(fù)雜。

3、不同的網(wǎng)絡(luò)媒體
網(wǎng)絡(luò)上也充滿了各種圖像媒體。你可以擁有照片、圖標(biāo)、按鈕、徽章和大量其他圖形。但是值得注意的是，比較按鈕和照片之間的質(zhì)量是沒(méi)有意義的。使用照片或詳細(xì)圖像時(shí)，請(qǐng)考慮鏈接到單獨(dú)的壓縮程度較小的JPEG文件。然后，你可以在網(wǎng)站上以更高的壓縮率和更小的文件大小來(lái)設(shè)置縮略圖。唯一的缺點(diǎn)是你需要為媒體庫(kù)提供兩組圖像。請(qǐng)注意你在整個(gè)網(wǎng)站上縫制的許多不同圖形，并分別考慮針對(duì)每個(gè)圖形的優(yōu)化技術(shù)。

4、使用壓縮工具
你可能想要整理易于在網(wǎng)站設(shè)計(jì)上瀏覽的圖像文件。你也可以將他們的照片托管在Amazon S3，Google Cloud Storage之類的Cloud服務(wù)上，或通過(guò)CDN托管，這樣可以更快地傳送圖像。不過(guò)，你仍然需要使用一些壓縮工具來(lái)縮小圖像尺寸。你可以削減每個(gè)文件大小的任何額外字節(jié)都是至關(guān)重要的。

盡管隨著4G和即將推出的5G的出現(xiàn)，現(xiàn)代互聯(lián)網(wǎng)連接速度正在提高，但我們?nèi)孕枰獪p小網(wǎng)頁(yè)的大小。每個(gè)字節(jié)最終都會(huì)給你的用戶帶來(lái)一些財(cái)富，在某些國(guó)家/地區(qū)，這筆費(fèi)用可能非?？捎^。本期深圳網(wǎng)站設(shè)計(jì)公司Angle給大家?guī)?lái)的如何壓縮圖像以減小網(wǎng)頁(yè)上的圖像大小的方法。壓縮圖像以前很棘手，因?yàn)槟阈枰谫|(zhì)量和實(shí)質(zhì)之間找到適當(dāng)?shù)钠胶狻Ｒ矝](méi)有太多可供選擇的工具，但是現(xiàn)在這些選項(xiàng)更加先進(jìn)且易于使用。在圖片壓縮中，亮度或亮度設(shè)置始終保持盡可能高的值。通過(guò)在單獨(dú)的通道上使用此亮度值，可以更輕松地優(yōu)化紅色和藍(lán)色的各個(gè)顏色值。