gpt4 book ai didi

html - 有哪些优化网络图像的好方法? (Figma 线框到代码)

转载 作者:行者123 更新时间:2023-11-28 19:24:04 27 4
gpt4 key购买 nike

我正在从头开始构建自己的作品集。有很多我想包含的高质量图像,但我不知道如何在不减慢网站速度或牺牲太多图像分辨率的情况下做到这一点。

我在 Figma 中创建了线框,但当我导出图像时,质量明显下降。如果我将它们导出 2 倍或 3 倍,分辨率会更好,但这是速度的权衡。我对前端很陌生,试图编写自己的网站代码作为学习代码的一种方式,所以请帮忙。我的问题是:

  1. 优化网络图片的最佳做法是什么?
  2. 如何知道您的图片是否太大?优化图像的典型尺寸是多少?
  3. 我可以进一步研究哪些提示/技巧/资源?非常感谢🤓

最佳答案

看看延迟加载图像,它在开始时以较低质量的版本加载,然后在用户到达您网站的那一点时使用 JavaScript 显示完整质量。

以下是来自谷歌的一些更深入的引用: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

关于html - 有哪些优化网络图像的好方法? (Figma 线框到代码),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56717720/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com