请注意,矢量图在放大时不会像素化。(图片来源:谷歌)
SVG 不适合照片或复杂图像,但它适用于具有几何形状的简单图形,例如徽标。
现在,下一代图像格式已经存在。这些格式具有更好的压缩率、更高的质量、加载速度更快,并且占用更少的蜂窝数据:
WebP最近备受关注。可以将现有的 JPEG 和 PNG 文件转换为 WebP。甚至有 WordPress 插件可以即时执行此操作,从而减轻所有图像的负担。
来自 Google 开发者关于 WebP 的常见问题解答页面:
WebP 是一种有损和无损压缩方法,可用于网络上的各种照片、半透明和图形图像。有损压缩的程度是可调的,因此用户可以在文件大小和图像质量之间进行权衡。WebP 的压缩率通常比 JPEG 和 JPEG 2000 平均高出 30%,且不会损失图像质量……
优化图像没有单一的最佳方法。对于每一种方法,您都需要在最小文件大小和最高质量之间找到最佳平衡。以下是必须做的事情:
调整和剪裁图像,使其不大于显示尺寸。对于光栅 捷克共和国电报数据 样式的图像(网络上最常见的类型),您可能需要保存多个不同分辨率的版本,以满足不同用途。
选择每张图片最有效的文件格式(参见我的最后一点)。在同一网页上混合使用不同类型的图片是可以的。
使用压缩来减小文件大小。例如,保存 JPEG 时,在不损失视觉质量的情况下尽可能向下滑动质量栏。对于 SVG 文件,Google 建议您通过svgo等工具来缩小文件大小。
考虑用完全不同的技术替换图片。CSS 效果可以产生阴影、渐变等。Web 字体可让您以漂亮的字体显示文本,与图像相比,这实际上提高了页面的可用性和可抓取性。
我建议您收藏 Google 的图像优化指南,以获取更多技术操作方法。
6. 始终创建 Alt 属性
对所有用户而言,可访问性非常重要。因此,向图片添加 alt 属性是我们始终保持更新的 SEO 清单的一部分。
Alt 文本向使用屏幕阅读器的视障人士描述图片的含义。它还可以为搜索引擎提供有关图片内容的宝贵信息。