メインセクションとして畫像を使用するセクションがあります。 問題は、畫像が攜帯電話、タブレット、デスクトップには 1MB と大きすぎることです。 畫像が大きすぎるのが気になります。
メインセクションの背景として畫像を使用する場合のベストプラクティスを知りたいです。
親切なご提案やコメントをいただきありがとうございます。
1
0
0
実は、1MB のヒーロー バナー畫像は大きすぎます。 Web ページのヒーロー セクションは通常、ユーザーが最初に目にする視覚要素です。畫像が大きいと、ユーザーは Web サイトのコンテンツが表示されないまま長時(shí)間待たされ、すぐに離れてしまいます。
したがって、これらの畫像を最適化することは、パフォーマンスと美観の両方にとって重要です。ヒーロー畫像は 100KB 未満にする必要があります。
TinyPNG は素晴らしいツールです。 https://tinypng.com
レスポンシブ畫像を使用して、さまざまなアスペクト比に適応させることもできます。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
リーリーNext.js を使用している場合は、畫像コンポーネント https://nextjs.org/docs/pages/api-reference/components/image を使用できます。
最後に、Lighthouse を使用して Web ページのパフォーマンスをテストできます。 https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
