什么是切圖？

1、什么是切圖？

切圖是指將設計稿切成便於制作成頁面的圖片，並完成html+css布局的靜態頁面，通俗來講，把一張設計圖 利用到切片工具 把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態頁面書寫，完成CSS布局。

切圖就是將 .psd 設計稿還原成 Web 頁面的過程，這個過程包括兩部分：

• 切出素材
• 編寫代碼實現

2、為什么要切圖？
沒有人可以直接把一整張圖片引用頁面，當作 Web 頁面的。切圖的主要目的就是給網頁提供 圖片素材 ，可以讓你從 html 或者 css 里引入圖片。

html: <img src="" alt="">
css:  backgroud-img:url(../images/sprite.png)

3、如何切圖？

• 使用 PS 工具
• 使用背景圖
• 圖片合並方案
• 瀏覽器兼容

4、都需要切哪些圖？

• 修飾性，用在 css 里，icon、logo、有特殊效果的按鈕和文字
• 內容性，用在 html 里，Banner、廣告圖片、文章配圖

5、切出來的圖片保存為哪種格式？
修飾性的保存為 png24（支持半透明），png8。內容性的保存為 jpg。

6、有哪些可以學習的切圖教程
建議可以參考一下慕客網和網易雲課堂的前端切圖部分。

 

7、為什么要切圖，而不是整張圖都放到html去呢?

1，一次性加載一張大圖，會比較慢，效果就是進去后看到一張圖一點點加載
2，切圖后，一些橫向和豎向的重復性圖案，只需要一個像素寬的源圖就行，節省不少資源。如知乎頭部和網易雲音樂頭部導航條，整個背景可以之用一個像素寬的豎條，然后css控制橫向鋪開就可以了，這里要用一個像素寬的豎條,而非用一個像素點切圖是因為，有輕微縱向漸變。

3，對於一些設計稿中的元素，甚至不需要源圖，只需要取色, 全部鋪開就好了,那就更省了，如網易頭部。

作者：知乎用戶
鏈接：https://www.zhihu.com/question/38357171/answer/80031833
來源：知乎