Web開発者およびソフトウェアエンジニアとして、私たちは人々に彼らが望むものを提供したいと考えています。NextJSに精通している場合は、最近リリースされたバージョン10に含まれているすばらしい画像最適化機能に精通している 必要があります。NextJSは、Reactアプリケーションのバックエンドとフロントエンドの両方で使用できるフレームワークです。画像をWeb対応のWebP形式に変換したり、ユーザーの必要に応じて画像をアップロードしたりするなど、さまざまな操作を実行できます。
すでにNextJSを使用している場合、これは非常に役立ちます。しかし、新しいフレームワークに関連するハードルのない、最適化機能、インラインスタイル、およびReactコンポーネントのシンプルさが必要な場合はどうでしょうか。
— , . , , ( !) .
, BetterImage
BetterImageは、React形式でシンプルかつ便利な方法で多くの最適化機能をエミュレートするオープンソースツールです。品質を犠牲にすることなく、画像をJPEGより30％小さい最適化されたWebPに変換します。これにより、標準のタグと比較して、GoogleLighthouseでの表示とSEOのアクセシビリティが向上します。このコンポーネントは、すぐに使用できる最も一般的な操作を含め、CSSフォーマットも合理化します。コンポーネントはプロパティを取得し、操作とインポートを抽象化して、アプリケーションにより集中できるようにします。 BetterImageは、クラスベースの機能コンポーネントと互換性があるため、Reactに提供するフレーバーに関係なく、アプリケーションに含めることができます。バックアップイメージを有効にして、CSSは、高さと幅の寸法だけでなく、GoogleLighthouseでサイトを評価するときに集計レイアウトシフトメトリックが適用されないようにします。
標準タグのGoogleLighthouseの結果（左）とBetterImageの結果（右）。
コンポーネントはまだベータ版であり、新しい機能とNPMパッケージが開発中です。コンポーネントケースを試したい場合や質問がある場合は、GithubとWebサイトにアクセス して ください。
BetterImageの内部には何がありますか？
灯台のテストでは、コンポーネントが画像の読み込みパフォーマンスを向上させることができることが示されています。Next.JSのような他のフレームワークは、優れた最適化を提供します。私たちのチームは、他のフレームワークが必要ないように、これをReactに採用したいと考えています。開発者がReactコードに文字列として直接スタイルを記述できるように、BetterImageを作成しました。スタイリングはオプションであり、まったく使用できません。
BetterImageコンポーネント内部には
何がありますか？プロパティはコンポーネントに渡され、コンポーネントは情報を抽象化して画像を操作します。画像自体をReactコンポーネントにインポートする必要はありません。相対パスのみが必要であり、BetterImageは変換された画像を動的にインポートします。 BetterImageは、外部NPMパッケージAPI呼び出しを使用してソースファイルをWebPに変換し、変換されたイメージをローカルフォルダーに保存します。これにより、最初の操作後に画像をさらに高速にレンダリングできます。他のすべての機能（常に柔軟）は、必要に応じて適用されます。現在ベータ版のコンポーネントのプレビューについては、Githubと Webサイトへようこそ ！
この小さなレビューを読んでくれてありがとう！
