next/imageのwidth,heightについて、しくじっていた話

はじめに

ずっとわかっていなかったことを認識した話です。

しかも二段階にわたって・・ww

無知の知、知から理解に続けばいいよねと思っているので挫けません。

私がLPの作成している時点で指摘していただき、そうだったんだ！ってなったのに、直近のチーム開発でもそうだったんだ！(LPの時に言われて理解したつもりが、忘れていたわけではなくその時の理解が誤っていた)ってなったことがあり、これ絶対わかってないの私だけじゃないよね？ってなったので、絶対取り上げようと思いました。

前提

LPの時に理解してつもりだったこと

• 表示したい画像のサイズを指定するわけではない

• 表示したい画像のサイズはclassNameで指定する

この解釈自体は間違っていなかったのですが、

LPの時は事前にサイズがわかっている画像しか使っていなかったので、すべてImageコンポーネントに渡すwidth,heightは画像のサイズを確認してそのサイズを指定していました。。(間違ったやり方です)

一応それでレビューは問題なく通過したのですが、、ちょっと違うんだなというのが今回わかりました。

今回わかったこと

next/imageで指定するwidthとheightは、内在的なサイズを指定します。

この値によって、ブラウザは画像の正しいアスペクト比を理解し、ページのレイアウトが崩れないように、最適な画像サイズに圧縮してくれるという感じです。

next/imageに限ることではないですが、widthとheightを指定することで(next/imageでは指定が必須)ブラウザがあらかじめ画像のスペースを確保し、レイアウトシフトを防ぐことができるというメリットもあります。

恥ずかしながら(気にしてないけどw)、、間違ったことを書いてはいけないので調べていてレイアウトシフトという言葉を始めて知りました。。。

レイアウトシフトとは、Webページの読み込み中や操作中に、要素の位置が予期せず移動してしまう現象のことです。画像が遅れて読み込まれてボタンがずれることとかありませんか？押したかったのそれじゃない！みたいな！あれです！！！笑

補足情報

fillを指定することでwidthとheightの指定は不要になりますが、親要素でrelativeにして画像の表示領域を指定することが必須です。

師匠、ほぼfill使ったことないって仰っていたので基本widthとheightを指定するものだと思っておけば間違いないと思います。

何の値を指定したらいいのか

って思いますよね？？私もおもったので確認しました。

結論、実際に表示され得る最大値で良いと思います(この解釈で間違いないと言われました)

このサイズに圧縮されるので、小さく圧縮されて大きく表示されたら画質おちますよね？

そういうことみたいです・・・！！

画像がこのサイズで表示されなければってサイズをclassNameで指定です！！

そしたらNextで良い感じに最適化してくれるみたいです！！

改めてカリキュラムのレジュメ確認してみたのですが(どんどん改良されていて、先人が無意味に躓いたことでは躓かないように書かれいるんですよ(私そこに時間溶かしたのに、、羨ましい、、ってなるけどそれもまたよし))、そこにガッツリ説明されていたらどうしようと思ったんですけどなかったので安心しました。

でも、ページ(p.601)と紹介していた教材を確認すると、しっかり書いてありましたので、ここまで読まれた方は一度教材を確認してください！！

正直何も知らずに教材読んでも読み流してしまって今回書いた箇所の理解に繋がる初学者は多くないかも・・？って思うところではあります。

width,heightには表示したいサイズを指定するわけではないことを前提に読んでみて頂きたいです！！

教材

おわりに

結構気合入れて書きはじめたのにめっちゃ短編でしたw

大事なこと書いてあると思うので、理解してnext/imageの恩恵受けてほしいと思います！

他にもたくさんnext/imageのすごいところがあるので、詳しく理解したい方はぜひ公式をご確認ください！！