如何优化外贸网站建设中手机端的图像
移动端对文件加载的速度有要求。手机网站大的速度太慢,就会导致用户体验不佳。

那么图片将是手机网站中一个重要的优化对象,如何优化您的手机网站速度,占总页面重量的68%。然后,在第2部分中,我们研究了如何减少图像  对移动网站速度的影响,包括如何确保您的图像可以访问。这主要集中在删除不增加价值的图像,并使您更加努力地使用它们。

但是,如何确保您的移动网站上的任何图像轻巧,响应设备,并使用最佳格式来结合速度和质量?本专栏专注于优化移动图像,包括响应图像和其他巧妙的方法来阻止图像破坏移动用户体验。


图像优化的平衡动作

图像优化的问题是没有硬而快的规则。图像优化将始终是用户体验,吸引力和页面性能之间的谨慎平衡。

“因为手机上的屏幕很小,所以太小的图像可能会提供太少的信息,而且太大的图像可能会减慢页面的速度。我们建议您从适度的尺寸图像开始,并允许人们放大(或下载较大的图像)。

大多数时候,巨大的图像不是一个好主意 - 他们的信息密度很低,他们要求人们等待页面加载和/或向下滚动以获得更多的内容。这是响应式单列设计的常见问题:因为图像应该填满整个容器宽度,所以我们经常会遇到与它们的大小相比传递的信息很少的巨大图像。“
对于移动图像应该有多小,没有一个固定的规则 - 它是质量和页面大小之间的折衷。但是一个很好的方法是对100个最受欢迎的网站进行基准测试。根据httpArchive,平均JPG为29KB,平均PNG为16KB。

降低图像的重量部分在于将图像保存在适当的尺寸和分辨率(像素数)上,部分地关于压缩图像。一些创意工具,如Photoshop,将承担一些压缩,但通常还不够,特别是像较大的图像类型,如PNG。

有许多工具可以非常有效地压缩图像单独或批量的图像。例如,使用TinyPNG压缩上面的主页图像,导致重量减少79%。

您应该使用不同尺寸的图像进行移动,平板电脑和桌面?

当为手机,平板电脑和桌面设计单独的网站时,无论是通过专用网址(site.com和m.site.com)还是通过单一网址(自适应网页设计)投放不同的网站,隐含的是图像应该是适合该类别中最大的设备。

响应式网页设计(RWD)的位置可能不太清楚。使用RWD,原则是为不同的设备提供相同的网站,使用CSS根据设备的功能和屏幕尺寸格式化内容。


许多网站在桌面上提供与在移动设备上一样的图像 - 移动版本只是缩小到适合。

网页HTML告诉浏览器哪些图像为最大宽度的屏幕选择,如果图像应该占据屏幕宽度的全部或部分。

以前,一些开发人员将使用JavaScript来指定使用不同的图像,但使用HTML < 图片 >元素应该更有效率,减少额外的代码和减慢页面加载时间的请求。

现在,我们有响应图像规范:< picture >元素,具有srcset [替代图像源集]属性和大小属性,可以定义应为哪个视口宽度(或允许浏览器)传送哪个图像从选择的图像中做出最合适的选择)。

该规范现在得到浏览器的很好的支持,开发人员应该理想地使用它,而不是使用JavaScript来实现同样的目的。“
响应性的图像在行动中:一只狗更小的更小的设备。 资料来源:Responsive Images社区小组

谁在使用响应式图像?

浏览亚马逊,Facebook和BBC等主要网站的源代码,证实没有人使用< picture >元素来提供响应式图像。

他们会从中受益吗?为每个平台提供不同的图像可能有以下几个优点:

允许网站在桌面上显示更大,更高分辨率的图像。
减少图片尺寸和总页面重量,从而加快移动装载时间。
使移动网站能够在移动设备上显示放大的图像。(注意上面的狗的裁剪图像)。
零售商可以在移动设备上显示移动友好的英雄图像,同时在较大的显示器上贴上传统的包装照片。

移动SEO:SEO表现真的很重要的3个方面 到目前为止,我们对Google的新主页了解甚么 你需要知道的关于视觉搜索的一切(到目前为止) 移动网站设计的终极规律:娱乐用户和驱动转换
为您的图像找到最佳格式

根据httpArchive,用于移动/移动设备的站点中最常用的图像格式为JPEG 46%,PNG 28%,GIF 23%和SVG 1%。

图表显示:格式的图像请求。 JPG最受欢迎,46%。 资料来源:httpArchive 2017年2月

使用不适当的图像格式可以增加文件大小,并在图像缩放到不同的屏幕尺寸时实现质量。

网页图像有两种类型:光栅和矢量。第一个由点组成(如数码照片),而第二个由线条和形状组成。JPEG,PNG和GIF是光栅。SVG是一个向量。SVG是一种不是广泛使用的新格式(但是),但是建议用于本课程的响应式设计网站,用于Google和Udacity的响应图像。

每个网站设计师都有不同的意见和最喜欢的格式。您需要研究自己的公司政策,但一般来说:

JPEG最常用于网络照片
GIF对于动画以及简单的图形,图标和徽标是常见的
PNG是更高质量的图形,标志,图标和其他插图和具有图形效果的照片的常见问题
SVG适用于图形和标志,页眉 - 由插画师设计的东西。
有关格式类型和大小的更多信息,请参阅Google 优化图像的指南  。

传统图像的替代品

网页由许多小图像组成,如图标和按钮。如果这些是使用单独的GIF / PNG / JPEG图像,它们都增加了页面大小,并且每个都需要一个单独的浏览器请求,这可能会减慢页面加载时间。

有助于缩小页面大小和图像请求的三种方法有:

CSS精灵 - 将较小的图形集合到一个单一的CSS文件中。NB超载图形太多或太大的精灵将产生反效果。
图标字体 - 是作为单个文件发送的图标库。
CSS形状 - 是使用CSS构建的形状,而不是传统图像
迈克D'Agruma领导前端Web开发者,电子创意集团:

“为了节省文件大小,我通常不要加载更大,更受欢迎的图标库,并使用Fontastic创建自己的自定义图标字体。这种方法在各种各样的层面上工作得非常好:1)由于我只使用少量的自定义图标,所以字体文件的大小要小得多; 2)使用SVG创建图标,确保其在设备上非常清晰; 3)您无法击败此选项的灵活性,因为字体图标是非常可定制的CSS。

安全准时,文件大小和服务器请求的另一个好方法是使用CSS创建形状 - 您可以创建大多数形状,并添加尽可能多的效果和过渡,如您想要的CSS。

用于改善感知加载时间的Web设计技术

当你修剪了脂肪,删除了不必要的图像并优化了剩余部分,但是页面仍然没有足够的加载 - 你做什么?作弊。

确保最重要的东西首先加载​​,Raluca Budiu说:

“当页面加载时,请确保首先加载文本,以便人们可以开始扫描内容。随着图像的加载,不要随便洗涤已经加载的内容 - 这会导致读者在页面上丢失它们的位置,有时甚至会点击错误的链接,因为正确的目标意外移动。

负载时间和实际负载时间之间存在差异。对用户而言重要的是他们正在查看的内容,或者可用的内容。他们不想盯着一个空白的屏幕,而浏览器读取他们可能永远看不到的图像。
在线咨询
索要报价
返回顶部