PS將圖片存儲為WEB所用格式的方法介紹
發(fā)布時間:2014-01-02 08:49:09 作者:佚名
我要評論

當需要把圖片存儲為網頁所用格式時,為了確保圖片無卡頓地清晰顯現,考慮它的品質和大小總是很必要的
當需要把圖片存儲為網頁所用格式時,為了確保圖片無卡頓地清晰顯現,考慮它的品質和大小總是很必要的。這個教程就會教給你關于“存儲為web所用格式”你需要知道的知識。
存儲為web所用格式
互聯網幾乎是當今最大的藝術、圖形和相片分享平臺之一,因此掌握一些保存為網頁格式的基礎知識就非常重要了。實際上,保存為網頁格式是一項平衡藝術——你必須在圖片品質和介質的文件尺寸之間做好平衡,以便滿足你的個人需求。
在速度相對重要的地方(如迅速地加載網站),你可能需要犧牲一些圖片品質。而在品質重要的地方,則需要犧牲一點速度。這堂課程的目的就是向你介紹一些方法,在這兩個因素之間尋求平衡,與此同時保留非常好的圖像品質。
無損 vs 損耗數據
雖然存在有非常多的圖片格式(僅舉幾例,如jpeg,gif和png),但是依據壓縮方法不同,所有的圖片都能進一步歸類為兩大類別:無損和有損。無損數據壓縮保證了圖像在沒有任何品質和信息丟失的情況下重現,而有損數據壓縮的結果就是可能造成品質和信息的丟失。在平面設計領域最主流的無損媒介格式包括GIF,PNG,以及TIFF,而JPEG是最主流的有損壓縮的圖形格式。
如何用PHOTOSHOP保存網頁格式
PS擁有非常好的方法來為網頁優(yōu)化圖片。在ps中,選擇文件>存儲為web格式或者使用快捷鍵ctrl+alt+shift+s。一個新的對話框將會彈出,這里有所有為網頁保存和優(yōu)化圖片的設置。

我會通過以下一些生活中的案例來演示如何使用對話框中的設置。
為網頁存儲圖像
由于圖片巨大的文件體積,它們更多是以有損壓縮格式來保存的。甚至在拍照時,相對于數倍大小的RAW格式,相機也傾向于用有損格式(如JPEG)來保存圖片。
JPEG是日常中首選的圖片格式,它是以它的創(chuàng)造者“聯合圖像專家小組”來命名的。Jpeg之所以能夠成為標準,是因為它在壓縮圖像數據的同時可以保留高品質,并且在相關信息上能夠接近無損圖像的效果。
當你在保存圖片的時候,有幾種網頁格式預設可供選擇。對于一張圖片,你應該考慮是使用JPEG 低、JPEG 中,還是JPEG高。觀察下面的對比圖,(可以)發(fā)現案例中的圖片經過壓縮后并沒有多大的品質損耗。相比起超過250KB的源文件,我們選擇中等質量或者高等質量的壓縮預設就能夠得到一個大小不超過30KB,并有合適品質的圖片。

GIF圖像
有些時候,你會被要求用無損格式來保存,以便最好地優(yōu)化你正在創(chuàng)作的任何作品。這在網頁設計中時常遇到,在布局上使用比普通圖片更少的顏色。
GIF,全稱為“圖像互換格式”,是一種只用到256個顏色調色板的圖片格式,這讓它成為不需要使用太廣泛色域的網頁圖片的理想選擇。GIF也能將單個像素設置成透明,不過這并不在這個教程的討論范圍之內。下面展示了一張(使用著256個顏色的)GIF圖像和JPEG圖像的對比照,它們擁有同樣的大小.正如你所見到的,無損GIF圖片能更好的接近源文件。

因為GIF圖像受到256色的限制,它本應該極少被用到圖片中,但是他們恰好適合那些使用純色或是有限色彩的圖像。對于圖片來說,通常來說不是使用JPEG有損壓縮,就是GIF無損格式。
高品質圖像和無損PNG
PNG,全稱為“可移植網絡圖形”,是一種類似于GIF的無損格式,只是它支持更為豐富的色彩(有時候也讓它的體積變大),而且可以支持帶透明圖層的Alpha通道,而非單一透明像素。
PNG圖像正在日漸取代GIF,主要是因為在支持更豐富的色彩方面,png通常比gif的壓縮效果要更好。雖然它還不想GIF有廣泛的支持,但是無疑它正朝著那個方向前進。
當圖片必須保留完整品質在網絡上進行傳輸的時候,PNG是最佳的選擇。比起用JPEG傳輸圖片,(PNG)會令你得出更大的圖片大小,但是有時候這是一個非常有必要的犧牲。當一個圖片包含銳利的線條、以及必須保留清晰的文字時,PNG通常是一個更好的選擇,當然了,最終還是要由設計師來決定使用哪一種格式。
存儲為web所用格式
互聯網幾乎是當今最大的藝術、圖形和相片分享平臺之一,因此掌握一些保存為網頁格式的基礎知識就非常重要了。實際上,保存為網頁格式是一項平衡藝術——你必須在圖片品質和介質的文件尺寸之間做好平衡,以便滿足你的個人需求。
在速度相對重要的地方(如迅速地加載網站),你可能需要犧牲一些圖片品質。而在品質重要的地方,則需要犧牲一點速度。這堂課程的目的就是向你介紹一些方法,在這兩個因素之間尋求平衡,與此同時保留非常好的圖像品質。
無損 vs 損耗數據
雖然存在有非常多的圖片格式(僅舉幾例,如jpeg,gif和png),但是依據壓縮方法不同,所有的圖片都能進一步歸類為兩大類別:無損和有損。無損數據壓縮保證了圖像在沒有任何品質和信息丟失的情況下重現,而有損數據壓縮的結果就是可能造成品質和信息的丟失。在平面設計領域最主流的無損媒介格式包括GIF,PNG,以及TIFF,而JPEG是最主流的有損壓縮的圖形格式。
如何用PHOTOSHOP保存網頁格式
PS擁有非常好的方法來為網頁優(yōu)化圖片。在ps中,選擇文件>存儲為web格式或者使用快捷鍵ctrl+alt+shift+s。一個新的對話框將會彈出,這里有所有為網頁保存和優(yōu)化圖片的設置。

為網頁存儲圖像
由于圖片巨大的文件體積,它們更多是以有損壓縮格式來保存的。甚至在拍照時,相對于數倍大小的RAW格式,相機也傾向于用有損格式(如JPEG)來保存圖片。
JPEG是日常中首選的圖片格式,它是以它的創(chuàng)造者“聯合圖像專家小組”來命名的。Jpeg之所以能夠成為標準,是因為它在壓縮圖像數據的同時可以保留高品質,并且在相關信息上能夠接近無損圖像的效果。
當你在保存圖片的時候,有幾種網頁格式預設可供選擇。對于一張圖片,你應該考慮是使用JPEG 低、JPEG 中,還是JPEG高。觀察下面的對比圖,(可以)發(fā)現案例中的圖片經過壓縮后并沒有多大的品質損耗。相比起超過250KB的源文件,我們選擇中等質量或者高等質量的壓縮預設就能夠得到一個大小不超過30KB,并有合適品質的圖片。

有些時候,你會被要求用無損格式來保存,以便最好地優(yōu)化你正在創(chuàng)作的任何作品。這在網頁設計中時常遇到,在布局上使用比普通圖片更少的顏色。
GIF,全稱為“圖像互換格式”,是一種只用到256個顏色調色板的圖片格式,這讓它成為不需要使用太廣泛色域的網頁圖片的理想選擇。GIF也能將單個像素設置成透明,不過這并不在這個教程的討論范圍之內。下面展示了一張(使用著256個顏色的)GIF圖像和JPEG圖像的對比照,它們擁有同樣的大小.正如你所見到的,無損GIF圖片能更好的接近源文件。

高品質圖像和無損PNG
PNG,全稱為“可移植網絡圖形”,是一種類似于GIF的無損格式,只是它支持更為豐富的色彩(有時候也讓它的體積變大),而且可以支持帶透明圖層的Alpha通道,而非單一透明像素。
PNG圖像正在日漸取代GIF,主要是因為在支持更豐富的色彩方面,png通常比gif的壓縮效果要更好。雖然它還不想GIF有廣泛的支持,但是無疑它正朝著那個方向前進。
當圖片必須保留完整品質在網絡上進行傳輸的時候,PNG是最佳的選擇。比起用JPEG傳輸圖片,(PNG)會令你得出更大的圖片大小,但是有時候這是一個非常有必要的犧牲。當一個圖片包含銳利的線條、以及必須保留清晰的文字時,PNG通常是一個更好的選擇,當然了,最終還是要由設計師來決定使用哪一種格式。
相關文章
psd文件用什么打開? 沒有Photoshop的情況下打開psd文件的四種方法
收到了psd文件,但是電腦沒有安裝ps,該怎么解決這個問題呢?下面我們就來看看這個問題的解決辦法2024-12-24ps一直閃退是什么原因? Photoshop閃退原因及解決方案
在使用過程中,Photoshop總是會無緣無故地自動退出,這不僅打斷了工作流程,還可能導致未保存的更改丟失,令人頭疼不已,本文將深入剖析Photoshop自動退出的原因,并提供相2024-07-04怎么優(yōu)化PSD文件? 有效防止Photoshop崩潰卡死的技巧奧
明就幾個圖層,并沒有引入什么大型圖片,但是 PSD 文件卻異常巨大,而且用起來經??D?下面我們就來看看pds文件優(yōu)化方法2024-05-25- 將多個圖層合并為一個圖層,但作為設計師你需要了解一下合并圖層是有破壞性的,下面我們就來詳細介紹一下2024-05-25
- 通常是因為Photoshop使用的暫存盤空間不足,導致無法正常工作,那么,如何解決這一問題呢?本文將為您提供詳細的解決方案2024-05-25
PS存儲和存儲為有什么區(qū)別? 理解存儲與存儲為的重要性
ps導出文件的時候,可以直接存儲,也可以另存存儲為,這兩個操作有區(qū)別嗎?新手該怎么保存文件呢?詳細請看下文介紹2024-03-28ps beta ai顯示高峰需求進不去怎么辦? psai高峰期需求用不了解決辦法
PSBetaAI2023加入了AI的功能,在使用過程中,有時會遇到一個令人煩惱的問題,那就是PhotoshopBetaAI提示我們正在面臨高峰需求,請稍候再試,針對這個問題,本文為大家整理2024-03-28ps段落兩端對齊不能用怎么辦? ps文字排版不能對齊的修復技巧
PS進行設計時,段落兩端對齊是一個常用的排版功能,它能讓文本看起來更加整潔和專業(yè),然而,許多用戶在使用PS時可能會遇到一個令人頭疼的問題:段落兩端對齊功能似乎不起作2024-03-09- PS插件是許多人常用的一種工具,有些用戶可能會困惑,不知道應該將PS插件安裝到哪個文件夾,對于這個問題我們需要從多個角度進行分析,以便給出一個準確的答案2024-02-20
ps打開出現dll文件丟失怎么辦 ps提示缺少dll文件的詳細修復方法
打開ps時,系統提示缺少DLL文件,這通常意味著應用程序無法找到它所依賴的DLL文件,可能是因為這些文件已經被刪除、移動或更改了名稱,下面我們就來分享幾種解決辦法2024-02-19