聊聊網頁中的圖片

Vultr 發布于2019-08-01 14:54 / 2142人閱讀

摘要：使用的場景多為頁面內容的圖片，較大的頭圖，顏色過多的圖片。就是頁面中的背景，并不是內容，修飾作用。

warn: 這是一篇沒有一張圖片的講圖片的文章

1. 圖片格式

通常在網頁中使用的圖片有三種格式，jpg，png和gif。
jpg是有損壓縮格式，就算你在ps里用100%質量保存，保存多次會產生質量損失，而png和gif則不會。因此如果開發者相對圖片進行微處理，改動jpg不是明智的選擇。
png支持透明和半透明，png8不保存alpha半透明通道，而png24可以。但是png24的半透明在IE6下存在兼容性問題，所有半透明的部分會被展現為不透明底色。
gif可以保存動畫，gif也支持透明，而且兼容性很好，支持IE6，但它和png8一樣，透明的邊緣由于沒有虛化，會有比較難看的鋸齒。
另外一個比較炫酷的技術是base64圖片，就是用base64編碼方式對圖片進行編碼，然后在css的background里載入，如下：

background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

其中data表明用數據的方式加載背景圖，img/gif是圖片格式，base64是編碼格式，最后是編碼本身。
base64并沒有想象中的那么優雅，你隨便拿一張圖片轉成base64會大的驚人，從體積上來講也要大于一般圖片，而且容易阻塞頁面，圖片不易修改和查看，兼容性還不好（IE7以下）。
關于base64的利弊查看這里：
base64利弊

2. 圖片大小

jpg作為位圖，對于復雜顏色和復雜結構的圖片有很好的壓縮，類似照片或卡通形象，jpg保存下來要比png和gif硬盤容量小很多。但如果是簡單圖形顏色較少，png的表現更好。基于現在頁面設計越來越扁平，越來越簡潔，所以png使用的比例越來越高，像按鈕，小組件這類的基本都由png來保存，一個顏色少，二個質量無存，三個支持透明。jpg使用的場景多為頁面內容的圖片，較大的頭圖，顏色過多的圖片。
我個人的經驗是，頁面中的一些大圖盡量控制在100k左右，通過ps保存jpg的質量來控制，不到100k的可以提高質量，大于100K的適當降低質量。

3. 圖片的載入方式

大家都知道，一個是html里的img標簽，另外一個是css的background，當然canvas也可以加載圖片，而且可以控制每個像素點的屬性,但是沒有人會為了在頁面中放一張圖片使用canvas。
img標簽的圖片可以縮放，所以可以做一些自適應效果，比如一個全屏的背景自適應效果，可以通過在底層絕對定位一張img，縮放的時候改變它的尺寸來實現。
background的優勢更多比如可以使用sprit，可以重復背景，控制展現位置，但是它不能縮放圖片，除了使用css3的background-size。
當然了，使用img和background也要從語義角度去考量，img里的圖片就是作為html內容的圖片，也有利于SEO。background就是頁面中的背景，并不是內容，修飾作用。
img標簽有一個坑，就是空的src標簽，這樣：

瀏覽器會把空的src當做頁面本身，頁面中所有的資源會被重新加在一起。

4 background和sprit

作為全局樣式的圖片，還是有必要放在sprit里的。保存sprit有不少工具，也可以自己手動處理，手動處理的靈活性高一些，可以在做的過程中調整圖片的位置。
曾幾何時我喜歡把sprit做的很極致，中間不留一個像素的縫隙，后來發現這種做法其實沒什么必要，節省這點有可能讓圖片調整變的很麻煩。
前期盡量做好規劃，html結構，css repeat，都會對sprit圖產生比較大的影響。排布好的sprit圖可以簡化html結構。
background-color屬性可以透過png透明的位置，我們可以利用這個做一些簡化，比如按鈕上的icon做成透明的png，這樣改變background-color就可以實現不同的按鈕，而只使用了一張圖片。
background-repeat 可以做無縫貼圖，這個很有意思，類似馬賽克，或者瓷磚。一些看起來很炫酷的背景，一些噪點之類，你去看其實只是一張3*3像素的循環之類。

GPU云服務器云服務器 html網頁中的網頁網頁中的js 網頁中的虛線調用網頁中的函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49647.html

聊聊網頁中的圖片

摘要：使用的場景多為頁面內容的圖片，較大的頭圖，顏色過多的圖片。就是頁面中的背景，并不是內容，修飾作用。 warn: 這是一篇沒有一張圖片的講圖片的文章 1. 圖片格式通常在網頁中使用的圖片有三種格式，jpg，png和gif。jpg是有損壓縮格式，就算你在ps里用100%質量保存，保存多次會產生質量損失，而png和gif則不會。因此如果開發者相對圖片進行微處理，改動jpg不是明智的選擇。p...

Meathill 2019-08-28 18:18 評論0 收藏0
JS 一定要放在 Body 的最底部么？聊聊瀏覽器的渲染機制

摘要：所以，拋開這些歧義和陷阱，我的問題變成了標簽的位置會影響首屏時間么然而答案并不是那么顯而易見，這得從瀏覽器的渲染機制說起。說明：本文提到的瀏覽器均是指Chrome。 script標簽指的都是普通的不帶其他屬性的外聯javascript。 web性能優化的手段并不是非黑即白的，有些手段過頭了反而降低性能，所以在討論條件和結論的時候，雖然很多條件本身會帶來其他細微的負面或正面影響，為...

VincentFF 2019-08-19 17:22 評論0 收藏0
不得不聊聊的react--入門篇

摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類的第一個字母必須大寫，否則會報錯。組件并不是真實的節點，而是存在于內存之中的一種數據結構，叫做虛擬。此外，還提供兩種特殊狀態的處理函數。不會隨著時間改變可能不是。本文為學習筆記，適合入門的童鞋，如有錯誤，請多多指教。一、react誕生 Web app的性能瓶頸，主要有以下原因。（1）Web基于DOM，而DOM很慢。瀏覽器打開網頁時，需要...

lidashuang 2019-08-19 18:04 評論0 收藏0
[聊一聊系列]聊一聊前端速度統計(性能統計)那些事兒

摘要：性能統計有助于幫我們檢測網站的用戶體驗。這樣，我們就輕輕松松的統計到了首屏時間。下一章，我們將繼續聊聊百度移動版首頁那些事。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）： https://segmentfault.com/blog/frontenddriver 上一篇文章我們討論了，如何進行前端日志打點統計： https://segm...

gclove 2019-08-19 18:41 評論0 收藏0