<tt id="1uzb4"></tt>
  • <track id="1uzb4"><menu id="1uzb4"><big id="1uzb4"></big></menu></track>

    <rt id="1uzb4"></rt>
    
    
  • <b id="1uzb4"><address id="1uzb4"><label id="1uzb4"></label></address></b>

      <wbr id="1uzb4"><menuitem id="1uzb4"><div id="1uzb4"></div></menuitem></wbr>
      <rp id="1uzb4"><menu id="1uzb4"><em id="1uzb4"></em></menu></rp>

        上城網站建設:先進Web開發中的圖像優化

        2019.01.16

        471

        上城網站建設

        在提供良好的圖像質量的同時,在使用最小可能的文件大小之間總是使用最小可能的文件大小之間的平衡動作。將照片直接從你的DSLR中嵌入可能看起來不錯,但這會使你的網站的加載速度減慢到爬行,而過度壓縮的圖像可能會提高你的網站的速度,同時使設計和整體美學失去信譽。

        對于我們主要處理的兩種圖像資產-照片和圖標/插圖-我們執行圖像質量檢查和壓縮技術的混合操作,這些技術在大多數情況下都能很好地工作。

        文件類型和何時使用它們

        我們在構建網站時使用三種圖像文件類型:.jpg.png和.svg。

        JPG最適合用于風景、風景或人物等照片。對于內容上的圖像,如博客文章圖像,我們的目標是20-70kb。較大的背景照片可以高達500 kb,但200 kb是一個很好的平均。

        JPGS是有損的(每次導出時它們都會重新壓縮和降低圖像質量),而且它們不能很好地管理梯度。如果圖像中有梯度,有時可以將圖像分割成兩個切分,這樣就可以使用CSS梯度在單獨的背景中呈現漸變。

        PNG對諸如徽標和圖標這樣的資產是最好的,因為它們支持透明性,而且徽標和圖標通常使用更有限的調色板-因為PNG通過減少顏色來實現壓縮。

        PNG可能是有損耗的,但是我們通常使用無損的,這意味著每個像素都被精確地保存,而不會降低調色板,從而產生高質量的圖像。

        SVGS具有最好的質量,并被用于向量藝術,因為它們的可伸縮性。我們經常將它們與徽標一起使用,但是,SVGS確實會為瀏覽器創建更多的呈現工作,并且在頁面加載時會造成延遲,因此圖像的質量應該始終與其復雜性保持平衡。

        上城網站建設:先進Web開發中的圖像優化

        作為一個例子,當我們使用PNG和SVG時,比較銀幕內幕和Bozeman網站的徽標。對于前者,我們使用了SVG。對于Bozeman網站,由于CSS動畫在用戶滾動時引入的復雜性,我們選擇使用PNG以避免影響瀏覽器性能。

        上城網站建設:先進Web開發中的圖像優化

        有時最好的解決方案是:對于JTech上城網站建設的網站上的徽標,“JT”組件是PNG,但“慶祝20年”是SVG,以便在所有視口大小中保留其質量。

        Optimization Techniques

        為了獲得最佳效果,必須優化您的圖像。為此,我們利用三個程序:ImageOptim(用于JPGS和PNGS)、ImageAlpha(針對PNGS)和沖刷(用于SVGS)。

        優化JPGS

        上城網站建設:先進Web開發中的圖像優化

        ImageOptim減少了JPGS和PNG的文件大小。對于大型圖像,比如我們用于背景面板的圖像,我們將尺寸限制在1600x1200px。對于在博客文章中插入的上城網站建設:先進Web開發中的圖像優化之類的內容照片,我們將尺寸限制在200到800 px之間。

        在調整到其最終分辨率后上城網站建設,圖像將使用現有的最佳質量在Photoshop中輸出。每次壓縮圖像時,它都會失去一定的保真度,因此我們更愿意完全依靠ImageOptim來進行壓縮,而不是讓Photoshop進行一次傳遞。Photoshop的效率明顯較低:它的“網頁保存”質量為65,它產生的圖像文件大小相等,但保真度比ImageOptim的質量85差。

        視網膜JPGS

        當我們瞄準視網膜或其他高密度顯示器時,我們發現最好是以兩倍的分辨率保存一個JPG,但是在ImageOptim中使用更高的壓縮,大約50-60,這可以產生一個高質量的圖像,在視網膜和標準的低密度顯示器上看起來都很好。這項技術允許我們使用視網膜和標準顯示器的單一資產,而不是切割和加載多個版本,而不翻兩番我們的圖像。

        優化PNG

        上城網站建設:先進Web開發中的圖像優化

        對于PNGS,我們使用其“為Web保存”選項中的PNG24從P上城網站建設hotoshop中輸出,然后通過ImageOptim運行它。如果它檢測到圖像使用的顏色少于256色,ImageOptim將無損地將圖像轉換為PNG8,更簡單的文件格式可以產生非常輕的文件。

        使用ImageOptim,我們最終輸出的圖像沒有太多的復雜性(最小的顏色、簡單的形狀和分辨率小于200 x 200 px),大小可以從15 kb到1kb以下。

        優化大型PNG

        對于更復雜的圖像,如果我們不能用ImageOptim生成一個介于15 kb到50 kb之間的文件,我們就使用ImageAlpha。ImageAlpha用于處理PNG 24(百萬種顏色)到PNG 8(最大256種顏色)的PNGs,將圖像從無損變為有損,最終目標是顏色數量最少的PNG 8。

        這種格式的損失主要是指對調色板進行戰略細化,消除了最不注意的顏色,以產生仍然看起來很好的圖像,同時降低了它的復雜性。

        從ImageAlpha導出之后,我們通過ImageOptim運行它,以便進一步優化它。

        優化SVGS

        當涉及到SVG時,在從IlluStrator導出圖像之前,我們盡可能地降低復雜性。這是一個通常繁瑣的過程,因為它們的大小,我們首先嘗試將圖層的數量減少到最小,同時仍然準確地顯示藝術品。然后將其保存為IlluStrator中的SVG,并使用一個名為scour的程序進行優化。

        我們使用這個Automator腳本使其在MacOS中更容易使用,允許您右鍵單擊Finder中的SVG文件,并通過“服務”菜單優化SVG。我們經常使用字體文件的矢量圖形,是單色的程序,稱為符號.

        Conclusion

        正確地優化圖上城網站建設像只是我們提高網站性能、防止瀏覽器膨脹、減少服務器和帶寬資源使用、加快頁面加載時間、保持開發基礎設施清潔和為最終用戶提供更好體驗的另一種方法。

        我們希望這次探索我們的經驗與JPG,PNG和SVG文件類型,圖像壓縮和質量工具,為您提供一個資源,因為我們不斷完善我們自己的過程,以生產高質量的網站。

        關鍵詞

        最新案例

        聯系電話 400-6065-301

        留言

        欧洲亚洲国产香蕉网,亚洲AV永久无码精品澳门,欧美13—14周岁a完整版
        <tt id="1uzb4"></tt>
      1. <track id="1uzb4"><menu id="1uzb4"><big id="1uzb4"></big></menu></track>

        <rt id="1uzb4"></rt>
        
        
      2. <b id="1uzb4"><address id="1uzb4"><label id="1uzb4"></label></address></b>

          <wbr id="1uzb4"><menuitem id="1uzb4"><div id="1uzb4"></div></menuitem></wbr>
          <rp id="1uzb4"><menu id="1uzb4"><em id="1uzb4"></em></menu></rp>