服务购

现在，网站上的图片和视频数量持续增长，加载时间更慢，导致负面的用户体验，这种增长的主要原因之一是添加视频和吸引人的图片，旨在为网站带来更多流量，下面就给大家介绍使用简洁高端网站模板时如何优化图像来提高UX。

图像在网站上的影响可以戏剧性，增加网站访问者等待网页加载的时间。每过一秒都会降低网站的总体转化率和最终收入，因此希望尽可能优化您的图片和广告投放是非常有意义的。

不使用更高效、现代的图像格式

即使Google已经将其WebP图像格式支持到Chrome浏览器，而且微软在大多数Internet Explorer和Edge浏览器中对JPEG-XR也是如此，但是开发人员还是没有接受它们。 也许你不知道这些格式，或者太难以提供不同的图像格式到各种浏览器和设备。 因此，您可能会使用相同的JPG和PNG格式，而不能利用现代格式优化网站。

使用GIF格式嵌入短视频

可以依靠GIF图片格式在新闻网站，媒体网站和社交分享网站上显示短视频剪辑。虽然GIF格式很容易用于使用简单的HTML图像标记嵌入视频剪辑，但是对于捕获的电影，它是不高效的，因为文件是巨大的和慢的加载，尤其是在移动设备上，导致高带宽成本和高CPU利用率。

可以传递和嵌入相同的剪辑和动画。另一种方法是应用GIF文件的有损压缩，这导致轻微的视觉质量下降，但显着减小文件大小。

GIF文件还可以转换为MP4或WebM视频格式，嵌入剪辑和HTML5视频标记，而不是图像标记。

向所有用户提供2X图像

现代移动设备和笔记本电脑具有高设备像素比。 由于希望自己的网站在这些设备上呈现出色效果，因此可能会嵌入双重分辨率的图片。  这导致等待页面加载的时间浪费，并且不必要地增加带宽成本。

为每个DPR值创建不同的分辨率，并自动检测当前用户浏览器中的网页的DPR值。 这将使您能够向具有常规显示器和2x分辨率图像的用户提供常规图像给具有视网膜显示设备的用户。

不要浪费浏览器端调整大小

开发人员使用的常见快捷方式之一是使用浏览器侧图像调整大小，而不是调整服务器端的图像大小。 确保您提供的图片完全符合其所需的网站尺寸。 即使相同的图片应该被制成不同大小的缩略图以适应不同的页面，它是非常值得创建不同的缩略图，而不是提供一个大图片，并依靠浏览器来调整大小。

去除图像元数据

许多现代网站允许访客上传照片。无论是用户的个人资料图片还是来自最近旅行的共享照片，这些最初是使用现代相机拍摄的，这很可能将大量元数据引入到照片中。在大多数情况下，关闭这个元数据是一个很好的主意，但开发人员很少花时间这样做，这导致图像需要更多的带宽传输和较慢的用户浏览体验。

确保将元数据从图片和用户上传的照片中删除。剥离Exif信息时，请确保在丢失此信息之前根据其Exif数据将图像旋转到正确的方向。

以上就是关于如何优化图像来提高UX的内容，希望可以给用简洁高端网站模板建站的朋友提供一些思路。