Was sind die Best Practices für Bilder, die als Hauptabschnitte verwendet werden?

Question

Ich habe einen Abschnitt, der Bilder als Hauptabschnitt verwendet. Das Problem ist, dass das Bild mit 1 MB zu groß für Mobiltelefone, Tablets und Desktops ist. Ich mache mir Sorgen, dass das Bild zu groß ist.

Ich würde gerne wissen, wie man am besten Bilder als Hintergrund für Hauptabschnitte verwendet.

Vielen Dank für Ihre freundlichen Vorschläge und Kommentare.

Answer 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