网页上常用的图片格式及使用场景

Posted 2021-01-28 wertantan

1、jpg:有损压缩格式

靠损失图片本身的质量来减小图片的体积，

适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

2、gif：无损压缩格式

靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，

适用于颜色数量较少的图像;

3、png:无损压缩格式

损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，

适用于颜色数量较少的图像;

 

4、svg:可缩放矢量图形

svg 图像在放大或改变尺寸的情况下其图形质量不会有所损失，使用 XML 格式定义图形

与其他图像格式相比，使用 svg的优势在于：

1. svg 可被非常多的工具读取和修改（比如记事本）
2. svg 与 jpg 和 gif 图像比起来，尺寸更小，且可压缩性更强。
3. svg 图像可在任何的分辨率下被高质量地打印
4. svg 可在图像质量不下降的情况下被放大
5. svg 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
6. 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的汉堡