成都web前端培训
成都达内金融街中心

18628200088

热门课程

【成都达内】图片效果觉定页面质量

  • 时间:2018-02-11 17:04
  • 发布:达内杨老师
  • 来源:达内

web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式,即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。

1.选择正确的格式

如果不能舍弃图片,确定哪种格式更合适就很重要了。先要在矢量和光栅图形之间做出选择:

矢量图形 :分辨率独立,通常体积更小。非常适合logoicon和简单的图形,包括基本形状(线,多边形,圆和点)

光栅图形 :呈现更详细的信息,比较适合相片。

做出决定后,可以选择以下几种格式:JPEGGIFPNG–8PNG–24,或新的 WEBP  JPEG-XR 格式。有了这么多的选项,如何确保我们做出正确的选择?以下是找出佳格式的基本方法:

JPEG :颜色非常丰富的图片(例如照片)

PNG–8 :色彩相对单一的图片

PNG–24 :局部透明的图片

GIF :动图

Photoshop可以通过各种设置,例如降低质量、降低噪音或色彩数量来优化以上每一种格式。确保设计师了解上述性能实践,并能够使用正确的方式优化相应格式的图片。如果您想了解更多如何处理图片,请阅读 Lara Hogan 的好文 Designing for Performance 

2.试用新格式

图像格式有几个较新的玩家,即WebPJPEG 2000  JPEG-XR。它们都是由浏览器厂商开发的:Google  WebPApple  JPEG 2000  Microsoft  JPEG-XR

WebP是受欢迎的竞争者,支持无损和有损压缩,这使得它非常灵活。 无损的 WebP  PNG 26%,比 JPG 25-34% WebP 有着74%的浏览器支持,它可以安全地进行降级,多可节省1/3的传输字节。JPG  PNG 可以在 Photoshop 和其他图像处理应用程序以及命令行界面( brew install webp )中转换为WebP

3.用工具和算法进行优化

即使使用了高效的图像格式,也不应跳过后处理优化 。这一步很重要。如果您选择了尺寸相对较小的 SVG,它们也是可以再次压缩的。SVGO 是一个命令行工具,可以通过剥离不必要的元数据来快速优化 SVG。另外,如果您喜欢Web界面或受操作系统的限制,请使用 Jake Archibald  SVGOMG 。因为 SVG 是基于 XML 的格式,它也可以在服务器端进行 GZIP 压缩。

4.响应式图片:十年前,我们使用一种分辨率,就可以为所有人服务,但时代变化太快,现今的响应式 Web 已非往日可比。

srcset 属性:在分辨率切换方案中效果——即当我们需要根据用户的屏幕密度和大小显示图像时。基于 srcset  size 属性中的一组预定义规则,浏览器将选图片,相应地提供给视口。这项技术可以带来很大的带宽和请求节省,特别是对于移动用户。

picture 元素:通过为不同情形提供不同图片(通过媒体查询进行测试),无论什么分辨率,我们都能始终将图像中重要的元素保持在焦点。

5.使用图片 CDN 进行分发

CDN可以很好的解决重图片网站的复杂度,包括响应式服务与图片优化。虽然产品不同(价格也是如此),但是大多数方案都是根据设备和浏览器,调整大小、裁剪来确定哪种格式适合用户。甚至更多——它们可以压缩、检测像素密度、水印、识别面部,并允许后置处理能力。借助这些强大的功能,和将参数附加到URL的能力,以用户为中心的图片服务变得十分容易。

免责声明:本文由成都html5培训小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。

上一篇:iPhone X 夜间人脸识别无影响
下一篇:【成都达内】2017web发展态势分析
选择城市和中心
贵州省

广西省

海南省