图片是当代网站的精髓。没有它们,很难给您的访客留下长久的印象,图片有助于企业吸引访问者并使跳出率最小化;但是,它们也可能是导致Web性能下降的原因。像搜索引擎和Bing这样的搜索引擎爬虫讨厌大量图片和缓慢加载的网站。沉重的图像会极大地导致页面加载时间增加。
网站如何显示出色质量的图像,同时减小其尺寸并且仍不损失质量?以下是网站所有者,SEO专家,博客作者和在线电子商务商店可以用来提高页面速度的可行步骤。
优化图像的好处
为Web优化图像具有许多优点,但遗憾的是,大多数Web所有者和开发人员都忽略了这些优点。让我们检查一下优化图片繁重的网站至关重要的四个原因。
1.减少网站磁盘网站
沉重的图像将占用Web服务器的更多磁盘空间,并从服务器中提取它们以显示在浏览器上,从而需要更多带宽。对于具有大量磁盘空间和带宽功能的服务器上托管的站点,从服务器中提取映像可能不是问题,但是,这会增加托管费用。
通过优化图像,网站所有者可以减少显示这些图像所需的带宽和磁盘空间。
2.提高页面速度
与使用大量图片的网站相比,较浅的网站表现更好,因为它们花费较少的时间来加载所有页面资产。网站所需的功能可以正确加载以在该网页上提供特定功能。因此,为网络明确优化的图像遵循最佳实践,可以在不同的屏幕尺寸或不同的浏览器上显示图像。
3. SEO的好处
不仅人类访客而且搜索引擎之类的搜索引擎爬虫也喜欢快速加载的网站。搜索引擎经常提到页面速度是其排名算法中的排名因素。
图像经过性能优化后,您可以加快页面加载时间,其中搜索引擎算法会优先选择那些加载速度更快的网站,并对那些需要花费较长时间才能加载的网站进行惩罚,这是SEO / SEM市场营销的重要内容。
当网站加速其页面加载时间时,它们会无意间提高其SERP排名 -搜索引擎正在向其用户展示更快的加载速度和更相关的网站,从而促进了积极的用户体验。
4.更好的用户体验
网站快速加载并正常运行时;对于访问该站点的访问者来说,其总体用户体验得到了提高。访问者更有可能停留在快速加载的页面和网站上,并且他们能够首先导航所需要做的事情。
通过执行最佳实践(包括正确地构造网页)和优化图像,从而获得更好的用户体验,从而使图像加载速度更快,显示效果更好。对于所有在线业务而言,积极的用户体验对于业务的蓬勃发展至关重要。
如何优化图像以提高页面加载速度
根据您希望网站达到的性能水平,可以单独或共同使用以下技术。
1.选择正确的文件格式
网络上使用的图像有多种类型的文件格式。为您的网站选择正确的格式至关重要。
当使用无损压缩(稍后讨论)时,通常使用PNG(便携式网络图形)。图像质量非常高,因此文件大小也很高。
JPEG(联合图像专家组)的图像质量低于PNG,但文件大小也有所减小。JPEG同时使用有损和无损压缩算法,并广泛用于数码相机图像中。
GIF(图形交换格式)仅使用无损压缩,由于其相对较小的文件大小,因此是动画图像的理想选择。GIF在互联网上很流行,用于在社交媒体和博客文章上显示动画图片。它是传达短消息或获得比图片更可笑的效果的有效方法。
2.开始图像压缩和调整大小
当您需要优化网络图像时,图像压缩是关键。但是,这可能会很棘手,如果操作不正确,可能会影响图片质量。
图像调整大小
在讨论调整图像大小时,我们所谈论的是实际调整图像大小,而不仅仅是通过使用在浏览器呈现网页时应用的HTML和CSS隐式缩小图像。
例如,假设您希望使用尺寸为3800 x 5000像素的图像作为尺寸为300 x 300像素的产品的显示图像。无需在HTML代码中设置其height和width属性,而是在将其发送到服务器之前将其调整大小。这不仅减少了加载网页所需的时间,而且还减少了将其托管在服务器上的带宽和磁盘空间。
同样,许多开发人员忽略了调整与网站布局有关的图像大小的需要。为旧设计调整大小的图像可能不适用于新网站设计。例如,如果以前使用的横幅图像尺寸为1600 x 1800像素,而您的新设计仅具有800 x 1000 px图像的空间,则可以通过调整图片大小以适应新尺寸来节省几千字节。
图片尺寸
一个普遍的误解是,只有大像素大小的图像才能保证网页上的最佳质量。通常,即使大屏幕最常用的格式只有1926 px宽,人们甚至使用2000到5000 px的图像。
3.检查图像质量
图像质量表示其在网页上的视觉表示。企业,尤其是那些销售高视觉产品的企业,由于担心网站访问者显得糟糕,因此不愿降低其质量。但是,正确降低图像质量不会影响其质量,但会减小其文件大小,因此对于访问者来说加载速度更快。
图像质量从100%降低到0%将对其外观和文件大小产生巨大影响。极佳的页面速度,但对人类访问者来说看起来像“颗粒状”和像素化。但是,将图像质量降低10%到20%不会对图像质量产生任何可见的影响,但是它将大大减小文件大小,足以更快地加载图像。
4.了解有损和无损压缩类型
当压缩的图像丢失数据时,“ 有损”是一种压缩类型。用户不会注意到这种数据丢失,但会大大减小文件本身的大小。
压缩完成后,仅可检索部分原始信息。有损压缩是通常具有较小文件大小的JPEG文件格式的理想选择。是的,压缩会丢失数据,但是减少了损害图像质量的可能性。
无损压缩是指对图像进行压缩时,其所有信息均保持不变,并且在解压缩时,所有数据都可以检索。由于存在所有数据,因此无损压缩不会损害图像的质量,但是,在渲染之前需要对其进行解压缩。
大量图片网站的其他最佳做法
以上几点是提高图像性能的重要方法,列出的工具可用于补救您当前的网站。在考虑将新的内容和图像添加到您的网站时,请确保您正在执行以下Web图像最佳实践:
① 调整图像大小,然后再将其添加到服务器
② 如果无法在上传之前调整大小,请在HTML中定义高度和宽度
③ 压缩图像以减少不必要的文件大小
④ 如果可以,请使用SVG
⑤ 使用替代文字在一句话中描述图像
⑥ 适当使用PNG,JPEG和GIF文件类型
⑦ 使用网络字体,而不是在图像中放置文本
另外,最好考虑以下网页性能提示:
⑧浏览器缓存
浏览器缓存可帮助网站将静态数据存储在用户的Web浏览器中。下次用户请求相同的数据时,将立即从本地存储中为它们提供相同的数据,而不必从网页上下载数据。浏览器缓存可在您的网页上提供更快和更好的用户体验。
⑨延迟加载
使用“延迟加载”的网站可以一次分段加载图像,而不是一次加载所有照片,通常是在向下滚动页面时,它提供了更多的时间和资源来以更快的速度加载初始页面。因此,避免了在网站的该部分上加载所有图像所花费的时间,因为加载时间较长,并且可能导致访问者跳出页面。
最后的想法
根据搜索引擎的说法,加载时间超过10秒的页面的跳出率将提高123%。图像重载的网站将难以提高页面速度,从而提高其网页跳出率。
遵循这些可行的技巧和最佳做法,可确保您的网站不仅提供出色的用户体验,而且在搜索引擎结果页中的排名更高,从而为您的网站吸引了更多访问量。