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

更新日期: 2018-12-18阅读量: 1852标签: 图片

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" 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的汉堡


原文地址:https://www.cnblogs.com/wertantan/p/10134477.html  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1637

css如何控制图片不变形?

在做网页时会遇到许多的问题,有的时候会遇到图片变形的问题,我们该如何通过css控制图片不变形呢?下面我们来看一下通过css控制图片不变形的方法。

网页图片不存在时不显示默认图片

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。

使用 AVIF 图片格式

众所周知,一图胜千言,图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言,传输与解析一张图片的代价要远比千言大的多的多(目前上亿像素已经成为主流)。

解码 PNG 图片

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。

图片格式区别:png8,png24,jpg,jpeg,gif,webp

色彩丰富的、比较大的图片切成jpg格式,例如一些网站的banner图,WEBP因为体积小,正在被大量网站使用。网站加速的内容一半包含了WEBP这种格式,但是写代码必须考虑部分不支持webp,比如苹果系统的Safari浏览器就不支持。

flutter加载图片几种方式

加载本地图片:在项目根目录下创建名为 assets 的文件夹,将装有本地图片的自定义文件夹(假设取名为images)放在assets文件夹的目录下

webp图像格式

这是支持在互联网上无损和有损图像质量压缩的新格式。谷歌公司开发这种格式专为在网上迅速和方便地做好工作。其主要优点是,相对于其他图像格式,文件小,但图像质量相似。

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

图片下载的几种实现

通过浏览器自动下载。浏览器接收到二进制文件,自动转码下载。比如:window.open()通过xhr下载。ajax请求得到的是二进制文件,只能手动转码下载。

原生js 生成海报图_利用canvas合成图片的实现方法

目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!