前端开发中对图片的优化技巧有哪些?

时间: 2019-12-07阅读: 99标签: 图片

1.去掉无意义的修饰。

嗯,我会瞎说吗?除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?


2.不用图片。

嗯,切图是一件扯淡的事情!不要隔靴搔痒了少年,直接使用CSS替代图片来实现修饰效果吧!如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。将来CSS滤镜得到广泛支持后,还可以做到alpha混合、正片叠底等各种效果。


3.使用矢量图替代位图。

对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!


4.使用恰当的图片格式。

我们常见的图片格式有JPEG、GIF、PNG。基本上,内容图片多为照片之类的,适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。而GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。除了这些格式之外,Chrome、新版Opera、Android 4+支持WebP格式,IE 9+、IE mobile 10+支持JPEG XR。这两个新格式都支持无损和有损压缩,都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片,增加了开发成本,也增加存储成本。不过你省了流量或者相同流量下改善了图片质量,提升了用户体验。你会如何取舍呢?对了,别忘了使用优秀的图片编码器及合适的参数。好的图片编码器,尤其是有损图片格式的编码器,能通过算法或手动调整,获得更高的压缩比。


5.使用data url。

资源内嵌于CSS或HTML中,而不必单独请求。注意,多个地方都要使用的资源不一定适合用此优化方式,因为图片数据重复多了,增加流量。另外许多浏览器对data url有长度限制,注意资源的大小。


6.按照HTTP协议设置合理的缓存。

具体的缓存策略(如永久缓存+重命名)、部署策略(如反向代理、CDN等)这里就不展开了。


7.使用支持SPDY的服务器。

SPDY可认为是未来的HTTP 2.0的早期实现,Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。


8.资源的lazyload或postpone。

(lazyload:延迟到其他资源下载完成后再加载,postpone:延迟到元素可见再加载。)目前基本上都要用脚本控制。未来HTML和CSS会增加相关的控制属性。


9.资源的prefetch。

注意prefetch只是hint,Firefox会预取资源(如果网络空闲的话),而IE 9则是对该资源的hostname进行DNS预解析。如果你真的需要更强的控制,则得用脚本。注意:Chrome支持与prefetch相近但更进一步的,另外SPDY加入了与prefetch相近但语义不同的subresource link支持,这两个新特性我也没用过,有兴趣的可以尝试。

图片的其他优化技巧如字体图标、CSS Sprites等,不过我不推荐。用字体图标不如用SVG。使用了SPDY和data url后,CSS Sprites完全没有必要用了。

再有各种特定的图片问题,超出了一般优化的范畴。如许多手机浏览器有黑夜模式,其中有的浏览器允许定制黑夜模式;有的手机浏览器允许在用户开启不加载图片选项的情况下让开发者设置必须加载的图片(有点绕);又如许多手机浏览器有所谓云加速模式,即在服务器端对图片进行处理后再发送给客户端,应该返回怎样的图片给这些服务器有待研究和实践。


10. 最后是responsive设计

所需的图片优化,可能要产生多套不同大小和分辨率的图片,配合media query、以及srcset属性、picture元素、src-N等标准提案,这个话题比较大,尚未形成普遍认可的最佳实践,这里也不多展开了。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

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

vue引入图片

通过在vue文件引入scss样式文件;如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式,如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。

WPF 中如何创建忽略 DPI 属性的图片

WPF 框架设计为与 DPI 无关,但你依然可能遇到 DPI 问题。尤其是 Image 控件显示的图片会根据图片 EXIF 中的 DPI 信息和屏幕 DPI 自动缩放图片。对于 UI 用图来说这是好事

webpack 加载动态图片

所谓动态图片指的是接口返回的图片地址,这里的地址指的是本地的图片地址,而非网络图片的url。本地有一个 image 文件夹,存放需要用到的图片。按照接口返回的图片地址比对去加载。

微信小程序动态设置图片大小

image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了,特别是我们在做一些商品详情页的时候,需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢?

图片该如何优化来提高网站性能?

图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平。

解码 PNG 图片

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

阻止h5手机点击图片会有查看大图的功能

在H5页面,多次点击img标签时,会弹出当前的图片(效果类似查看),再点击,恢复部分手机点击图片会出现只看该图的功能,这个是手机自己浏览器自带的功能,这个时候只要将图片的冒泡冒泡阻止掉就可以了。

vue使用readAsDataURL实现选择图片文件后预览

方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容

js实现图片转base64格式,并压缩上传

需要用户上传身份证,并识别身份证的编号存储在后端,这里要求实现图片上传,并转为base64的格式,传给服务器失败图片的身份证号码。由于很多用户用手机拍摄的照片

nodejs实现二维码生成及图片合成

前端需要做分享功能。生成二维码后 在指定的图片上添加二维码和邀请码生成新的图片。1.使用 qr-code生成二维码;2.使用 text-to-svg 生成邀请码图片,字符转图片;3.使用gm工具合成图片

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全