• <samp id="mz5ne"><acronym id="mz5ne"></acronym></samp>
      <ol id="mz5ne"></ol>
      

    1. <samp id="mz5ne"></samp>
      <mark id="mz5ne"></mark>
        

        <fieldset id="mz5ne"></fieldset>
        

        免费看又黄又无码的网站_久久久高清国产免费观看_亚洲一区二区三区在线免费观看_免费欧洲美女a视频一级毛片_日本最新免费二区三区
        



        

        
  
  
  ×

        

        
  
        
    
        


        
  

  
        
    
  
        

  

        











  
        

        

        





        


        
	

        

		
		
        
			
        

				
				
        
					
        
                    
					
        
					
        
						
        網(wǎng)站圖像優(yōu)化技巧（二）
        
						
          
							
        • 作者：新網(wǎng)
          • 
							
        • 來源：新網(wǎng)
          • 
							
        • 瀏覽：100
          • 
							
        • 2018-02-27 17:40:59
          • 
						
        
						
        另外如果考慮到更全的兼容性問題，還是得回歸到 jpg 和 png 上，常規(guī)的的選擇會用 jpg 作為背景圖，png 作為小塊的圖片，當(dāng)然都需要經(jīng)過壓縮，服務(wù)端可以使用 Gzip ，上傳圖片前還能使用工具進(jìn)行一遍壓縮，比如使用 ps，或者在線壓縮。
        
						
						
         另外如果考慮到更全的兼容性問題，還是得回歸到 jpg 和 png 上，常規(guī)的的選擇會用 jpg 作為背景圖，png 作為小塊的圖片，當(dāng)然都需要經(jīng)過壓縮，服務(wù)端可以使用 Gzip ，上傳圖片前還能使用工具進(jìn)行一遍壓縮，比如使用 ps，或者在線壓縮。
        

        455603.jpg
        
<div>TinyPNG 或者客戶端工具 ImageOptim。
        

         
        

        壓縮可分為有損壓縮和無損壓縮。
        

         
        

        使用有損壓縮處理圖像，是去除某些像素數(shù)據(jù)。
        

         
        

        使用無損壓縮處理圖像，是對像素數(shù)據(jù)進(jìn)行壓縮。
        

         
        

        壓縮的方案可以根據(jù)需求選擇。
        

         
        

        優(yōu)化策略
        

         
        

        常見的優(yōu)化方案：
        

         
        

        使用 Data URI 即(base64)編碼代替圖片：適用于圖片大小于 2 KB，頁面上引用圖片總數(shù)不多的情況，原理是將圖片轉(zhuǎn)換為 base64 編碼字符串 inline 到頁面或 CSS 中，可以減少 HTTP 請求。
        

         
        

        合并雪碧圖(sprite)：移動端多圖情況下，可以將多圖合并到一個圖中，通過 CSS 定位背景圖的形式來引用圖片，可以有效減少 HTTP 請求。
        

         
        

        使用 CSS、svg、canvas 或者 iconfont 代替圖片：適用于移動端或高級的瀏覽器，而且繪制的圖片比較簡單。
        

         
        

        懶加載圖片(lazyload)
        

         
        

        使用 cdn 提供訪問圖片的入口。
        

         
        


         
        

        響應(yīng)式圖片可以結(jié)合懶加載的形式，這樣可以加強(qiáng)網(wǎng)頁的體驗。很多網(wǎng)站 logo 就是一個固定寬度的圖像的例子，不管瀏覽器視口的寬度如何，始終保持相同的寬度。
        

         
        

        然而在移動端，往往需要不固定的圖像，不同視口，不同的分辨率，需要展示不同的圖像大小，圖雖視口的改變而改變。
        

         
        

        這個時候我們需要考慮使用響應(yīng)式圖片：
        

         
        

         
        

         
        

        src="360.jpg" alt="">
        

         
        

        srcset：我們給瀏覽器準(zhǔn)備了四個質(zhì)量的圖像，分別為 360 768 1200 1920
        

         
        

        size：我們來告訴瀏覽器，在不同的環(huán)境下圖像的寬度
        

         
        

        當(dāng)視口不大于 360 時，圖像的寬度為 100vw，當(dāng)視口大于 768 時，圖像顯示為 90vw，以此類推。
        

         
        

        最后的 src 是作為默認(rèn)圖像 url 引入，是一個回退方案，當(dāng)然瀏覽器不認(rèn) srcset 和 sizes 屬性時，直接讀取 src 渲染。
        

         
        

        iphone4(320)下，圖像寬度和我們設(shè)置的 100vw 一致，而瀏覽器選擇的是 768 圖像沒有選擇 360 圖，因為 iphone4 的 dpr 是 2，瀏覽器智能地選擇了合適的 768。
        

         
        

        iphone6p(414)下，由于 6p 的 drp 更高，瀏覽器選擇了 1200 質(zhì)量的圖像，顯示了 90vw。
        

         
        

						
					
        
					
        
                    
					
        
					
					
        
						
        免責(zé)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)自行上傳，本網(wǎng)站不擁有所有權(quán)，也不承認(rèn)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，請發(fā)送郵件至：operations@xinnet.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，本站將立刻刪除涉嫌侵權(quán)內(nèi)容。
        
					
        
					
				
        
				
			
        
		
        
	
  
  
  

        
  
        
    
        
    

    
        
  
        

  

        





        
  
  免費(fèi)咨詢獲取折扣
  

        





        

        
  

        Loading
        

        




 




 









国产精品视频白浆免费视频_久久久高清国产免费观看_亚洲一区二区三区在线免费观看_免费欧洲美女a视频一级毛片 

      2. <samp id="mz5ne"><acronym id="mz5ne"></acronym></samp>
          <ol id="mz5ne"></ol>
          

        1. <samp id="mz5ne"></samp>
          <mark id="mz5ne"></mark>
            

            <fieldset id="mz5ne"></fieldset>
            
金寨县|
高清|
文安县|
贞丰县|
尚义县|
北安市|
台南县|
兴隆县|
临朐县|
广平县|
霍林郭勒市|
星子县|
新龙县|
社旗县|
屯留县|
合江县|
孙吴县|
含山县|
德保县|
墨江|
开封县|
晋中市|
金平|
温宿县|
拜城县|
获嘉县|
独山县|
广水市|
鞍山市|
聂拉木县|
宜阳县|
汉沽区|
新兴县|
涿鹿县|
池州市|
南和县|
凤翔县|
建阳市|
锡林浩特市|
长葛市|
绵竹市|