高級(jí)網(wǎng)站設(shè)計(jì)中的圖像優(yōu)化撰寫(xiě)

高級(jí)網(wǎng)站設(shè)計(jì)中的圖像優(yōu)化撰寫(xiě)

網(wǎng)站質(zhì)量圖像始終是在使用盡可能小的文件大小同時(shí)提供良好圖像質(zhì)量之間的平衡行為。直接從您的數(shù)碼單反相機(jī)上嵌入照片可能看起來(lái)不錯(cuò)，但它會(huì)減慢您的網(wǎng)站負(fù)載的速度，而過(guò)度壓縮的圖像可能會(huì)提高您網(wǎng)站的速度，但會(huì)損害設(shè)計(jì)和整體審美。

文件類(lèi)型以及何時(shí)使用它們

我們?cè)?a title="網(wǎng)站設(shè)計(jì)公司" href="http://www.bm7419.com/">網(wǎng)站設(shè)計(jì)時(shí)使用三種圖像文件類(lèi)型：.jpg .png和.svg。

JPG最適合用于風(fēng)景，風(fēng)景或人物等照片。對(duì)于內(nèi)容中的圖像，例如博客文章圖像，我們的目標(biāo)是20-70kb。較大的背景照片可以達(dá)到500kb，但200kb是一個(gè)很好的平均值。

JPG是有損的（它們?cè)诿看螌?dǎo)出時(shí)重新壓縮并降低圖像質(zhì)量），并且它們不能很好地管理漸變。如果圖像中有漸變，有時(shí)可以將圖像分成兩個(gè)切割，以便您可以使用CSS漸變?cè)趩为?dú)的背景中渲染漸變。

PNG最適用于徽標(biāo)和圖標(biāo)等資源，因?yàn)樗鼈冎С滞该鞫?，因?yàn)榛諛?biāo)和圖標(biāo)通常使用更有限的調(diào)色板 - 因?yàn)镻NG通過(guò)減少顏色數(shù)量來(lái)實(shí)現(xiàn)壓縮。

PNG可能是有損耗的，但我們通常使用無(wú)損，這意味著每個(gè)像素都可以精確保存而不會(huì)降低調(diào)色板的質(zhì)量，從而獲得更高質(zhì)量的圖像。

SVG具有最好的質(zhì)量，并且由于其可擴(kuò)展性而被用于矢量藝術(shù)。我們經(jīng)常將它們與徽標(biāo)一起使用，但是，SVG確實(shí)為瀏覽器創(chuàng)建了更多的工作，并且在頁(yè)面加載時(shí)會(huì)產(chǎn)生遲緩，因此圖像的質(zhì)量應(yīng)始終與其復(fù)雜性相平衡。

優(yōu)化技術(shù)

優(yōu)化JPG

我們用于背景面板的圖像，我們將尺寸設(shè)置為1600x1200px。對(duì)于內(nèi)容照片，例如插入博客文章中的圖像，我們將尺寸限制在200-800px寬之間。

調(diào)整到最終分辨率后，將使用好質(zhì)量在Photoshop中輸出圖像。每次我們壓縮圖像都會(huì)失去一些保真度，所以我們更喜歡單獨(dú)使用ImageOptim進(jìn)行壓縮，而不是讓Photoshop進(jìn)行傳遞。Photoshop的效率顯著降低：它在質(zhì)量65下的“網(wǎng)絡(luò)保存”產(chǎn)生的圖像文件大小相同但保真度比ImageOptim的質(zhì)量差85。

優(yōu)化更大的PNG

對(duì)于更復(fù)雜的圖像，如果我們使用ImageOptim無(wú)法生成15kb到50kb之間的文件，我們使用ImageAlpha。ImageAlpha用于處理從PNG 24（數(shù)百萬(wàn)種顏色）到PNG 8（最多256種顏色）的PNG，將圖像從無(wú)損變?yōu)橛袚p，最終瞄準(zhǔn)具有最少數(shù)量顏色的PNG。

這種格式的損耗主要意味著對(duì)調(diào)色板進(jìn)行戰(zhàn)略性改進(jìn)，消除最不顯著的顏色，以產(chǎn)生仍然看起來(lái)很棒的圖像，同時(shí)降低其復(fù)雜性。

優(yōu)化SVG

我們使用這個(gè)automator腳本使其在macOS中更容易使用，允許您在Finder中右鍵單擊SVG文件并通過(guò)Services菜單優(yōu)化SVG。我們經(jīng)常將字體文件用于單色矢量圖形，并使用名為Glyphs的程序。

正確優(yōu)化圖像只是我們改善網(wǎng)站性能，防止瀏覽器膨脹，減少服務(wù)器和帶寬資源使用，加快頁(yè)面加載時(shí)間，保持開(kāi)發(fā)基礎(chǔ)架構(gòu)清潔并為最終用戶(hù)提供更理想體驗(yàn)的另一種方式。

我們希望通過(guò)JPG，PNG和SVG文件類(lèi)型，圖像壓縮和質(zhì)量工具來(lái)探索我們的經(jīng)驗(yàn)，因?yàn)槲覀儾粩嗤晟谱约旱牧鞒桃酝晟?a title="網(wǎng)站設(shè)計(jì)公司" href="http://www.bm7419.com/">網(wǎng)站設(shè)計(jì)。

網(wǎng)頁(yè)題目：高級(jí)網(wǎng)站設(shè)計(jì)中的圖像優(yōu)化撰寫(xiě)
網(wǎng)頁(yè)地址：http://www.bm7419.com/news/79602.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)