在網頁設計中，切圖輸出將繪制完成的原始圖稿轉換成網頁用的圖片格式的重要步驟。選擇適合的圖片格式不但可以讓設計得到合理的顯示效果，還可以有效地控制圖形文檔的大小，節省下載時間、有效的減少服務器的負擔。
Photoshop 以及 Illustrator都提供了「儲存為網頁用…」的功能。與普通的存盤模式不同，該功能提供了圖形文件輸出的質量調整、檔案大小控制等針對網頁圖文件需求的選項：
許多人都知道網頁設計中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他們之前的實際差別，何時該選擇何種格式。
JPEG
JPEG 的擴展名為 .JPG。幾乎每臺數字相機、照相手機都可以輸出 JPEG 格式的圖檔。JPEG是一種使用破壞性壓縮（lossy compression）的圖檔格式，雖然圖檔的內容都會遭到破壞，在肉眼辨識下并不明顯，但卻可以有效的降低圖檔的檔案大小。
JPEG 非常適合作為儲存像素色彩豐富的圖片，這些圖片即使有些微的失真也不容易輕易的察覺，反過來JPEG 并不適合用來儲存線條圖，圖標或文字等等有清晰邊緣的圖片。
GIF
Gif 在許多特性與表現上都與 JPEG 有著不同的特性。GIF 使用無損壓縮格式（Lossless Compression），但卻限制了色彩表現能力，能夠有效地節省檔案尺寸。GIF 只擁有 8 位的顏色深度信息，即256 色。當圖片中出現的色彩在 256 色以內時，使用 GIF 可以得到相當好的輸出質量，并兼顧了文檔大小。因此 GIF 非常適合用來表現圖標、 UI接口、線條插畫、文字等部分的輸出。
另外 GIF 同時還支持透明背景以及動畫圖檔格式，幾乎 100％ 的瀏覽器都支持它。
當圖片擁有豐富的色彩時，并且沒有明顯銳利反差的邊緣線條時，選擇 JPEG 可以得到最好的輸出結果，例如照片就是最好的例子：
（左圖：Photoshop 輸出 JPEG 默認值：品質：高，壓縮質量 60％、優化輸出。右圖：Photoshop 輸出 GIF 默認值：256色、擴散性混色）
當圖片是擁有明確邊緣的線條圖，沒有使用太多色彩，或可能需要透明背景時，GIF 是很完美的選擇，文檔小、畫質又精美。
（上圖：Photoshop 輸出 GIF：64色、擴散性混色。下圖：Photoshop 輸出 JPEG 默認值：品質：高，壓縮質量 60％、優化輸出）
PNG
PNG是為了作為 GIF 的替代方案的，作為做新開發的影像傳輸文件格式，PNG 同樣使用了無損壓縮格式。PNG 分為 PNG-8 以及 PNG-24 兩種格式，PNG-8 的特性很接近 GIF，支持 256 色以及透明背景的特性。而 PNG-24 則支持了多達 160 萬個色彩。
雖然 PNG 不支持動畫，但是 PNG-24 支持了Alpha 透明效果，就是使用 PNG 輸出圖檔時，可以有效的支持不同的透明度效果。這張圖片其實是使用了三張 PNG-24 的圖片在網頁中排版出來的效果：
