首页 > 优化 > 关键词 > 网站优化最新资讯 > 正文

web前端图片极限优化策略

2016-01-07 11:45 · 稿源:oschina.net

随着web的发展,网站资源的流量也变得越来越大。据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力。

一、现有web图片格式

我们先来看下现在常用的web图片的格式:

几种文件格式的特点概述

baseline-jpeg

这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示。如果文件较大或者网络下载速度较慢,那么就会看到图片被一行行加载的效果,这种格式的JPEG没有什么优点,因此,一般都推荐使用Progressive JPEG

preogressive-jpeg

和Baseline一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储在JPEG文件中。打开文件过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以看到图片的轮廓知道正在加载的图片大概是什么。

__这两种jpeg格式文件的效果对比如下:

jpeg优势: 非常通用,JPEG在色调及颜色平滑变化的相片或是写实绘画(painting)上可以达到它最佳的效果。

jpeg劣势: 它并不适合于线条绘图(drawing)和其他文字或图示(iconic)的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果;

gif

GIF(Graphics Interchange Format)的原义是“图像互换格式”,GIF文件的数据,是一种基于LZW算法(串表压缩算法)连续色调的无损压缩格式。是目前web网页中十分常用的一种动画文件格式。 优势:

优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小 可插入多帧,从而实现动画效果

可设置透明色以产生对象浮现于背景之上的效果

劣势: 由于采用了8位压缩,最多只能处理256种颜色(2的8次方),故不宜应用于真彩图像。

png

png文件分为png8(8位透明png)、png24(256色png)、png32(多阶透明png),png的有点在于使用位图实现web上的透明图片,以实现比较好的体验。 

优势:

  • 支持256色调色板技术以产生小体积文件
  • 最高支持48位真彩色图像以及16位灰度图像。
  • 支持Alpha通道的半透明特性。
  • 支持图像亮度的gamma校正信息。- 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。
  • 使用无损压缩。
  • 渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。
  • 使用CRC循环冗余编码防止文件出错。
  • 最新的PNG标准允许在一个文件内存储多幅图像。

劣势:

  • 但也有一些软件不能使用适合的预测,生成的文件较大(IE6只支持PNG8)

webp

目前移动端Android4.0以上、PC端chorme 10+(14 ~ 16 有渲染bug)、opera 11+ 、safri均支持webp格式图片。 WEBP与JPG相比较,编码速度慢10倍,解码速度慢1.5倍,而绝大部分的网络应用中,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。但实际上,webp虽然会增加额外的解码时间,但是由于减少了文件体积,缩短了加载的时间,实际上文件的渲染速度反而变快了。

webp上目前可行的应用场景:

-1.客户端软件,内嵌了基于Chromium的webview,这类浏览器中应用的网页是可以完全使用webp格式,提升加载渲染速度,不考虑兼容。

-2.用node-webkit开发的程序,用webp可以减少文件包的体积。

-3.移动应用 或 网页游戏 ,界面需要大量图片,可以嵌入webp的解码包,能够节省用户流量,提升访问速度优势:

- 对于png图片,webp比png小了45%,但是缺点是你压缩的时候需要的时间更久了;劣势:

- 兼容性不太好, 只有opera,和chrome支持;

apng

简单来讲apng格式图片使用多个单张png连接起来的动画图片格式,支持全透明通道动画。相比于gif动画,没有毛刺,质量更高,但目前支持的浏览器并不完全。可以去can i use查看其兼容性。目前可用性相对较低,适用于对动画质量要求很高的情况。

  • 相关推荐
  • 大家在看
  • 如何将访客转化为潜在客户?这个8个网站优化策略了解下

    你是否已经将自己的网站优化到最佳状态了呢?通过优化来产生潜在客户是转化网站已经获得的流量的最好方法之一。然而,如果你认为在网站的主页上添加几个“点击这里”的CTA策略(注:Callto Action,行动呼吁),就能获取更多的潜在客户,很遗憾的说,这个想法大错特错。

  • SEO优化,4个独辟蹊径的策略!

    有的时候SEO工作就是一个数字游戏,每天看着数据的增长,不断的调整相关性的策略,但我们非常清楚,有的时候SEO优化会面临各种调整,特别是同行业之间的竞争。

  • 优速快递聚力品效,不断实践 不断优化

    品效驱动货量 货量牵引收益收益拉动盈利 加速赢取未来品效、品效、品效。打牢集团底盘,以持续、稳定的品效服务驱动网络盈利能力,是集团决胜千里的不二法宝。加之,当前疫情所带来的挑战与机遇的双面性影响,我们更要聚焦品质和效率,伺机而起,不放过任何一个逆势而起的机遇。基于此, 4 月 17 日集团在全网吹响了为期 120 天的“品效提升季——全网在行动”战役号角。即集团总部高管、省区高层管理人员集体深入分拨中心操作一线

  • 车轮"加油"频道,深入优化客户体验

    近年来,得益于我国经济高速发展,人们的生活水平稳定提升,汽车消费呈现井喷之势。众所周知,汽车的使用离不开汽油的支持,因此,汽车加油成为用车养车中的主要消费项目。而使消费者在加油中感到便利和实惠,在当今社会人们日益忙碌,压力越来越大的情况下,显得尤为重要。专注于全国汽车生活服务领域的移动互联网公司车轮互联想车主所想,解车主之难,在全国范围内推出了加油服务,"价格优惠"和"一键加油"是其服务的亮点。目前,

  • 阅文优化新合同,网文产业的质变何时才能到来?

    距离阅文集团与网文作者的“合同纠纷”已隔一月,昨天,这一事件终于有了阶段性的进展。 6 月 3 日,阅文集团新管理层发布了针对旗下作者的“单本可选新合同”。阅文方面表示,该合同根据不同授权分为三类四种,取消单一格式合同,并对此前充满争议的旧合同进行了十余项修改,以长图的形式为网友们划出重点。 阅文新领导团队在这份合同中表现出来的尊重与诚意,获得了网文大神与业内专家的支持与认可。 与此同时,作为内容产业的?

  • 教你挑选香烟陈列优化神器——自动补货推进器

    自动补货器、香烟推烟器、卷烟推进器,一款陈列神器——推进器已被应用在各大商超。众所周知,为提升店铺档次,降低人工成本,减少损耗,提升满陈列效率,会想到借助自动理货器对商品进行整理,也就是——货架自动推进器,我们以香烟推进器作优势分析:1、使用了香烟推进器,丰富了香烟陈列场景,完善香烟陈列场景化,使不同的香烟陈列美观,丰富香烟陈列效果。2、一体成型工艺降低了人工组装成本,提高生产效率。和陈列柜,货架,?

  • 信息流优化策略与SEO搜索排名,有关联吗?

    最近,在和SEO你问我答群里小伙伴,私下交流的时候,总是在说一些流量获取的问题,而最为常讨论的情况就是SEO流量与信息流平台的流量。

  • 壹米滴答“品效提升季”优化全网服务品效

    品效驱动货量 货量牵引收益收益拉动盈利 加速赢取未来品效、品效、品效。打牢集团底盘,以持续、稳定的品效服务驱动网络盈利能力,是集团决胜千里的不二法宝。加之,当前疫情所带来的挑战与机遇的双面性影响,我们更要聚焦品质和效率,伺机而起,不放过任何一个逆势而起的机遇。基于此, 4 月 17 日集团在全网吹响了为期 120 天的“品效提升季——全网在行动”战役号角。即集团总部高管、省区高层管理人员集体深入分拨中心操作一线

  • 你不知道的,抖音直播间流量优化细则

    大批的新人主播涌入抖音,不少小白主播开始遇到没人看、没人买、不会推广、不会合作的各种问题,希望今天的文章能够帮你解决这些问题。

  • iOS 14必升理由?iPhone摄像头大幅优化

    iOS 14已经正式公布,并面向开发者推送升级,公测版Beta1预计7月份上线。iOS 14带来了主屏幕小部件(支持层叠)、App Library自动归类聚合、App Clips小程序、弹窗式来电界面、消息置顶、地图

  • 微软准备Windows Core OS:全力优化Chromium使用体验

    微软正在全力准备新的Windows系统Core OS,作为Windows 10的模块化版本,该软件旨在容纳多种不同外形尺寸的设备。除了类似Chromebook的廉价上网本,Core OS还可在双屏/折叠设备、以及HoloLens 2

  • 阅文发布优化版新合同 推出“单本可选新合同”

    今日,阅文集团宣布发布“单本可选新合同”,阅文称,该合同针对此前合同中的十余项条款进行了大刀阔斧的改革,作家可以登录作家助手APP内页面查看。此次合同匹配作家不同的发展需求分为三类四种,取消单一格式合同,推出了基础协议、授权协议、深度协议,满足不同作家的发展诉求。

  • 小米10音频负优化?官方实测:没有变过 音响效果完全一样

    6月29日消息,针对米粉提出的小米10系列音频不同版本有差异、是否存在负优化这一问题,小米手机系统软件部总监张国全做出回应。张国全表示,工程师端午节假期在实验室分别测试了小米10、小米1

  • 中国联通浙江分公司回应整改:年底前完成产品优化

    日前,浙江省消保委对中国联通浙江分公司就腾讯王卡套餐“专属流量不专属,免流软件不免流”等相关问题进行了约谈,并提出了整改要求。近日,中国联通浙江分公司向浙江省消保委发来整改回复函,并提出了相应的整改方案。

  • 英特尔发布第三代至强扩展处理器 首款针对AI进行优化

    英特尔公司在北京正式发布了第三代英特尔至强扩展处理器及全新的AI软硬件产品组合,旨在进一步助力客户在数据中心、网络及智能边缘环境中加速开发和部署AI及数据分析工作负载。值得一提的是英特尔Stratix10 NX也是英特尔首款针对AI进行优化的FPGA。此次英特尔推出的硬件和软件产品组合亮点包括:第三代英特尔“至强”可扩展处理器是首批内置bfloat16支持的主流服务器CPU,而bfloat16则是英特尔深度学

  • Win10 5月更新谜之Bug:已修复的磁盘优化问题再度出现

    Windows 10 May 2020升级范围已经扩大,不过一些用户更完后发现,之前微软修复的问题,又重新出现了,相当迷幻。根据用户的反馈和外媒的复现测试,升级 Windows 10 Version 2004 功能更新会导

  • 底层优化+ AI 能力,ColorOS 7.2让你的OPPO手机更流畅

    2019 年 11 月 20 日,「轻快无边界」的 ColorOS 7 正式发布。围绕「快」,ColorOS 7 除了带来系统底层优化,同时加入诸多效率操作,让 ColorOS 7 体验更畅快。2020 年 6 月 5 日,ColorOS 7.2 随 OPPO Reno4 系列一同发布,该版本在拥有原本的「轻快」体验之外,还带来全新的「AI 应用预启动」功能,大幅提升应用启动效率,帮助用户快人一步,决胜于毫秒之间。AI 自主学习,越用越懂你ColorOS 7.2 内置 AI 模型,能自主学习用户在

  • 全面屏时代的贴心优化,ColorOS 7 这几点值得了解

    从手机发展历程看,能显示更多内容的大屏受到用户的喜爱,甚至有不少声音表示大屏用过就回不去了,所以现如今各家都在控制手机尺寸的情况下,想尽办法提升屏占比,为用户带来更大的屏幕。但大屏除了带来更强视觉冲击和内容,让人机交互也迎来了新的挑战。如何帮助用户最有效率地利用手机大屏成了厂商们关注的问题。其中 ColorOS 给出的解决方案就非常具有参考意义,推荐手持 OPPO 手机的用户尝试。浮窗气泡习惯于在手机上看视频的?

  • iOS 14、iPadOS新细节曝光:重新设计UI、优化手写功能

    明天凌晨开幕的WWDC开发者大会,iOS 14等一大波儿新系统可能并不是苹果的重点,而真正的是主角是基于ARM自研Mac处理器。据最新消息称,即便重点不在新系统上,但苹果依然为iOS 14准备了不少新

  • 微软敲定Win10一年两更策略:春季上新功能、秋季主优化

    对于Windows 10的更新策略,微软已经明确下来,一年两次大的更新,分别是春季和秋季,而更新上的侧重点也不太一样。在维持一年两个功能更新不变的情况下,春季发布的功能更新将包含重大改进并

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天