網頁上常用的圖片格式及使用場景
阿新 • • 發佈：2018-12-17
1、jpg:有失真壓縮格式
靠損失圖片本身的質量來減小圖片的體積，
適用於顏色豐富的影象;(畫素點組成的，畫素點越多會越清晰 )
2、gif：無失真壓縮格式
靠損失圖片的色彩數量來減小圖片的體積，支援透明，支援動畫，
適用於顏色數量較少的影象;
3、png:無失真壓縮格式
損失圖片的色彩數量來減小圖片的體積，支援透明，不支援動畫，是fireworks的 原始檔格式，
適用於顏色數量較少的影象;
4、svg:可縮放向量圖形
svg 影象在放大或改變尺寸的情況下其圖形質量不會有所損失，使用 XML 格式定義圖形
與其他影象格式相比，使用 svg的優勢在於：
- svg 可被非常多的工具讀取和修改（比如記事本）
- svg 與 jpg 和 gif 影象比起來，尺寸更小，且可壓縮性更強。
- svg 影象可在任何的解析度下被高質量地列印
- svg 可在影象質量不下降的情況下被放大
- svg 影象中的文字是可選的，同時也是可搜尋的（很適合製作地圖）
- svg 檔案是純粹的 XML
當然我們可以將svg程式碼打包到 js 檔案中，以減少http的請求次數
svg格式的圖片可以通過阿里的 iconfont 圖示庫進行生成，或者使用線上工具將其他格式轉svg格式。
<svg fill="#f00" class="icon" width="200" height="200" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M961.495434 569.698097c0-46.329165-24.746614-83.740216-58.366316-91.661629 14.832823-19.019169 22.953781-43.330878 22.953781-69.222571 0-68.674079-44.526099-143.574976-119.109772-200.36233-80.052221-60.953234-183.820586-94.52177-292.187689-94.52177-108.367103 0-212.135468 33.568537-292.187689 94.52177C148.015102 265.23892 103.487979 340.139817 103.487979 408.813896c0 24.414039 8.532327 49.196469 24.278963 68.922742-34.293037 7.238868-59.690474 45.024449-59.690474 91.961458 0 36.45426 0.044002 93.915973 45.191248 109.612467 2.240017 8.280594 5.619998 16.299221 10.917654 23.444968-0.86981 2.272763-1.866511 4.729721-1.866511 7.308453l0 84.014462c0 62.144362 51.559283 112.179942 113.703645 112.179942L793.383622 906.258389c62.144362 0 111.763456-50.036603 111.763456-112.179942l0-84.014462c0-1.39272 0.327458-2.75167 0.063445-4.066619 5.557576-7.416923 9.590426-16.394389 11.498892-26.751271C961.223235 663.771659 961.495434 608.327906 961.495434 569.698097zM247.424182 241.057171c72.959685-55.552224 167.910221-86.144986 267.36228-86.144986s194.401572 30.592762 267.361257 86.144986c64.466244 49.084928 102.953813 111.288642 102.953813 167.248142 0 46.731324-34.140565 67.141166-67.977207 67.141166L212.308407 475.446479c-33.346479 0-67.838038-24.795732-67.838038-67.141166C144.470369 352.346837 182.958962 290.1421 247.424182 241.057171zM139.795906 516.377704l72.512501 0 604.813872 0 72.652693 0c17.59268 0 30.737048 28.120454 30.737048 52.786227 0 62.72253-8.585539 71.743998-25.102724 72.856331-9.705036-0.743944-17.955954-4.508687-26.078958-11.07115-7.852852-7.251148-16.011672-16.892739-23.642466-25.979698-5.676279-6.757914-11.56029-13.726629-17.776875-20.337187-14.745842-16.594957-32.04688-31.153534-55.762001-32.267914-1.081635-0.064468-2.171456-0.094144-3.272533-0.094144-31.381731 0-53.488215 25.338085-74.866105 49.838082-2.131547 2.441609-4.270257 4.89345-6.41613 7.315616-15.771195 17.185404-31.78696 32.781614-46.61876 33.002648-0.966001-0.007163-1.927909-0.073678-2.886747-0.197498-14.170744-2.184759-31.262004-21.629623-46.444798-38.911218-1.673106-1.904373-3.350304-3.811816-5.03569-5.714142-18.645662-22.240537-39.998993-45.326325-69.857021-45.326325-0.188288 0-0.372483 0.01228-0.559748 0.014326-0.178055-0.002047-0.353041-0.014326-0.532119-0.014326-29.965475 0-52.426023 24.391527-74.147744 47.978734-18.576077 20.169365-37.766139 41.001833-57.387012 42.129516-19.370163-0.580215-37.173644-20.029172-55.999408-40.642652-11.82635-12.948917-23.867594-26.130124-37.446867-35.627429-10.644431-7.810896-22.252817-13.106506-35.513842-13.641695-1.552356-0.11768-3.120061-0.196475-4.717442-0.196475-34.564213 0-57.103556 29.239951-75.18026 53.92312-13.974269 17.913998-27.2619 34.612309-41.981137 36.090986-14.386662-1.013073-24.228821-9.575076-24.228821-73.129554C109.058858 544.499182 122.203226 516.377704 139.795906 516.377704zM847.61885 688.293145 179.603541 688.293145c-9.021467 0-16.219403-3.584642-21.049409-9.198499 19.542078-7.962346 33.914414-27.291576 47.913243-46.447868 0.49221-0.673335 0.985444-1.188058 1.478677-1.862417 0.118704-0.153496 0.2415-0.228197 0.360204-0.381693 14.758122-18.922978 28.706809-36.742832 44.288692-37.015032 5.176906 0.621147 10.629081 3.436262 16.228613 7.573489 8.242731 6.64535 17.187451 16.765849 25.962302 26.706245 23.066345 26.130124 49.210795 55.751768 87.679945 55.751768 0.425695 0 0.841158-0.020466 1.263783-0.027629 0.427742 0.007163 0.848321 0.031722 1.280156 0.031722 38.228673 0 64.285119-29.191856 87.273692-54.94745 15.22782-17.059538 30.959106-34.654264 43.889603-35.164894 11.103896 0.453325 25.731034 15.673981 39.401382 31.069623 1.284249 1.535983 2.568499 3.076058 3.847631 4.615111 19.891026 23.925922 42.269709 50.846038 75.065649 54.102199 2.0241 0.214894 4.079922 0.328481 6.169513 0.328481 0.081864 0 0.160659-0.00614 0.243547-0.00614 0.083911 0 0.164752 0.00614 0.249687 0.00614 32.633235 0 56.297191-23.342638 76.900438-46.573735 2.403746-2.619664 4.76963-5.239328 7.102768-7.822153 15.127536-16.749476 32.273031-35.735899 44.071751-35.735899 0.445138 0 0.884137 0.052189 1.327228 0.082888 8.052396 0.957815 17.271362 8.590656 26.521027 18.312064 3.831258 4.319375 7.927553 9.293667 12.446473 14.887059 9.485025 11.740392 20.062941 24.792663 32.985252 35.438117 9.496282 8.562003 19.820418 14.903431 31.335682 18.377556C868.843244 687.202301 859.853499 688.293145 847.61885 688.293145zM864.21483 794.077424c0 39.545668-31.28554 71.247694-70.831208 71.247694L236.021481 865.325118c-39.545668 0-72.771397-31.702026-72.771397-71.247694l0-63.828724 16.353456 0L847.61885 730.248699l16.59598 0L864.21483 794.077424z" /><path d="M415.662885 262.32966c11.863189 0 21.516036-9.650801 21.516036-21.516036s-9.651824-21.516036-21.516036-21.516036c-11.864212 0-21.516036 9.650801-21.516036 21.516036S403.797649 262.32966 415.662885 262.32966z" /><path d="M307.058374 377.080148c11.863189 0 21.516036-9.650801 21.516036-21.516036s-9.651824-21.516036-21.516036-21.516036c-11.864212 0-21.516036 9.650801-21.516036 21.516036S295.194162 377.080148 307.058374 377.080148z" /><path d="M618.526175 262.32966c11.863189 0 21.516036-9.650801 21.516036-21.516036s-9.651824-21.516036-21.516036-21.516036c-11.864212 0-21.516036 9.650801-21.516036 21.516036S606.66094 262.32966 618.526175 262.32966z" /><path d="M517.094018 377.080148c11.863189 0 21.516036-9.650801 21.516036-21.516036s-9.651824-21.516036-21.516036-21.516036c-11.864212 0-21.516036 9.650801-21.516036 21.516036S505.229806 377.080148 517.094018 377.080148z" /><path d="M727.129662 377.080148c11.863189 0 21.516036-9.650801 21.516036-21.516036s-9.651824-21.516036-21.516036-21.516036c-11.864212 0-21.516036 9.650801-21.516036 21.516036S715.26545 377.080148 727.129662 377.080148z" /></svg>
上面就是一個svg程式碼，可以通過width/height改變圖片的大小，fill來改變圖片的顏色，如下圖為 寬200px，高200px的漢堡
