简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Was sind die Best Practices für Bilder, die als Hauptabschnitte verwendet werden?
P粉727416639
P粉727416639 2023-09-19 20:54:07
0
1
737

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粉727416639
P粉727416639

Antworte allen(1)
P粉163951336
P粉1639513362023-09-20 12:29:17 1 Etage

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！