网站建设如何优化图像？9大技巧

如今，“对速度的需求”已成为每个网站上的重要清单。那么为何不？速度的提高直接负责将流量转化为付费客户。

任何行业的任何人都希望提高其网站的加载速度，从而改善用户体验。此外，别忘了，网站速度的提升也将网站的排名提升到搜索引擎结果页面上更具竞争力的位置，并提高了网站的核心活力。那么，如何实现对速度的需求呢？答案是图像优化。

什么是图像优化？

图像优化是一种以适当的格式，大小和分辨率提供高质量图像的过程，同时将它们保持在压缩的大小。如果操作正确，图像优化不仅可以改善网站的性能，还可以改善某些其他指标，例如：

• 页面加载速度；
• SEO排名；
• 兑换率;
• 用户参与度；
• 用户体验;
• 资源下载时间。

但是，如果遵循一些现代技巧，则可以加速图像优化过程以提高效率。ImageEngine凭借在图像优化行业的多年经验，精选了一些技巧，可以在2021年及以后帮助企业。

2021年完美图像优化的提示

在本文中，概述了优化图像的前五个提示，以帮助您最大限度地利用商机。包括的所有技巧均以全面的研究和在图像优化行业的多年经验为后盾。 

正确的格式问题

在优化过程中，选择正确的图像格式非常重要，因为每种格式都旨在满足特定的需求。 

• JPEG：最适合静止图像，真实世界图像和复杂的色彩；
• PNG：最适合徽标和平面图像等网络图像；
• GIF：最适合于低分辨率图像，动画图形，小图标和简单图像-但是，建议不要使用GIF格式，而应使用mp4或webp。
• TIFF：最适合高质量和大尺寸的打印图形；
• WebP：一种现代图像格式，可在保持高质量的同时提供出色的压缩效果。

选择正确的格式可以减少带宽消耗，从而提高网页加载速度。但是，一种新格式加入了俱乐部：AVIF，它涵盖了上述所有图像格式的高质量，甚至在保持出色压缩率的同时甚至超过了WebP。与JPEG格式相比，AVIF可节省近50％的尺寸。 

如今，以WebP和AVIF等下一代格式提供图像已成为一种趋势。 

进行图像压缩

一旦选择了正确的格式，通过压缩方法减小图像尺寸就变得很重要。有两种压缩图像的方法： 

1. 无损压缩：在这种压缩方法中，与图像链接的所有不必要的元数据都将被删除，而不会降低质量。在网站或应用程序上展示图像时，可以安全地删除元数据。 

2. 有损压缩：在这种压缩方法中，图像质量会稍微降低以实现较小的尺寸。在有损转换中获得的文件大小小于无损压缩，但是，肉眼无法突出显示原始图像和有损压缩图像之间的差异。 

永不跳过CDN

图像优化和图像CDN是天作之合。网站图像不仅需要优化，而且还必须快速，轻松地交付。如果无法快速传输优化的图像，则毫无用处。图像CDN（内容交付网络）可以满足此需求。通过减少在线访问者与服务器之间的距离，可以快速交付优化的图像。 

全局映像CDN还具有许多其他好处，例如： 

• 通过云加速实现快速的全球覆盖；
• 受众群体细分（基于设备视口）变得容易；
• 通过消除对世界不同地区的独立服务器提供商进行投资的需要，可以节省许多成本。
• 减轻服务器负载，以降低交付成本；
• 安全的存储容量。

ImageEngine经过精心设计的映像CDN通过以下独特功能与众不同： 

• 图像经过优化，可比市场上其他CDN交付速度快30％；
• 易于集成和配置ImageEngine CDN；
• 图像会根据用户的视口大小自动优化为相关格式；
• 图像可以以AVIF和WebP等下一代格式传送；
• 所传送的图像同时具有减小的尺寸（与格式无关）和出色的质量；
• ImageEngine广泛的全球CDN网络提供对HTTP，HTTP / 2，WAF和DDoS保护的支持。 

设置浏览器缓存

如果场所中没有缓存规则，或者过期时间设置过短，则会在Google PageSpeed Insights工具上显示“利用浏览器缓存”警告。简单来说，警告是提高网站速度的建议。 

浏览器缓存指示访问者的浏览器将某些特定文件保存在访问者的本地系统上，而不是重复下载它们。例如，访问者在第一次访问时需要下载网站的徽标图像。但是，在每次后续访问之后，只要启用了浏览器缓存，这样的访问者就会从网站的本地缓存中加载徽标文件。结果？加载速度更快，因为不再需要访问者直接从网站的服务器获取所有内容。浏览器缓存可用于图像和许多其他类型的文件，例如统计资源和对象数据。 

有多种方法可以利用浏览器缓存，但仅将以下代码行添加到.htaccess文件中是最有效的一种：

浏览器缓存在确定的时间间隔内存储图像，以便于快速访问。为此，可以遵循自定义的时间表或行业标准。以上共享代码段中的时间轴为一年。 

.htaccess文件可以在FTP程序的帮助下找到，该FTP程序用于连接到网站服务器的根目录。 

禁用热链接

热链接是指个人或企业复制属于另一个网站的图像的URL并将其嵌入其网站中。这样就可以显示图像，就好像它是拥有的内容一样。热链接是版权侵权的隔壁邻居，但尽管如此，这种做法仍很普遍。在许多情况下，热链接是无意的，但是会花费图像的原始所有者一些钱。如果服务器资源耗尽，它甚至可能影响网站的性能。 

优化易断线连接

如果网站提供了很多内容和丰富的图像，但是访问该网站的一部分用户没有可靠的互联网连接，则这部分访问者将不会转换。这种情况与失去任何商机没有什么不同。并非所有的网站访问者都可以使用快速可靠的互联网设施；因此，建议针对斑点连接优化图像内容。 

优化图像以降低连接速度的一种可靠方法是实时适当压缩图像。但是，即使在压缩图像之前，确定访问页面的用户的网络速度，然后根据4G，3G，2G或慢速2G等连接类型将其分类到存储桶中也很重要。 

但是ImageEngine简化了整个压缩过程。它直接从URL获取并优化格式，尺寸和质量合适的图像，然后通过全局图像CDN在网站的前端提供此类图像。 

处理响应图像

来自移动设备的流量很大，因此，拥有用于响应图像的完美策略非常重要。 

• 如果使用的是基于矢量的图像，则由于SVG图像与分辨率无关，因此使用SVG格式将是针对任何视口优化它们的好方法，而无需担心大小。
• 使用媒体查询获取背景图像或通过CSS生成的图像是向移动设备显示较小图像的最佳方法。
• 对于内联图像，可以使用srcset属性或picture元素之类的技术。 

srcset属性：可以在img元素上实现此属性，以定义不同大小的图像，以便浏览器可以根据设备特征（例如宽度）选择最佳选项。 

图片元素：如果需要根据设备的显示尺寸显示不同的图像，则最好使用此元素。   

所有上述讨论的选项都根据访问者查看网站的方式提供了不同的方式向访问者显示优化的图像。可以参考MDN的响应式图像指南和Google开发人员的图像指南，以了解有关响应式图像的更多信息并使用图片元素或srcset属性。

响应式图像

要求图像具有响应能力，以针对每种屏幕尺寸提供正确的最佳图像。它增强了用户体验并减少了加载时间。根据查看图像的浏览器或设备，显示不同大小的图像，例如全尺寸，缩略图或特色图像。要创建自适应图像，您需要具有不同版本的图像。 

问题是要优化高分辨率图像，使其在移动设备上显示时具有很多细节。细节可能会遗漏，因此不要缩小图像细节，而应考虑裁剪或缩小移动设备的图像。 

响应式图像的优点：

1. 提高页面加载速度；
2. 通过智能手机响应式设计来扩大覆盖范围；
3. 通过一致的用户体验提高转化率和销售率；
4. 减少服务器和服务器内存上的负载；
5. 增进对话。

客户提示

客户端提示的基本原理很简单-客户端通过设备向服务器发送一些有关需求的提示。负责的服务器根据提示为他们提供正确的资源。例如，带有提示的浏览器会要求服务器提供600px的图像用于设备布局-图像将根据请求的参数进行投放。即使客户端通知已启用数据保护程序模式，服务器也会提供较轻版本的相同图像。浏览器和服务器通过客户端提示进行交互，该作业变得可读，具有相同功能的时间更短。 

客户端提示与ImageEngine

ImageEngine提供所需的图像–宽度，DPR和数据保护程序。响应式图像是根据有关宽度和DPR的客户端提示创建的，后来覆盖了Data Saver客户端提示。 

优化视网膜显示屏的图像

苹果公司创造了“视网膜显示器”一词，该显示器显示清晰且密集的像素，以在适当的观看距离内提供完美的视觉效果。现在，大多数智能手机和台式机都为用户提供了高清晰的观看体验。带有Retina的Apple将四倍的像素压缩到同一空间中，以创建每英寸326像素（PPI）的密度，从而使显示流畅。 

为什么要为视网膜优化图像？

平均屏幕像素密度非常低，因此基于Web的标准图像需要包括72 PPI才能覆盖一定的高度和宽度。

我们需要保持适当的像素密度。否则，图像会塞满或拉伸。结果，创建的图像模糊不清，边缘呈锯齿状，分散了观众的视线。为了解决该问题，Retina类显示器开始发挥作用。它们提高了图像分辨率，在小空间内优化了高像素密度，甚至还可以在大屏幕上显示得体。 

如今，人们使用不同的设备进行浏览；大多数用户从智能手机而非台式机访问图像。因此，您需要优化视网膜显示屏的图像。 

包起来

有许多优化图像的技巧和窍门，但是在所有这些技巧中，使用CDN已被证明是全球许多企业最有效和长期的解决方案。映像CDN使企业的优化过程自动化，以正确地专注于其核心活动。好处是，集成映像CDN并不全都昂贵。它很容易上手，并在很短的时间内生成结果。