优化图片加载以获得更好的用户体验

Optimize Image loading for better user experience

我必须制作一个网站,它可以一次呈现多个图像,就像一件衬衫,它有多个部分,如衣领、袖子等。我必须一次组合所有这些图像并显示整体图像衬衫。 我怎样才能尽快做到这一点,为用户提供更好的体验?

您可以使用渐进式 jpeg-https://www.hostinger.in/tutorials/website/improving-website-performance-using-progressive-jpeg-images

将图像从低质量加载到高质量

如果您想更快地加载图像,您可以进行图像优化: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/

我推荐你使用一个叫做 sharp 的 npm 模块。通过使用它,您可以将图像调整为更小,这将使您的图像加载速度更快。此外,您可以根据客户端设备分辨率提供动态图像,这可以明显减少图像加载时间。

锐利网站:https://github.com/lovell/sharp