① 網站前端切圖是什麼意思，主要做什麼
我們做網站的時候是要根據程序化來進行實現的，特別是做一個精品網站的時候，首先第一步就是設計網站，網站設計好之後即是切圖，切圖完就要加入div+css實現效果圖，以及flash動畫等功能了，切圖完成之後才到下一步開發程序，這就是從前端的設計、切圖到網站程序開發的一個過程。
網站的好壞，前端很重要，這是我們重視的一部分，前段必須把div+css做好，不能有多餘的代碼程序在裡面，前端要是沒有做好，往後的程序很影響seo的推廣，這是很多企業做網站的時候忽略掉的問題，我們應該一手抓，俗話說的好，贏在起跑線上，只有系統化的前端div+css，設計，切圖功能實現之後才有後面的程序製作，很多網站前端div+css做的亂七八糟的，不說兼容性行不行了，就是網路蜘蛛來獲取頁面的時候都很排斥的，所以說，切圖是一個精品網站必備的，重中之重，不可忽視。
我們經過美工的設計頁面，從每一張圖片的整合到功能的實現都是切圖來做的，切圖人員必須具備有細心的品性，要嚴格要求每一步的到位，否則將會給後面的程序帶來麻煩，一個精品網站的建設是要分為四個大的步驟進行的
第一、網站設計
第二、網站切圖+div+css+功能美化
第三、網站程序製作
第四、後台的調用
② 前端圖片裁剪怎麼實現
寫個div把圖片作為div的背景，然後如下
div{
background:url("imagepath")no-repeat x y
//x為橫向偏移值，y為縱向偏移值。通過設置div大小，來限制圖片顯示的大小，然後通過偏移，來選擇要顯示的圖片區域
}
③ 前端如果有成千上萬的頁面該如何處理
一、圖片處理
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請求。你的圖像越大的話，字元串就越長。
④ 前端切圖切到很高的境界是怎樣一種體驗
就我個人的一點經驗分享一下，談不上很高的境界，只說是一點心得，我認為比較好的切圖的同學是，如何在眾多林立的需求之間取得一個平衡。說到底還是眼界的問題，剛開始可能糾結如何命名css比較易用，過後可能糾結html結構是否合理，然後頁面是否兼容，可復用，再往後頁面功能設計是否合理，頁面體驗是否符合人的基本心理需求。做的時間長了，就有空琢磨這個產品到底如何，能否真的佔有一定的市場或用戶量，然後做失敗幾個產品之後，看看其它行業是否還有潛力的機會，是否有與互聯網接合的切點。然後在跨地區看看，地球那邊的行業是怎麼樣的？所以，下午去巴黎看看那邊是否有訂餐需求不是一個夢。然後在每個階段下對前端的審視或要求是不一樣的，也談不上很高的境界，只是公司或人原來的目標或需求變了，所以就像我以前提到一樣，這個點永遠都達不到，只有無限可能的接近。
然後在分享點目前我接觸到具體的體驗：
1. 滿足UI同學的視覺需求。
無論是css hack還是通過js進行差異化處理，從技術手段上無底線的實現UI同學的視覺要求。這是工作負責的態度，也是自我需求突破的一個手段。從UI同學來說，做的設計稿沒有達到要求，是對其本身工作成果的不尊重。
2. 控制好後端同學的數據顯示。
前端做為後端同學的代言人，無趣的數字通過有趣的交互或界面展現出來，本身是一件很美好的事情，通過合作的方式讓整個流程完美無瑕，但總是在外界因素的影響下，把握不好。
3. 在這有限的條件下提高自己的效率或代碼質量。
這就要提到一般頁面的 頁面的健壯性，擴展性，復用性。
a. 健壯性：
這個怎麼說呢，UI出的psd圖是一個頁面理想狀態下的形態，而頁面有數據，會出現兩種極端狀態，一，數據極多，二，數據極少。所以在頁面排版的時候，考慮這兩種狀態，以免數據太多的時候，撐破頁面，以免數據太少，頁面部分元素會出現收回去狀況，這樣的頁面會出現一些細節沒有處理的常規失誤。
b. 擴展性：
可以說，這個也是第一條的擴充，擴展性的意思為，在頁面的模塊很少的時候，要考慮未來添加子模塊或兄弟模塊的狀態，為將來留好html介面。在將來添加模塊的時候，盡可能少的去動原來的html結構，使html易於擴展。這個具體情況，具體處理。一般的處理就是如果有可能會有兄弟元素就多套一層，為後台添加兄弟元素盡可能的不影響現有結構。這個點乍看起來很小，其實如果擴充到整個項目，多個項目就有可觀的效應了。
c. 復用性：
由於頁面中風格相似的模塊很多，或頁面中與頁面中相似的模塊很多，但是總會有那麼一丁點的差異，這是設計師認識世界然後在表達世界的產物，我們理解設計師的職業操守，所以只能在前期做一些技術處理，免得後期問候某崗位的親人。具體的有的模塊高點有的模塊低點，還有結構完全一樣，但底紋不一定。這樣建議把表現形式的樣式放在一個class中，物理屬性放在一個class中。還有就是裝飾性的圖片決不不以明標簽的方式插入到頁面中，內容式的內容絕對以<img src="" />的方式插入中去，以免將來多主題，多語言版本的實現。
可能有時候還有的情況是，頁面完全切不出來，html，css完全不知道怎麼寫了。但基礎掌握良好，概念基本清楚。這時候我個人建議應該是吸收別人好的東西時候到了，也是個人水平瓶頸的時候，需要在堅持一下完全的突破。具體的方式就是，用firebug去分析先有的bat各個項目的各個頁面，總有你可以借鑒的地方。
⑤ 網站後台編輯圖片在前端模糊，如何處理
製作圖片的時候將圖片的尺寸做大一些，
或者將圖片的清晰度調高一些就行了
上傳圖片的時候圖片會被壓縮
所以導致圖片不清晰
因此盡量使用大圖
⑥ 前端開發中，對圖片的優化技巧有哪些
階段一、圖片從PS中出來的時候：
1、大圖jpg，保存為連續模式。可以有模糊漸顯的效果。普通的是掃描列印效果。
2、小圖icon，http1.x伺服器的話整在一起導出。http2.0伺服器就無所謂了，可單個保存。
3、部分不適合與2切在一起的小圖片，使用base64編碼字元串代替。
階段二、圖片在代碼中使用的時候：
1、圖片保存在額外CDN伺服器。可節省代碼伺服器空間，加快圖片訪問。
2.1、在圖片即將進入到視野范圍內時再載入，可節省流量，加快首屏展示。
2.2、在網路空閑的時候預載入後續的圖片可以讓用戶等待時間更少。
3、考慮SEO的話，非內容的圖片使用背景代替？
4、好的圖片CDN自帶圖像處理功能，諸如裁剪壓縮之類的功能，可以上傳一張大圖，使用帶有不同參數的url來在不同的場景中使用圖片。
階段三、項目上線
1、盡量不要讓圖片鏈接失效好了
⑦ 前端圖片處理
我的理解應該是生成圖片的時候，在不影響圖片質量的情況下，盡量用體積小的格式，比如在不透明的情況下盡量把圖片保存成png格式。
在css中有一種技術叫做圖片精靈，就是把一些背景圖做成集合的形式。圖片只需載入一次。
最後網上好像是有插件（瀏覽器也有插件）可以對圖片進行壓縮處理。
⑧ web前端圖片處理。請求大神。。。。。。
如果你說的是我理解的，用css就可以實現
手機打字不方便，給你看看以前回答別人相似的問題
http://..com/question/170087636.html?oldq=1
也就是說該鏈接寬度和 圖片中第一個圖標寬度相同，然後通過背景圖方式載入成為默認樣式。再通過:hover 改變同一個背景圖的x軸位置就可以實現
仍有問題的話追問吧
⑨ web前端開發圖片放大了不清晰
web前端開發圖片放大了不清晰，需要優化瀏覽器的縮放演算法
在網頁上通過CSS樣式對圖片進行縮放從而導致圖片模糊，究其原因是因為瀏覽器的縮放演算法和圖片處理軟體的不同導致的差異。
所以，要解決這個問題，就需要優化瀏覽器的縮放演算法。CSS屬性image，rendering正是為此而存在的。CSS 屬性用於設置圖像縮放演算法。它適用於元素本身，適用於元素其他屬性中的圖像，也應用於子元素。