suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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.

P粉727416639P粉727416639429 Tage vor768

Antworte allen(1)Ich werde antworten

  • P粉163951336

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

    实际上，一个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

    Antwort
    0
  • StornierenAntwort