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

时间: 2018-12-18阅读: 1731标签: 图片

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

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

object-fit和object-position_定义图片和视频元素在容器内如何显示的css属性

如果我们需要让该元素占据固定的宽高大小,而又不希望图片被拉伸变形,可以在img标签外套一个div(或其他父级元素),然后将固定的宽高加在父级元素上,这样img标签本身就可以只设定宽或高,让另一边自适应

图片懒加载及异常处理

在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示

玩转html2canvas以及常见问题解决

前端小伙伴经常会遇到页面截图或者把网页中指定的区域(某个大div)的内容转换成png的图片。这个时候常常会用到html2canvas库来实现,js真的很强大。

前端获取图片exif信息

对又是我,每天都有新的需求。这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。pc、android、ios 都支持了,现在就缺少 web 这边上传的图片了。

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

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

js上传图片,利用canvas实现图片压缩

最近项目中的一个基础功能-----手机上传图片:1、利用canvas进行压缩(这个应该都比较熟悉)2、利用exif-js获取照片旋转角度属性,因为有些手机机型会因为拍照时手机的方向使拍的照片带一个旋转角度的属性

前端下载图片的N种方法

前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法。

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复,背景图像的位置是根据 background-position 属性设置的

图片下载的几种实现

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

在 Chrome 75中将支持图片懒加载

Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 loading 将新增一个属性:lazy。为延迟加载提取和应用JavaScript库的重要性(对于跨浏览器支持)

点击更多...

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