175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

网站建设中如何优化图像以获得最佳用户体验

2019-03-27 来源:小领

领创时代一直以来致力于青岛画册设计青岛网站建设服务,积累了大量的青岛画册设计和青岛网站建设的经验。领创时代的设计师也很乐意将我们的经验和创意分享出来,帮助需要青岛画册设计的客户。


网站建设中优化图像是非常必须的一件事情。与网页建设的其他方面一样,图像优化部分是非常有效的,部分是数据驱动的最佳实践,也是整体可测试的。网站设计人员应遵循以下五种图像优化最佳实践:

 

1.从网站建设的初始设计阶段就要开始做图像优化


在此阶段决定图像的大小,复杂性和选择可以帮助确保页面在启动时不会过于“沉重”。
例如,虽然不是真正意义上的“图像”优化,但是当浏览器加载资源的时候,使用大量的特殊字体会大大增加页面加载时间。要获得最佳的用户体验,请限制您选择的特殊字体。

 

2.为您拥有的图像类型选择适当的文件格式


设计人员和开发人员犯的第一个错误是对网站上的每个图像使用错误或相同的图像格式。可以使用以下建议以确定给定图像的正确格式:

照片绝大多数是JPEG文件,其他具有数千(或数百万)颜色的复杂图像,细微的颜色渐变,以及不需要图像透明度的图片。
具有最小复杂性的矢量图像通常最好使用SVG(可缩放矢量图形),其提供能够使用单个网站资源很小而又无损的高质量的PC,平板电脑,移动和视网膜显示器上可以观看的图像。
具有少于256种颜色的LOGO,插图,图标和类似图像通常使用GIF进行优化,只要它们仅需要基于蒙版的透明度即可。
多功能PNG格式对于需要Alpha透明度和分层的图像是非常有必要的。PNG文件往往比其他格式更大,具体取决于它们的优化程度。
没有声音的简单动作;高度和宽度小于几百个像素;最好使用GIF而不是视频文件制作。
不经常改变的基于矢量的图标的大型库可以最佳地用作诸如TTF / OTF或WOFF的格式的CSS2 网站字体。
在某些情况下,通过CSS和JavaScript绘制或动画内容是一个重要的优化方式。
对于与网站的用户界面,导航和一般浏览器布局相关的图像集合,您可以实现进一步优化,使用所有这些图像创建单个较大图像“精灵”,然后通过CSS或JavaScript从中选择适当的图像资源。这可以减少浏览器所需的往返次数和新的连接次数,尽管随着HTTP / 2采用率的增加,这可能会变得不那么重要。

 

3.通过肉眼优化图像


一旦选择了合适的格式,请确保图像尽可能压缩而不会牺牲质量。

JPEG文件采用有损压缩,这意味着在优化时必须平衡质量和文件大小。“最高”100%质量JPEG和“低质量”30%JPEG之间的差异可能令人震惊。尝试将质量降低,然后一次拨打10%,直到达到可接受的水平。务必仔细检查原始资产以进行最终测试。

要通过眼睛优化GIF文件,请使用显示图像所需的最少颜色数量,并测试不同的调色板尺寸以确保质量。16色GIF和256色GIF之间的差异可以是几千字节。根据图像的不同,您可以进一步缩小调色板以节省空间。

优化PNG文件时,尽可能尝试使用PNG-8格式。这些限制为256色调色板,但文件大小明显小于PNG-24文件。最近的工具,如ImageAlpha,优化了PNG-8图像中的Alpha透明度,部分是将它们转换为包含Alpha透明度的PNG-8图像。

除了典型的设计工具,ImageOptim还是优化PNG,GIF和JPEG图像的特殊应用程序。使用此工具可以轻松地将总图像体积减小并使加载时间减半。


4.使用最适合您网站的内容


每个网站,场景和受众都不同,因此您的图片不应添加特定的数字。

解决此问题的最好的方法是通过将所有网站资源(HTML,CSS,JavaScript,图像,视频和其他资源)的大小相加起来计算网站的总页面权重。然后,您可以使用计算器工具找出下载到用户浏览器的内容可能需要多长时间。请注意,实际下载和渲染时间可能比此估算值高出25%到50%。

话虽如此,尽可能使用200KB以下的图像 - 较小的文件大小总是更好!尝试将总页面大小控制在1兆字节以下。

 

5.给图像使用给有意义的名字

 

尽管我们主要讨论图像的文件大小优化,但不要忘记基础知识。名为“red-shiny-car-part.jpg”的网站图片包含的搜索引擎优化信息比“image1.jpg”更多。

有效的图像优化看起来像是一种高性能,快速加载,移动响应的用户体验。除此之外,它取决于网站。引人入胜的引人注目的网站,如Wolf-Gordon,Bryan Cave和Winston&Strawn,可以利用优化的图像来实现卓越的用户体验。虽然优秀的图像优化会影响网站的性能和搜索引擎优化的因素,但大多数公司最关心的是给访问者留下积极的印象。与任何第一印象一样,最吸引人的体验始于最佳图像。

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=92
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov.com 版权所有
鲁公网安备37020302372323
ICP证: 鲁ICP备18056479号

关注领创公众平台

添加官方微信

175 6191 5976