<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »分享!網頁設計中圖片格式選擇技巧

        分享!網頁設計中圖片格式選擇技巧

        至成科技 2015-06-21 訪問量(1203) 評論(0)
        摘要:

            西安網站設計中,切圖輸出是指設計師將手邊繪制完成的原始圖稿轉換成網頁用的圖片格式、并交由下一位人員網頁排版的重要步驟。選擇適合的圖片格式不但可以將讓西安網站設計得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小,節省下載時間、有效的減少服務器的負擔。
            以西安網站設計師較常用的 Photoshop 以及 Illustrator 為例,都提供了「儲存為網頁用…」的功能。與默認的存盤模式不同,在這個模式中,軟件提供了仿真圖文件輸出的質量調整、檔案大小控制等針對網頁圖文件需求的選項:

            相信許多人都知道西安網站設計中較常用的格式不外乎 JPG、GIF、PNG 等格式,但并非所有的人都知道他們之前的實際差別跟到底何時該選擇何種格式。經常發生的情況是,選擇 GIF 后的輸出結果看起來變得很糟,于是 PNG (24)似乎突然間風行了起來,不論圖檔尺寸是不是因此多了好幾倍。

        JPEG:
          由于舊型計算機系統以及文件系統的限制,計算機檔案文件名與擴展名被規定為 8.3 的格式,因此 JPEG 的附檔名被縮寫為 .JPG。JPEG可以說是人們較熟悉的圖檔格式了,相信在數字相機普及的現在,幾乎每臺數字相機、照相手機都可以(甚至只能)輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮(lossy compression)的圖檔格式,也就是說使用者每次進行 JPEG 的存檔動作后,圖檔的內容都會遭到破壞,這個特性在肉眼辨識下并不明顯,但卻可以有效的降0圖檔的檔案大小。
          就如這些使用 JPEG 的設備一樣,JPEG 非常適合作為儲存像素色彩豐富的圖片、例如照片等等,這些圖片即使有些微的失真也不容易輕易的察覺:而反過來說 JPEG 并不適合用來儲存線條圖、圖標或文字等等有清晰邊緣的圖片
        多次重復進行 JPEG 的圖檔的儲存將會有效性地破壞圖片中的細節。

        GIF:
          Gif 在許多特性與表現上都與 JPEG 有著相對的特性。GIF 使用無損壓縮格式(Lossless Compression),但卻限制了色彩表現能力、能夠有效地節省檔案尺寸。GIF 只擁有 8 位的顏色深度信息,所謂的 8 位是指 2 的 8 次方也就是 256 色,當你的圖片中出現的色彩在 256 色以內時,使用 GIF 可以得到相當好的輸出質量、同時兼顧了檔案大小。因此 GIF 非常適合用來表現圖標、 UI接口、線條插畫、文字等部分的輸出。另外 GIF 同時還支持透明背景、以及動畫圖檔格式,并且幾乎不用擔心支持性的問題:幾乎 100% 的瀏覽器都支持它。由于 JPEG 與 GIF 有著如此不同的特性,因此我們可以很輕易的選擇何時該用哪一種格式來輸出我們需要的圖檔。

        當圖片擁有豐富的色彩時,并且沒有明顯銳利反差的邊緣線條時,選擇 JPEG 可以得到較好的輸出結果,像是照片就是較好的例子:

        (左圖:Photoshop 輸出 JPEG 默認值:品質:高,壓縮質量 60%、優化輸出。右圖:Photoshop 輸出 GIF 默認值:256色、擴散性混色)

        當圖片是擁有明確邊緣的線條圖、沒有使用太多色彩、甚至可能需要透明背景時,GIF 是很好的選擇,檔案小、畫質又精美。

        (上圖:Photoshop 輸出 GIF:64色、擴散性混色。下圖:Photoshop 輸出 JPEG 默認值:品質:高,壓縮質量 60%、優化輸出)

        PNG:
        PNG 較初的開發目的是為了作為 GIF 的替代方案的,作為做新開發的影像傳輸文件格式,PNG 同樣使用了無損壓縮格式,事實上 PNG 的開發就是因為 GIF 所使用的無損壓縮格式專利問題而誕生的。
        PNG 分為 PNG-8 以及 PNG-24 兩種格式,PNG-8 的特性很接近 GIF ,支持 256 色以及透明背景的特性。而 PNG-24 則支持了多達 160 萬個色彩。

        雖然 PNG 不支持動畫,但是 PNG-24 支持了Alpha 透明效果,這可以說是 PNG-24 較令人眼睛一亮的地方了。也就是說使用 PNG 輸出圖檔時,可以有效的支持不同的透明度效果了。這對網頁設計師來說無疑是一個好消息,像這張圖片其實是使用了三張 PNG-24 的圖片在網頁中排版出來的效果:

            在大部分的情況下,西安網站設計師必須根據圖片需求來選擇不同的圖檔格式,并且對其做適當的調整。雖然 PNG-24 看起來很好,但是相應的當然就是檔案大小的增加。另外還有就是瀏覽器支持度的問題,雖然現在幾乎大部分的瀏覽器都支持了 PNG-24 格式,但不幸的是 IE6 是不支持透明 PNG 圖檔的,現在依然有相當的使用者在使用 IE6 或更早的版本,雖然比例會越來越少,但是設計師多少必須將其考慮其內,是否考慮使用 GIF 替代,或是在程序端透過 script 的方式來支持透明 PNG 格式。

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划 188篮球比分 6合王中王心水高手论沄 福利彩票三d 山东11选5任3技巧 湖北30选5开奖查询 江苏快三开奖形态走势图 生肖时时彩中奖规则 浙江体彩20选5开奖彩票 四川快乐12开奖结果 期特码王快报图 单机象棋 快乐十分开奖网址 广西快三推荐一定牛 11先5走势图 竞彩篮球混合过关规则