如何在不降低图像质量的情况下加载图像而不影响我网站的加载速度
How to load images not to impact loading speed of my website without reducing image quality
在我的网站上有几张图片,但图片的大小是
相当大,虽然所有的网站都已加载但图片让它等到图片加载完毕
这会花费太多时间使整体响应时间过长。
现在有一件事我也有让它变小,它会降低图像质量,但我不想降低图像质量。
我已经使用文件优化器来优化我的图像,但没有太大帮助。
有没有一种很好的技术来实现这一目标。
如有任何建议,我们将不胜感激。
首先,您可以考虑使用JS异步加载图片。除此之外,压缩图像取决于所使用的图像类型。使用 tinypng.com 或 image.online-convert.com/convert-to-png 可以压缩 PNG(图形),损失很小。至于 JPG(图片),我不知道除了使用 image.online-convert.com/convert-to-jpg 之外的其他方法,但这会引入一些压缩伪像。然而,这些可以配置为在质量损失很小(但仍然有一些)的情况下产生很大的文件大小差异。
你应该尝试延迟加载来加载你的图片。
延迟加载让您无需忍受图像繁重的网站服务
用户可能永远看不到的图像的所有预取和加载。
这对于高度可视化的单页网站特别有用。
这是延迟加载的示例 https://appelsiini.net/projects/lazyload/enabled/
https://responsivedesign.is/resources/javascript-jquery/lazy-load-jquery/
延迟加载一个 jquery 插件,可以轻松地进行延迟加载
我个人使用 jquery 作为
加载图像
<img class="comp-logo" src="https://via.placeholder.com/300x300.png" data-image="images/company_logo.png" alt="image">
在 img 标签中,我使用了占位符而不是加载速度更快的徽标图像。
现在使用 jquery 我像这样加载图像
$(document).ready(function () {
$(".comp-logo").each(function (index, element) {
var self = $(this);
if (self.is(":visible")) {
var imgSrc = self.data("image");
self.attr("src", imgSrc);
}
});
});
这里有一个关于延迟加载的详细信息。
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
您可以使用新的标准 loading="lazy" 属性功能来延迟加载图像(如果需要,还可以使用 iframe)。此外,为了支持旧版浏览器,您可以使用我为此目的开发的这个 polyfill:https://github.com/mfranzke/loading-attribute-polyfill
在我的网站上有几张图片,但图片的大小是 相当大,虽然所有的网站都已加载但图片让它等到图片加载完毕 这会花费太多时间使整体响应时间过长。
现在有一件事我也有让它变小,它会降低图像质量,但我不想降低图像质量。
我已经使用文件优化器来优化我的图像,但没有太大帮助。 有没有一种很好的技术来实现这一目标。 如有任何建议,我们将不胜感激。
首先,您可以考虑使用JS异步加载图片。除此之外,压缩图像取决于所使用的图像类型。使用 tinypng.com 或 image.online-convert.com/convert-to-png 可以压缩 PNG(图形),损失很小。至于 JPG(图片),我不知道除了使用 image.online-convert.com/convert-to-jpg 之外的其他方法,但这会引入一些压缩伪像。然而,这些可以配置为在质量损失很小(但仍然有一些)的情况下产生很大的文件大小差异。
你应该尝试延迟加载来加载你的图片。
延迟加载让您无需忍受图像繁重的网站服务 用户可能永远看不到的图像的所有预取和加载。 这对于高度可视化的单页网站特别有用。 这是延迟加载的示例 https://appelsiini.net/projects/lazyload/enabled/
https://responsivedesign.is/resources/javascript-jquery/lazy-load-jquery/ 延迟加载一个 jquery 插件,可以轻松地进行延迟加载
我个人使用 jquery 作为
加载图像<img class="comp-logo" src="https://via.placeholder.com/300x300.png" data-image="images/company_logo.png" alt="image">
在 img 标签中,我使用了占位符而不是加载速度更快的徽标图像。
现在使用 jquery 我像这样加载图像
$(document).ready(function () {
$(".comp-logo").each(function (index, element) {
var self = $(this);
if (self.is(":visible")) {
var imgSrc = self.data("image");
self.attr("src", imgSrc);
}
});
});
这里有一个关于延迟加载的详细信息。 https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
您可以使用新的标准 loading="lazy" 属性功能来延迟加载图像(如果需要,还可以使用 iframe)。此外,为了支持旧版浏览器,您可以使用我为此目的开发的这个 polyfill:https://github.com/mfranzke/loading-attribute-polyfill