Next/Imageについてどのくらい知っていますか.

書くきっかけ

最近jsを学ぶ過程で、私は自分で実施して、その中のいくつかの部分に対して深い理解があって、だから私は1篇の文章を書きたいです.
いずれにしても、画像は画面に出力されます.next.jsは、単独で処理することなくイメージを最適化できます(このような便利な機能がたくさんあるので、多くの会社がnextを使用していますよね?)
では、imgタグとどのような違いがあるのか、どのように利用しているのかを見てみましょう.

next/image

nextは、imgラベルではなくnextからインポートされたnext/imageの画像ラベルを使用するよう求めます.nextが画像を最適化するためです.

だからどうしてこれを使うの?

LoaderでURLをカスタマイズできます.

はLazy Loadingによって画像を自動的に最適化するが、プリロードが必要な場合はキャンセルすることができる.

オートスカラーUI(プレースホルダを介して)は、CLSを防止します.

の画像を自動的にキャッシュし、有効期限を設定できます.

next.config.jsは、指定された場所でのみ画像を受信し、悪意のあるユーザーからアプリケーションを保護します.

これはこんなに多くの利点があるnext/imageですが、どの道具が必要なのか、どの道具がオプションなのかを見てみましょう.

必須アイテム

src

静的に読み込む画像ファイル

外部url(該当する場合はnext.config.jsのドメインに追加し、サイトが画像を受信するときに安全に注意してください)

.

width, height

レイアウトが埋め込まれた画像または静的にインポートされた画像(内部画像フォルダ)でない限り、それらは必須として指定する必要があります.

外来アイテム

layout

前述したように、

は、画像のビューポートサイズを指定する.

intrinsicは、デフォルト値をコンテナの幅に合わせて縮小します.

レイアウトがresponsiveまたはfillの場合、親要素は個別に設定する必要があります.
- responsive : display: block

fill : position:relative

loader

URLをカスタマイズする関数があります.loaderの場合、src、width、qualityをpropsとして受信し、urlに含めて返します.

quality

1から100までの数字を指定できます.数字が高いほど品質が良いことを示します.

defaultは75です.

priority

next/imageの利点はLazyLoadingを自動的にサポートすることです.ただし、Lazy Loadingを必要としない場合は、priorityをtrueに拡大することでlazy loadingをキャンセルできます.

この優先度は、「ターゲットコンテンツページ」(LCP)に関連しています.LCPは、スクリーン上でレンダリングされたコンテンツを表示するのにどれくらいの時間がかかるかを示すレンダリングがいつ完了するかを決定するために使用できます.LCPが発生した場合、応答時間またはリソースロード時間が遅いと考えられます.では、いつ使いますか.例えばKVのようなプリロードが必要な場合が最も代表的である.

placeholder

画像は、ロード前にステータスを指定し、blurおよび空に設定できます.

が空の場合、空白が表示されます.blurを設定すると、blurDataURLで静的および動的画像を指定できます.この画像は、10 px未満のサイズの画像を推奨し、ロードに成功する前に表示されます.

モデリングモード

next/imageは利点はたくさんありますが、造形が面倒なのが欠点です.Styled componentは、感情を使うことができますが、いつも自分の意思で造形することができず、私に大きなプレッシャーを与えてくれました(私だけでなく、Stackoverflowにも似たような悩みがたくさんあります).

これはnext/image自体がdefaultに指定されたスタイルを持っているため、まず反映されるので、私が造形をするとき、私が望んでいない方向に発展することがあります.
解決策は次のとおりです.

Styled.component内部で造形を行ったが、正しく反映されていない場合は!importantを用いて優先的に造形を行う.ただし、「重要」を使うと副作用が生じる可能性があるので注意してください!「重要」を大量に使用する必要がある場合は、次の解決策をお勧めします.

spanを使用してnext/imageを囲み、親要素(span)にclassNameを指定します.そしてcssで造形することができます.

さぎょうモード

next/imageを使用する場合、loaderを使用します.操作方法は次のとおりです.

imageLoaderは、src、width、qualityを受信し、必要なurlに変換して返します.qualityをゆったりと指定し、デフォルトは75です.

const myLoader = ({ src, width, quality=75 }) => {
  return `https://example.com/${src}?w=${width}&q=${quality}`
}

next/imageラベルから

変換urlを受信します.次に、next/imageでサイズを指定したり、不活性にロードしたり、skleton UIを使用したりすると、画像が最適化されて画面に表示されます.

に感銘を与える

画像処理ではnextの利点を意識したが,cssの困難+next/imageの欠点:造形も考慮した.next/imageの造形は私に大きなプレッシャーをもたらし、他の文章でも悪夢と呼ばれています.しかし、他の利点があるため、使用する球体を感じ、喜んで素子を作成しました.早く開発したほうがいいと思います.今日も楽しい週末を過ごしましょう!

参考資料

Web.dev

next/image