作为主要部分使用的图片的最佳实践是什么？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

作为主要部分使用的图片的最佳实践是什么？

P粉727416639 2023-09-19 20:54:07

[CSS3讨论组]

1276

我有一个使用图片作为主要部分的部分。问题是图片对于手机、平板电脑和台式机来说太大了，有1MB。我担心图片太大了。

我想知道在使用图片作为主要部分背景时的最佳实践。

谢谢您的友善建议和意见。

P粉727416639

全部回复(1)

P粉1639513362023-09-20 12:29:17 1楼

实际上，一个1MB大小的英雄横幅图像太大了。网页的英雄部分通常是用户首次看到的视觉元素。一个大图像会导致用户等待很长时间，却看不到你的网站内容，他们很快就会离开。

因此，优化这些图像对于性能和美观都很重要。你的英雄图像应该小于100KB。

TinyPNG是一个很好的工具。 https://tinypng.com

你还可以使用响应式图像来适应不同的宽高比。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <source srcset="large.jpg">
  <img src="large.jpg" alt="Hero Image">
</picture>

如果你在使用Next.js，你可以使用Image组件 https://nextjs.org/docs/pages/api-reference/components/image。

最后，你可以使用Lighthouse来测试你的网页性能。 https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>