您現在的位置是:電腦技術吧?>? 基礎知識 ??>??優化建議,工作優化建議??>??正文詳情

優化建議,工作優化建議

單憶柏2019-11-23 13:41:39 人圍觀
簡介部門流程優化和建議CSS圖像優化是盡可能壓縮圖像的大小,加快頁面加載速度,對大型網站非常有用。別小看它。它可以大大提高網頁的加載速度。通常,使用的方法是CSS sprites C優化工

CSS圖片優化就是盡量壓縮圖片的大小,加快頁面加載速度,這對于大型網站是很有用的。

不要小看它,它可以大大提高網頁加載速度。

通常大家用到的方法就是css sprites。

  CSS Sprites(圖片整合技術) 的目的就是通過整合圖片,減少對服務器的請求數量,從而加快頁面加載速度。

想必很多人已經在用這個技術,我給大家簡單介紹一下,總結一下我使用css sprite時的一些技巧。

  CSS Sprites實現方法:  首先將小圖片整合到一張大的圖片上,然后根據具體圖標在大圖上的位置,給背景定位。

  CSS Sprites技術要點總結:  1. 小圖片整合時,按照從上到下的順序,而不要一個圖片挨著一個圖片從左到右排列。

這樣排列background-position的值一目了然,寫css時方便許多。

同時也是為了后期維護著想。

想象一下,如果后期維護時,改動其中某個圖片的尺寸,那么周圍的所有元素的background-position就會隨之改變,這將會是一件很頭疼的事情。

  2. 小圖片整合時盡量靠最左邊或者最右邊。

這兩個位置很靈活,非常適合擺放文本前的icon,再寫樣式時不會受到其它CSS Sprites圖片干預。

綜合第1點,我們可以沿著最左邊和最右邊的兩側開始由上至下整合圖片。

  3. 不建議在不同小圖片上下留間隔。

因為這樣會導致圖片size增大從而增加文件的大小。

這些間隔是沒有必要存在的。

  4. 把圖片中顏色較近或相同的組合在一起可以降低顏色數,因為少色數的圖片文件體積會相對的小。

  圖片優化:  當我們把所有小圖片都整合到一張大圖中后,就要開始考慮圖片優化的問題。

你可以看一下現在圖片的文件大小。

是不是有些不盡人意呢,沒關系,下面的步驟可以解決它。

  因為一般整合出的大圖背景基本上都是全透明的,所以我們會存為png格式。

大家可能會說gif比png文件大小要小,我們不是要優化嗎,為什么不是gif?因為gif圖片在處理圓角等曲線、或斜線的地方會出現很多鋸齒,這是我們不希望看到的。

而且可能會丟失一些接近于白色的小圖片像素。

況且我們還能找到比gif更小尺寸的格式,那就是我今天要介紹的PNG8格式。

  對于非動畫的GIF更建議都使用PNG8因為它能做到跟原png圖片一樣的效果,而且能為你節省10%-30%的文件大小,甚至比gif圖片還節省。

  如何將圖片轉成png8格式  1. 圖片準備:無論你是用什么繪圖軟件繪的圖,只要按常規操作保存為png格式就可以了。

photoshop中沒有轉png8的操作,所以我們需要求助于fireworks。

  2. 在fireworks中打開整合好的大圖。

  3. 選擇 文件圖像預覽。

  4.在格式下拉框中選擇PNG8,其他什么都不用選,直接點擊導出按鈕選擇路徑就可以了。

  很簡單吧~趕快看看你的png8圖片的大小吧,和之前的圖片對比一下。

你會有驚喜的!~~在看看圖片質量,簡直是perfect~~

版權聲明:本文由 單憶柏 整理編輯。

原標題:公司優化建議,優化營商環境建議

轉載注明出處:http://www.dn9ww09s.icu/basics/14068.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 酷狗音樂如何與電腦同步,手機酷狗音樂怎么同步

    酷狗音樂如何與電腦同步,手機酷狗音樂怎么同步 相關圖片酷狗音樂電腦歌單同步到手機很多孩子在聽酷狗音樂時會下載他們最喜歡的歌曲,但當他們再次打開酷狗音樂時,他們就不能播放本地音樂。那么如何同步酷狗音樂呢?現在,超人軟件...

  • win10待機,win10自動關機

    win10待機,win10自動關機 相關圖片win10待機黑屏無法喚醒Windows的自動待機和自動睡眠功能非常實用。有時我們的電腦還在工作,但人們有事要做就得離開,所以設置自動待機和自動睡眠非常方便。但許多用戶反映,自從...

  • href onclick,href onclick不調用

    href onclick,href onclick不調用 相關圖片a標簽onclick標簽主要用于實現頁面跳轉。它可以通過href的屬性或在onclick事件中實現。代碼如下:aonclick=window。地點。網址:'www.jb51。Neta標簽的href...

  • 慧連刷,惠刷

    慧連刷,惠刷 相關圖片黑龍江慧刷視頻條是一款非常實用的視頻直播軟件。但如果你想成為其中的主人,你需要提前給慧幣充電。如何刷徽幣?現在,超人軟件編輯就為大家介紹一下石壩回幣方面的充值方法...

  • 迅捷PDF轉換器,迅捷pdf轉換器怎么用

    迅捷PDF轉換器,迅捷pdf轉換器怎么用 相關圖片迅捷視頻轉換器轉換失敗怎么辦作為一個功能強大的PDF轉換工具,很多小伙伴都喜歡用它來轉換文件,但是你知道快速的PDF轉換器可以將word轉換成TXT嗎?快速PDF轉換器可以轉換成JPEG格迅...

  • 炫彩字效果怎么做,給圖片做炫彩效果

    炫彩字效果怎么做,給圖片做炫彩效果 相關圖片ps炫彩效果通常在圖像處理中,有時會特別追求折舊或劣質效果。當你拿起一張印刷粗糙的街頭小報時,劣質的墨水會弄臟紙張,原本通過網點印刷出來的照片在網頁制作中會更加顆粒狀...

  • 摩拜單車掃碼開不了鎖,摩拜單車掃出來了開不了鎖

    摩拜單車掃碼開不了鎖,摩拜單車掃出來了開不了鎖 相關圖片摩拜單車開不了鎖今天,很多摩比單車的用戶和朋友反映,他們在掃描和解鎖時發現自己正忙著服務或亂碼。如果摩比自行車不能解鎖呢?現在,超人軟件編輯想介紹一下,在iPhone上M...

  • 汽車配置參數詳解,汽車各種參數詳解

    汽車配置參數詳解,汽車各種參數詳解 相關圖片傳祺gs4配置參數詳解在Dreamweaver中插入flash后,可以有許多控制參數。單擊屬性面板右下角的“參數”按鈕以添加參數和值。您可以自由控制、參數和屬性以下標記屬性和參數描述傳祺...

  • 怎么查看別人共享的文件,如何加入共享文件夾

    怎么查看別人共享的文件,如何加入共享文件夾 相關圖片很裝b那種cmd命令為了方便文件傳輸,特別是在同一局域網內進行大范圍的文件傳輸,將要傳輸的文件放入共享文件夾中,這無疑要高于U盤和網絡盤的效率。如何設置共享文件夾?兩臺電...

  • 平面設計師,什么叫平面設計師

    平面設計師,什么叫平面設計師 相關圖片平面設計師職責隨著HTML5的普及,平面設計師該怎么做?今天,epub360從設計內容、表現技巧和理念三個方面,來談談平面設計師如何在這股浪潮中成功站穩腳跟。文章附有大量的實平面...

熱評文章

  • 文檔如何轉換成pdf,文檔轉換成pdf文件

    文檔如何轉換成pdf,文檔轉換成pdf文件 相關圖片word文檔怎樣轉換成pdf接觸的文檔越來越多,文檔的轉換技巧是必不可少的,尤其是PDF與word的轉換,是工作中必不可少的技巧之一。Pdf適合于圖片文件,但有時我們的工作需要文字word 轉...

  • 動畫特效制作,動畫制作

    動畫特效制作,動畫制作 相關圖片光效動畫制作讓我們學習如何制作這個flash螺旋動畫步驟1:首先,打開flash軟件,創建一個新場景,然后單擊菜單欄修改文檔屬性,將背景色設置為黑色(如下圖所示),然后單擊簡單動...

  • 天天動聽怎么了,天天動聽5

    天天動聽怎么了,天天動聽5 相關圖片天天動聽最新每天都是一款非常不錯的音頻播放軟件,自推出以來,一直備受喜愛。那么如何每天分享美麗的歌曲呢?接下來,超人軟件編輯將為大家介紹每天美麗歌曲的分享方法,希...

  • 什么是樣式表,webcss樣式表

    什么是樣式表,webcss樣式表 相關圖片內部樣式表簡介當你聽到樣式表這個詞時,你可能會想到CSS樣式表。XSL樣式表通常用于XML轉換,例如在web服務之間映射數據。因為XSL非常適合這個目的,所以創建了頂層元div樣式表...

  • 如何給文件夾加密,如何對文件夾進行加密

    如何給文件夾加密,如何對文件夾進行加密 相關圖片如何將文件夾設置密碼隨著對個人隱私的重視,許多小伙伴將開始加密自己的文件夾。那么,對于綜合加密、金鉆加密和移動加密,文件夾的大小有沒有限制?現在,讓超人軟件幫助你...

  • 平面設計師,什么叫平面設計師

    平面設計師,什么叫平面設計師 相關圖片平面設計師職責如上所述,由于互聯網行業的介入,零售、金融、房地產、汽車、通信、旅游等眾多行業作為各行業中下游的一個崗位,其一貫規律發生了變化,無論是受客戶老板的強...

  • 有大頭貼的美顏相機,美顏相機的大頭貼在哪

    有大頭貼的美顏相機,美顏相機的大頭貼在哪 相關圖片美顏相機怎么用近日,angelababy在微博上分享了一張可愛的自畫像卡通海報。你想知道怎么玩美女相機海報自動售貨機嗎?現在,超人軟件編輯將為您介紹美女相機卡通海報的使用教程美...

  • 甜橙,橙子互動

    甜橙,橙子互動 相關圖片橙子互動股份有限公司作為一個非常好的視頻直播軟件,我相信所有的小朋友都想知道如何玩橙色互動。現在,超人軟件編輯器將為您介紹一個使用橙色交互的教程。我希望你喜歡它互...

  • 蒙版有什么用,蒙版怎么做

    蒙版有什么用,蒙版怎么做 相關圖片圖層蒙版教程許多人在研究蒙古語版在煙花CS3中的應用時感到困惑。他們不知道蒙古語版本是做什么的。他們一直認為蒙古語版本的概念很深刻,很難理解。事實上,在學習面具之前,...

  • ofo單車有哪些車,ofo小黃車

    ofo單車有哪些車,ofo小黃車 相關圖片ofo小黃車押金怎么退本周,《教父3》即將上映,ofo官方已經與電影當局合作推出了以小黃人為主題的ofo大眼車。ofo大眼車在哪里?接下來,超人軟件將介紹如何為ofo安卓大眼車收費,...

關注微信

变脸官网查询