Ⅰ 前端開發中，對圖片的優化技巧有哪些
階段一、圖片從PS中出來的時候：
1、大圖jpg，保存為連續模式。可以有模糊漸顯的效果。普通的是掃描列印效果。
2、小圖icon，http1.x伺服器的話整在一起導出。http2.0伺服器就無所謂了，可單個保存。
3、部分不適合與2切在一起的小圖片，使用base64編碼字元串代替。
階段二、圖片在代碼中使用的時候：
1、圖片保存在額外CDN伺服器。可節省代碼伺服器空間，加快圖片訪問。
2.1、在圖片即將進入到視野范圍內時再載入，可節省流量，加快首屏展示。
2.2、在網路空閑的時候預載入後續的圖片可以讓用戶等待時間更少。
3、考慮SEO的話，非內容的圖片使用背景代替？
4、好的圖片CDN自帶圖像處理功能，諸如裁剪壓縮之類的功能，可以上傳一張大圖，使用帶有不同參數的url來在不同的場景中使用圖片。
階段三、項目上線
1、盡量不要讓圖片鏈接失效好了
Ⅱ 網站首頁過長圖片又多，怎麼優化呀
我們知道用戶都喜歡瀏覽速度快的網站，不喜歡花費太多的時間等待網頁的打開，等待的時間過長，會讓用戶失去耐心，甚至煩躁時會直接關閉網頁，這樣就會失去一些潛在的客戶了。其次，關鍵字的排名與網頁的打開速度也有關系，谷歌Google的Web搜索團隊在官方博客上宣布，將把網站的速度作為PR（PageRank）演算法的一個因子，在所有因素都相等的情況下，速度快的網站將排在速度慢的網站前面。
因此我覺得我們有必要去提高網頁的打開速度，下面我來教大家一些小技巧提高網頁的打開速度。
1.優化css。我們知道css的出現，使內容和元素的表現方法分離，用戶打開用css設計的網頁，css一般被下載用戶本地計算機，不像html元素表現標簽，每次網站的網頁都要調用一次，使用css，只需要一次就好了！另外，css在某些地方可以替代圖片，這就是為什麼現在提倡div+css的原因！不過，使用dw寫css，也會有些多餘的css代碼。Css太臃腫的話，也會影響網頁的速度，這里介紹一款工具cleancss給大家試試，它是一款在線工具。另外就是手工精簡代碼，這個確實有這個對於新手確實有難度，不過，多看一些精簡css技巧的文章會對你有幫助的，看得多了，也就知道那些代碼可以精簡了。
2.優化圖片。這個沒有什麼技巧，通過軟體就搞定了。我喜歡用ps，在ps中選擇存儲web所用格式，然後選擇圖片的質量等選項，圖片看起來很清楚，大小又合適保存就可以了。
3.圖片格式問題。選擇正確的圖片格式是非常重要的。Jpg一般用於照片或真彩色圖片，gif運用平面色彩的圖片，一般用於按鈕或logo圖片，png和gif非常相似，不過就是多支持一些色彩！
4.圖片長寬的標記問題。這個問題一般在html中可以看到，一些人經常忘記寫圖片的長和寬了。這些標記是告訴瀏覽器打開圖片之前的尺寸，瀏覽器載入網頁時就會保留一塊區域，加快整個網頁顯示速度。
5.在url中要學會用」/」。當一個用戶打開類似一個url後面沒有」/」，伺服器就要確定什麼類型的文件或是網頁，這時你在網址後面加一個」/」，這時伺服器就知道是一個目錄的頁面，減少載入時間。
6.減少網頁的響應次數。對於網頁的打開，其實是很復雜的過程。從網頁的申請打開，到web伺服器的響應，編譯等動作，然後發回給瀏覽器，才顯示我們面前的文字和圖片，多媒體文件等。所以我要盡量減少響應次數，現在ajax在這方面就運用的不錯。當然，一個靜態頁面就例外了，靜態頁面多注意圖片大小和網頁設計上就行了。
Ⅲ 首頁圖片多，顯示慢怎麼解決
降低圖片質量,可以使用GIF格式的,對表格進行優化,使用TBODY,這樣可以加快速度了~~再就是首頁不要過多的調用資料庫.
Ⅳ 首頁圖片太多了網站怎麼優化
給每張圖片加上alt標簽
還可以在代碼裡面天加上h1標簽
但是可以隱藏起來，那樣前台是看不到的每個圖片的alt標簽不要相同哦
堅持就是勝利
Ⅳ 網站是大多由圖片構建的。且頁面較多。該怎麼選關鍵字，該怎麼優化啊。
企業站的話關鍵詞當然首選產品名，個人站主要看網站主題。圖片多了是會增加美觀但一定程度上影響頁面速度，這個也可以通過一些其他途徑解決如：網站備案使用國內伺服器，相對增加空間大小等。只要不是過於慢對優化影響不是太大。頁面的多少不影響優化，但頁面的質量很關鍵，主要是頁面必須流暢有迴路，網路蜘蛛從首頁進入每個頁面必須可以返回首頁，每個頁面做個底部連接是個不錯的方法。多檢查檢查頁面的連接情況消除死連等因數。優化說難不難說簡單不簡單，關鍵你要細心、有耐心新站會有磨和期，多多更新，發質量高的文章（原創或偽原創），多和有質量的網站做做友情連接，起步階段可以適當買點連接。
總的來說優化的主關鍵還是在於：頁面質量、更新度、外連數。這幾大因數，多找找優化文章吧。多找點站長工具會解決你很多麻煩。
Ⅵ 網頁首頁大量GIF圖片，顯示速度有問題
這種情況是多方面的，主要和瀏覽器及Flash插件等有關，和網路環境也有關。先清理掉不需要的插件和系統垃圾，不要開太多聯網程序。
Ⅶ 前端如果有成千上萬的頁面該如何處理
一、圖片處理
1. 圖片：大小的控制與使用
以淘寶為例，你搜索的所有產品的列表頁面，每個產品都有一個概略圖（小圖），
點開一個產品的頁面可以看到產品展示圖（中圖），點擊圖片後可以看到原始圖（大圖），如果上面提到的三個頁面都用用戶上傳的原始圖，僅用控制顯示大小，頁面性能如何，可想而知，用PC機還好，如果用戶用移動設備加3G網路訪問，5分鍾也打不頁面，就是打開了，流量也用完了。
所以我們說為你的網站針對不同的情況不同的頁面，採用不同的圖像文件，當然屏幕解析度也要考慮進去，如果有人用iphone打開和ipad打開，就不需要顯示像PC機上那麼大的圖片了，只要適應設備就可以了，那你可能要問怎麼做。
通過CSS Media Querises,可以輕松做到，你可以訪問http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 了解更多信息：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
2. 壓縮
傳送圖像的時候單單控制適當的尺寸往往是不夠的。不少文件格式在不失真的前提下可以被壓縮很多。有一類應用程序可以達到這個效果。比如Photoshop有個很好的功能叫做Save for Web and Devices，還有我個人覺得多用PNG是個可以考慮的方案
3. Sprite
增加應用程序性能的方法之一，是減少到伺服器的請求數。每一個新圖像代表一個請求數。有一個辦法是將幾個圖片合並成一個，合並之後的圖像叫做一個sprite，這個功能在淘寶你也會發現，在CSS中改變背景層的位置，就能准確的把特定部分的圖像顯示出來。比如Twitter Bootstrap利用sprites來製作內部圖標，訪問http://getbootstrap.com/2.3.2/ 你會了解更多
在CSS中，你可以參照以下方式，顯示你喜歡的sprite部分：
.icon-edit {
background-image: url("../img/glyphicons-halflings-white.png
");
background-position: -96px -72px;
}
4. 超高速緩存
瀏覽器超高速緩存十分好用。盡管有時在開發過程中會導致一些非常有趣的情況，但它確實有助於提高你的網站的性能。所有瀏覽器的超高速緩存下來的內容包括圖片、JavaScript或者CSS。有幾種方法可以控制緩存，建議你閱讀相關文章。
5. 預讀取
HTML 5有一個很好的功能叫做預讀取，它讓瀏覽器提前下載你馬上需要用到的資源：
<link rel="prefetch" href="/images/background.jpg">
6. 數據URI方案/內聯圖像
幾年前我曾開發了一個簡單的網頁，只包含一個HTML文件夾，但當然裡面應該還包括一些我需要的圖像。數據URI方案幫助我解決了問題。我們的想法是將圖像轉換成一個base64編碼的字元串，並將其放置在src屬性中的img標簽里，例如：
Html代碼
<img src="data:image/png;base64,//8/==" alt="Red dot">
通過這種方法，你的圖像實際上在HTML中並保存了一個HTTP請求。你的圖像越大的話，字元串就越長。
Ⅷ 網站優化的問題（圖片和js過多）怎樣優化
js盡量放到網站底部
一 ALT標簽 .
圖片一定要添加ALT標簽，ALT標簽在圖片搜索中占著很重要位置，你做的是什麼圖片，這個ALT標簽就要有這個文字，劉德華的圖片，就要告訴搜索引擎，我不是周傑倫。 ..
二 圖片標題 版權申明
這點和網頁優化中的Title標題一樣，是個什麼內容的圖片，就給這張圖片取個相符的標題。 .
三 圖片格式 。
目前，搜索引擎圖片庫中，大多數圖片的文件格式是JPG，JPEG，JIF，就以JPG，JPEG，GIF為後綴來完成圖片。 .
四 圖片文字介紹 .
排在前面的圖片，基本都是關於這張圖片的一個專欄介紹，以告訴搜索引擎這個圖片的重要性。 .
五 外部鏈接 .
網站優化需要外部鏈接，同樣，圖片的seo優化也是需要外部鏈接，鏈接始終是網路的最根本基礎，最優秀的圖片才會在網路上蔓延，搜索引擎也就是分析這張圖片的外部鏈接，從而來判斷這張圖片是不是受歡迎。 .
目前，SEO行業內大家都把眼光主要盯在網路，GOOLGE，YAHOO等各大搜索引擎的網頁搜索上，對其它產品的搜索優化則研究的甚少，網路眾多產品中除了網頁搜索，MP3搜索，圖片搜索同樣聚集著巨大的人氣。根據本人的小站來路數據統計顯示，目前圖片搜索約占網路總搜索量的55%-60%，所以針對「網路圖片搜索優化」是一件很值得我們去做的事情 根據專家觀察，這樣的理論和現象都是值得各位站長深思的，所以希望大家多做研究學習，爭取總結出更多更好的經驗!
然而針對網路做圖片搜索的搜索引擎優化，並不是一件容易的事情，它不像網頁搜索引擎優化那麼容易研究。主要原因，目前搜索引擎並不能很好的識別出圖片信息，圖片不像文字那樣，搜索引擎對文字內容的識別，可以通過自身的文字識別系統，來判別出，即便是搜索出來的信息有偏差，但也不會太離譜。但圖片的組成信息是二進制機器碼，即使是像GOOGLE這樣的搜索引擎，也還不能很好的識別哪張圖片才是最重要的圖片。所以，更多的希望我們進一步的去探索和研究。 .
Ⅸ 網站首頁過長圖片又多怎麼優化
那就把首頁不必要的內容去掉一些，圖片只放優質的圖片，不必要的圖片就刪掉吧，省得占空間，刪繁留簡，越簡潔越好，看著也整潔，視覺效果會更略勝一籌的。