網(wǎng)站圖片添加

1、網(wǎng)站圖片優(yōu)化網(wǎng)站圖片優(yōu)化Contents目錄01020304圖片的應(yīng)用圖片的應(yīng)用圖片的來(lái)源圖片的來(lái)源圖片的優(yōu)化圖片的優(yōu)化圖片的添加圖片的添加 一、圖片的應(yīng)用一、圖片的應(yīng)用1、產(chǎn)品案例2、新聞動(dòng)態(tài) 圖文并茂的新聞 用戶(hù)體驗(yàn)更好3、banner、logo等.3、網(wǎng)站logo 、網(wǎng)站banner圖片二二、圖片的來(lái)源圖片的來(lái)源1、客戶(hù)提供的產(chǎn)品圖片、案例等、客戶(hù)提供的產(chǎn)品圖片、案例等 2、第三方資源查找、第三方資源查找 使用圖片時(shí)不可直接從別的渠道復(fù)制過(guò)來(lái)的，這樣子不僅會(huì)影響圖使用圖片時(shí)不可直接從別的渠道復(fù)制過(guò)來(lái)的，這樣子不僅會(huì)影響圖片的加載速度，而且圖片很容易丟失，穩(wěn)定性不好，間接的會(huì)影響到用戶(hù)體片

2、的加載速度，而且圖片很容易丟失，穩(wěn)定性不好，間接的會(huì)影響到用戶(hù)體驗(yàn)，因此建議大家還是把圖片上傳到網(wǎng)站的本地服務(wù)器上再進(jìn)行調(diào)用，這樣驗(yàn)，因此建議大家還是把圖片上傳到網(wǎng)站的本地服務(wù)器上再進(jìn)行調(diào)用，這樣子不僅加載起來(lái)更快，而且不會(huì)出現(xiàn)丟失的情況。子不僅加載起來(lái)更快，而且不會(huì)出現(xiàn)丟失的情況。 注意：從第三方獲取的圖片修改下不可有他人的水印，公司信息等注意：從第三方獲取的圖片修改下不可有他人的水印，公司信息等 ，添加的圖片要注意和網(wǎng)站、頁(yè)面的相關(guān)性添加的圖片要注意和網(wǎng)站、頁(yè)面的相關(guān)性三、圖片優(yōu)化細(xì)節(jié)三、圖片優(yōu)化細(xì)節(jié)（一）圖片大小圖片大?。盒∮谛∮?00KB 用用2345看圖、看圖、ps修改一下修改一下

3、圖片的大小對(duì)網(wǎng)站打開(kāi)速度是有影響的 當(dāng)圖片太大時(shí)，會(huì)占據(jù)延緩頁(yè)面加載時(shí)間，當(dāng)它已經(jīng)明顯影響到用戶(hù)的閱讀時(shí)，用戶(hù)與搜索引擎可能就會(huì)離開(kāi)你的網(wǎng)站 ，過(guò)小影響清晰度（二）圖片的尺寸圖片的尺寸： 新聞里面添加圖片 參考百度對(duì)圖片尺寸的抓取 最好按照 121*75 pixels 三、圖片優(yōu)化細(xì)節(jié)三、圖片優(yōu)化細(xì)節(jié) 產(chǎn)品案例 縮略圖 根據(jù)后臺(tái)設(shè)定的大小設(shè)置 也可以通過(guò)圖片屬性圖片屬性看ton三、圖片優(yōu)化細(xì)節(jié)三、圖片優(yōu)化細(xì)節(jié)產(chǎn)品、案例圖片按照網(wǎng)頁(yè)的要求同比例放大縮小三、圖片優(yōu)化細(xì)節(jié)三、圖片優(yōu)化細(xì)節(jié)（三）圖片格式： 圖片格式不但與圖片體積相關(guān)，還跟瀏覽器的兼容性也有一定的關(guān)系，所以也是不可忽視的。網(wǎng)頁(yè)圖片格式主

4、要有GIF、JPEG、PNG三種 注意要點(diǎn)：注意要點(diǎn)： 1、出現(xiàn)顏色失真、顯示不完整的圖片，堅(jiān)決不要使用。 2、采用通用的圖片格式?，F(xiàn)在一般通用的圖片格式是GIF或JPEG的格式。也是比較常用的，GIF適用于線(xiàn)圖和企業(yè)標(biāo)識(shí)，JPEG適用于照片元素的格式 3、建議不要采用的圖片格式。如PNG、BMP等，因?yàn)檫@些格式的圖片體積相對(duì)JPEG而言比較大，會(huì)影響加載速度。三、圖片優(yōu)化細(xì)節(jié)三、圖片優(yōu)化細(xì)節(jié)（四）圖片標(biāo)簽 圖片嵌入代碼常常包含5個(gè)關(guān)鍵性標(biāo)簽：src、width、height、alt和title 1、src標(biāo)簽標(biāo)簽 source的縮寫(xiě)，這里是源文件的意思?！皊ource”本身是“源”的意思。

5、例： 2、width和和height標(biāo)簽標(biāo)簽 是用來(lái)設(shè)定圖片的尺寸的 寬度和高度 例： 3、title標(biāo)簽標(biāo)簽 title是對(duì)圖片的說(shuō)明和額外補(bǔ)充，如果需要在鼠標(biāo)經(jīng)過(guò)圖片時(shí)出現(xiàn)文字提示應(yīng)該用屬性title 例：三、圖片優(yōu)化細(xì)節(jié)三、圖片優(yōu)化細(xì)節(jié)4、alt標(biāo)簽標(biāo)簽-代替屬性 用來(lái)對(duì)網(wǎng)頁(yè)上的圖片進(jìn)行描述，光標(biāo)在圖片上時(shí)顯示的提示語(yǔ)即采用該標(biāo)簽實(shí)現(xiàn)，當(dāng)圖片因某些原因不能正常顯示的時(shí)候，網(wǎng)頁(yè)訪(fǎng)問(wèn)者也能夠通過(guò)屬性文本判斷該圖片的內(nèi)容 最重要的標(biāo)簽 alt標(biāo)簽的重要性： 網(wǎng)頁(yè)內(nèi)容相關(guān)性是關(guān)鍵詞優(yōu)化的前提，搜索引擎認(rèn)為，網(wǎng)頁(yè)上的圖片應(yīng)該與網(wǎng)頁(yè)主題相關(guān)。反過(guò)來(lái)講，當(dāng)搜索引擎要判斷網(wǎng)頁(yè)的關(guān)鍵詞時(shí)，圖片的alt標(biāo)簽

6、是一個(gè)可信任的參考點(diǎn)。 有時(shí)候因?yàn)橐恍┰颍热缡褂闷聊蛔x取器、帶寬較低、網(wǎng)絡(luò)阻礙等導(dǎo)致網(wǎng)頁(yè)上的圖片無(wú)法顯示。描述性的alt標(biāo)簽可以告訴用戶(hù)該位置的內(nèi)容，從而添加用戶(hù)體驗(yàn)。正規(guī)的網(wǎng)站都應(yīng)該這樣做。有時(shí)，如果沒(méi)有alt標(biāo)簽，會(huì)導(dǎo)致用戶(hù)不明白該圖片代表著什么，為什么放在這個(gè)網(wǎng)頁(yè)。 alt屬性的寫(xiě)法屬性的寫(xiě)法 簡(jiǎn)單描述圖片內(nèi)容，并嵌套關(guān)鍵詞簡(jiǎn)單描述圖片內(nèi)容，并嵌套關(guān)鍵詞四、圖片的添加四、圖片的添加1、找到相應(yīng)的案例或者產(chǎn)品模塊、找到相應(yīng)的案例或者產(chǎn)品模塊四、圖片的添加四、圖片的添加 2、點(diǎn)擊圖片、點(diǎn)擊圖片本地上傳本地上傳找到該圖片找到該圖片確定上傳確定上傳3、點(diǎn)擊、點(diǎn)擊HTML代碼代碼 或者源碼或者源碼