Using Images in Next.js (next/image examples)

Summary

この動画スクリプトでは、Web上の画像使用における3つの一般的な問題とその解決策について説明されています。レイアウトシフト、ビューポートやデバイスに最適化されていない大きな画像の読み込み、さらに画像表示と希望のレイアウトを実現するのが困難である点に焦点を当てています。Image component index.jsがこれらの問題を解決するのに役立つことが期待されています。 動画では、基本的な使用方法から、次のような複数のシーンを紹介しています。altタグ、ソース画像を設定し、画面全体を占めるスタイルを適用した画像コンポーネントの定義方法や、画像の最適化と縮小、外部ドメインからの画像の取り扱い、背景画像の設定、グリッドパターンでの複数画像使用、レスポンシブな画像表示など、幅広い内容が含まれています。 また、カスタマイズ性の高いAPI参照、画像最適化サービスの変更方法など、より詳細な情報はドキュメントで確認できると案内しています。

Takeaways

• 🌐 ウェブでの画像使用に関連する3つの一般的な問題: レイアウトシフト、过大な画像の読み込み、最適化されていないビューポート対応。
• 🚀 Next.jsのImageコンポーネントは、これらの問題を解決し、開発者の体験を向上させることを目指しています。
• 🖼️ Imageコンポーネントは、altタグ、ソース画像、そしてスタイルを引き受け、自動的に幅と高さを設定してレイアウトシフトを防ぎます。
• 📏 画像の最適化: ネクスト.jsは自動的に画像を最適化し、より軽量なavifまたはwebp形式で提供します。
• 🔒 外部ドメインからの画像使用時は、許可されたドメインのホワイトリストを定義する必要があります。
• 🎨 背景画像を設定する場合、fillプロパティを使用して親要素の全体幅を占めることができます。
• 📊 sizesプロパティを使用して、ビューポートの幅に基づいて最適な画像サイズを自動的に選択できます。
• 👌 品質プロパティを使用して、画像の品質を調整できます。100%に設定すると、画像の品質が向上します。
• 🌀 ブラウザのUXを向上させるために、blur upプレースホルダーを自動生成することができます。
• 🔧 CSSのobject-fitプロパティを使用して、画像の表示方法（例: cover）を調整できます。
• 🔄 グリッドパターンを使用して、fillプロパティとobject-fit coverを組み合わせて、响应式な画像レイアウトを作成できます。
• 📈 ネクスト.jsのAPIリファレンスを使用して、画像コンポーネントの設定を調整できます。また、ローダーを使用して異なるサービスで画像を最適化できます。

Q & A

ウェブ上で画像を扱う際に直面する一般的な問題は何ですか？

ウェブ上で画像を扱う際に直面する一般的な問題は3つあります。1つは、画像の読み込みによるレイアウトのシフトが分散访客に干扰を与えることです。2つ目は、ページや訪問者が使用するデバイスを最適化していない大きすぎる画像を読み込むことです。3つ目は、実際に画面に画像を表示し、望むレイアウトを実現するのが非常に困難であることです。

画像コンポーネントindex.jsはどのようにこれらの問題を解決する予定ですか？

画像コンポーネントindex.jsは、画像の読み込みによるレイアウトシフトを防ぐために自動的に幅と高さを設定し、最適化された画像を提供することで、これらの問題を解決する予定です。また、開発者が画像をよりスムーズに使用できるようにする機能も含まれています。

画像コンポーネントを使用する際にALTタグとソース画像は何为其重要ですか？

ALTタグは画像の代替テキストを提供し、アクセシビリティを向上させます。ソース画像は実際に表示される画像を指定します。これらは、画像コンポーネントが正しく機能し、ユーザーが画像を理解できるようにするために重要です。

画像を最適化するために使用されるフォーマットとしてavifやwebpは何ですか？

avifやwebpは、より小さいファイルサイズの画像を提供できる近代的な画像フォーマットです。これにより、高速な読み込みと高品質な画像表示が可能になり、ウェブサイトのパフォーマンスが向上します。

外部からの画像を最適化するにはどうすればいいですか？

外部からの画像を最適化するには、next.jsの設定ファイルで許可されるドメインのホワイトリストを定義する必要があります。また、画像の幅と高さを正確に指定する必要があります。

fillプロパティはどのように動作しますか？

fillプロパティは、画像を親要素の全体幅に広がるように設定します。これにより、幅と高さを手動で設定する必要がなくなり、自動的にレイアウトが調整されます。

sizesプロパティは何のために使用されますか？

sizesプロパティは、ビューポートの幅に基づいて最適な画像サイズを自動的に選択するために使用されます。これにより、訪問者のデバイスやビューポートに合わせて適切なサイズの画像が提供されます。

画像コンポーネントでオブジェクトフィットカバーを使用する好处は何ですか？

オブジェクトフィットカバーを使用すると、画像が親要素のサイズに合わせて調整され、背景として表示される際に適切にフィットします。これにより、画像がビューポートに合わせてリサイズされる際に、見た目が維持されます。

CSSグリッドパターンで画像を表示する際に重要な要素は何ですか？

CSSグリッドパターンで画像を表示する際に重要な要素は、親要素がCSSグリッドであることと、画像コンポーネントにfillプロパティが設定されていることです。これにより、画像がグリッドのサイズに合わせて自動的に調整され、リponsiveなデザインを実現できます。

画像コンポーネントが自動的にレスポンシブになるのはなぜですか？

画像コンポーネントは、ソースサイズとビューポートの幅に基づいて自動的に最適なサイズの画像を提供するため、自動的にレスポンシブになります。これにより、訪問者のデバイスやビューポートのサイズに応じて、最適な表示結果が得られます。

画像コンポーネントの設定をカスタマイズするにはどうすればいいですか？

画像コンポーネントの設定をカスタマイズするには、ドキュメントにあるAPI参照を利用することができます。また、ローダーを通じて異なるサービスを使用して画像を最適化することもできます。

Outlines

00:00

🖼️ ウェブイメージ最適化の問題と解決策

第1段落では、ウェブページで画像を使用する際に直面する一般的な3つの問題について説明されています。1つは、画像の読み込みによるレイアウトシフトがユーザーに干扰を与えることです。2つ目は、ページや訪問者のデバイスに最適化されていない大きすぎる画像を読み込むことです。3つ目は、望むレイアウトを実際に画面に表示するのが難しいことです。これらの問題を解決するための方法として、image component index.jsが提案されています。

05:02

🛠️ ネクスト..jsの画像コンポーネントの使い方

第2段落では、ネクスト..jsの画像コンポーネントを使って、異なる方法で画像を表示する例について詳しく説明されています。基本的な使用方法から、背景画像を設定する方法、グリッドパターンでの複数画像の表示方法まで、様々な例が紹介されています。また、画像を最適化するためのallow listの設定や、画像フォーマットの指定方法なども説明されています。最後に、画像コンポーネントのAPIリファレンスについて触れられています。

Keywords

💡レイアウトシフト

レイアウトシフトは、ウェブページの要素が読み込まれた時や再flowsしされた時に生じる表示上の不整合を指します。このビデオスクリプトでは、画像の読み込みによるレイアウトシフトを防ぐために、画像の幅と高さを適切に設定することが重要だと述べられています。

💡オプティマイズ

オプティマイズとは、ウェブページに最適な表示を提供するために画像のサイズやフォーマットを調整することを指します。スクリプトでは、Next.jsが画像を自動的にオプティマイズし、より小さいファイルサイズにすることで高速な読み込みと良いユーザー体験を提供できることが説明されています。

💡ビューポート最適化

ビューポート最適化は、ウェブページの画像がデバイスの画面サイズに合わせて自動的に調整されることを意味します。これにより、さまざまなデバイスで最適な表示が保証されます。スクリプトでは、Next.jsがビューポートの幅に基づいて画像のサイズを自動調整することが挙げられています。

💡リモートイメージ

リモートイメージは、ウェブページから直接参照されるがリポジトリに含まれていない画像を指します。スクリプトでは、Next.jsが外部ドメインからの画像をオプティマイズできるように、特定のドメインを許可リストに追加する方法が説明されています。

💡背景画像

背景画像とは、ウェブページの背景に設定される画像のことを指します。スクリプトでは、Next.jsの画像コンポーネントを使用して背景画像を設定し、`fill`プロパティを用いて親要素の全体に広がることができます。

💡CSS Grid

CSS Gridは、ウェブページのレイアウトを構築するためのCSSの機能です。スクリプトでは、CSS Gridを使用して画像をグリッドパターンに配置し、リサイズや响应性の高いデザインを実現する方法が紹介されています。

💡オブジェクトフィット

オブジェクトフィットは、画像を要素内にフィットさせるCSSのプロパティです。`cover`や`contain`などの値を用いて、画像が要素内に適切に表示されるように調整できます。スクリプトでは、`object fit cover`を使用して画像が背景にフィットするように設定する方法が説明されています。

💡レスポンシブ画像

レスポンシブ画像は、画面サイズやデバイスによって自動的に調整される画像です。スクリプトでは、Next.jsの画像コンポーネントがデフォルトでレスポンシブであり、ビューポートの変更に応じて自動的に調整されることが挙げられています。

💡画像コンポーネント

画像コンポーネントは、Next.jsにおいて画像を扱うための特別なコンポーネントです。スクリプトでは、画像コンポーネントを使用して、画像の読み込み、表示、および最適化を簡単に管理できることが説明されています。

💡Next.js

Next.jsは、Reactベースのサーバーサイドレンダリングフレームワークです。スクリプトでは、Next.jsが提供する機能を利用して、画像の最適化やレスポンシブデザインを実現する方法が紹介されています。

Highlights

Three common problems when working with images on the web are layout shift, large images not optimized for the viewport or device, and difficulty in getting images on the screen with the desired layout.

The image component in Next.js aims to solve these problems by providing a better developer experience for using images.

The basic image component takes an ALT tag for accessibility, a source image, and styles to fit the screen width, automatically setting width and height to prevent layout shift.

Next.js automatically optimizes images, making them smaller without manual intervention by using modern file formats like AVIF or WebP.

The optimized image file size is significantly reduced, for example, from 30.3 kilobytes to 7.2 kilobytes.

Remote images can also be optimized within Next.js, but an explicit allowlist of domains must be defined for security and control.

The image component in Next.js supports dynamic images from external sources with the right configuration.

The fill prop allows an image to take up the entire width of its parent element, replacing the older layout prop.

The sizes prop, used with fill, instructs Next.js to serve different image variations based on the viewport and device.

The quality prop can be adjusted for images, with 100% being an option for higher quality at the cost of larger file sizes.

Next.js can generate a blur-up placeholder for local images, improving user experience.

The style prop allows for CSS adjustments like object-fit without the need for additional class names.

Using the fill layout with CSS Grid and object-fit cover creates a responsive and visually appealing grid pattern for images.

The image component is responsive by default, adjusting to the viewport size and ensuring images display full width across devices.

Next.js provides a full API reference for the image component, including the ability to change the image optimization service through loaders.

The video offers practical examples of using the Next.js image component, showcasing its versatility and ease of implementation.

Transcripts

if you're working with images on the web

you might have noticed three common

problems the first is that there's

layout shipped from your images loading

in which is distracting for your

visitors two is that you load images

that are too large for your page so they

don't get optimized for the viewport or

for the device that the visitor is using

and the third is that the experience of

actually getting the images on the

screen and the layout that you want is

actually pretty difficult to do so you

want to have a little bit better

developer experience for using images

well the image component index.js is

hopefully here to solve those problems

for you okay so in my editor I have the

nexgs image component examples from the

documentation running locally and we're

going to walk through a few different

examples of using the image component so

let's start with the most basic I have

this image component defined on the left

it takes an ALT tag for accessibility

some Source image and then I also passed

in some styles to make it take up the

full width of the screen now the source

is coming from up top or actually

importing the image file from the public

directory now this is nice because we

don't have to manually set the width or

height setting the width and height is

important because this is how you

prevent layout shift so when you import

an image here it's going to

automatically do that for you so now

let's go look at the browser and see

what's actually happening here so on

localhost 3000 I have Dev tools opened

here and I see an image tag so there's

no wrapping elements it's just the

native web image tag in previous

versions of nexgs we had to add wrapping

elements to

help support the features that were not

cross browser yet in terms of aspect

ratios and styling but now in the latest

version of next.js there's no wrapping

elements so we have an image tag we see

our alt tag we see some properties that

we've automatically defined for you like

the width and the hype to prevent that

layout shift and then we see this

interesting URL now this URL is the

automatically optimized image for us so

let's take a quick detour here and I'll

go look at this file Slash pursell.png

from the public directory that we're

serving up now if we look down here we

see that the original size of This Is

30.3 kilobytes this is a PNG file and

I've done a hard reload here so it's not

being cached

but this underscore next slash image

route is what's automatically optimizing

that image and making it a bit smaller

so the same image passed in through that

route we look here and we see that it

detects that because I'm using Chrome we

can actually use a more modern file

extension so we're going to use the

format of avif or webp which are going

to help you get even smaller file sizes

so we see that down below here with

content type and if I close this out we

see that the size of this one is 7.2

kilobytes so again I'll do a hard reload

here and we see 7.2 kilobytes that's

quite a bit smaller and you know 30

kilobytes was already a decently small

image this gets even more impactful when

you talk about megabyte sized images or

really high quality images but what if

my images aren't in my repository

they're from some remote location well

that's okay too let's take a look at

another example so in my left to have

another image component with an ALT tag

and a source and a width and a height

and the max width but notice that the

source is a URL that some external image

now this also works inside of next.js

but we have to Define an explicit allow

list of the domains that we want to be

able to optimize images from so if we

hop over to our next config we see that

not only have we defined the image

formats that we want to support which

are avif and webp we also can Define

some patterns that we want to match for

the URLs inside of our source so we're

saying we're going to allow all of the

images from this

assets.presell.com subdomain and

specifically for this path name image

slash upload slash something now this is

important because it makes sure that you

lock down the URLs that people can use

your next.js server to optimize images

with it's important to note here that we

still had to define the width and the

height of the image now this can be a

little bit tricky sometimes if the width

or the height are really Dynamic but

it's really important because this is

the only way that you can go without

having layout shift from your image

loading in okay let's look at another

example of setting a background image

for the entire page so on my left I have

another image tag it has an alt and a

source just like before but there's a

couple new things here we want to dig

into the first I'm going to talk about

which is the most important is fill so

rather than setting a width and height

of this image we wanted to take up the

entire width of our parent and we can do

that by specifying this fill prop now

previously in older versions of nexjs

there was a layout prop that had a few

different options but layout has been

replaced with different options

including this fill prop so go check out

the documentation if you want to see

those new options and secondly we Define

this sizes prop so we're telling next JS

and I'll actually pull up these here

because there's quite a bit of details

here on sizes but it's really important

that if you're using fill you should

also use sizes the most important part

here is if the sizes property includes

something like 50 view width or 100 view

width in this instance which is a

percentage of the viewport width The

Source set or the number of images is

trimmed down to not include any values

which are too small to ever be necessary

so you get a really configure the

different variations of the image that

you want next.js to automatically serve

up depending on the viewport and the

device of your visitor now there's a

couple other cool things here one

there's this optional quality prop it

defaults to 75 I believe percent but you

can optionally do 100 if you would like

it's going to be a slightly bigger image

but for a background image that might be

nice to have you can have a nice blur up

placeholder which is really easy to do

when you're importing a local image that

local image nextges is going to be able

to automatically generate the blur data

URL which gives you that nice blur up

placeholder and has a better ux and the

last thing here is a style prop so this

is just using CSS you could do this

through a class name if you wanted to

too but we have object fit cover we

could also do something like contain in

we could do something like none I think

is another one you could have a couple

different options here on how you want

to

actually lay this out but I typically

use cover for most of these things let's

look at another example of using

multiple images with layout fill in a

grid pattern so on the left this image

looks pretty similar to the last one it

has fill it has some sizes and then I'm

also using object fit cover but you'll

notice that I've specified a relative

parent around it which is very important

and a height now the parents of this

element is a CSS Grid it's got a little

bit of spacing between the items we've

got some CSS magic of Auto fitting the

sizes so what happens here if I take

this element of the mountain image and

we add some more images to the grid so

let's do

let's do maybe six images here

so now what you'll see is that these

images are going to have this relative

position of their wrapping component and

it's going to have a height of 400

pixels and this value let me just

resize here a little bit

you get this really nice effect from CSS

grid where the combination of object fit

cover

means that this scales really well and

it can be responsive thanks to CSS grid

as well too so this is a really nice

pattern that I like to use okay the last

one I want to talk about is responsive

images which the great thing about the

image component is that they're

responsive by default so on the left

again I have an ALT tag I have a source

sizes and then I'm making the image

display full width but now what's really

cool is that by default what I resize

the viewport the image component is

automatically responsive so that's

really really nice and because I have a

flex parrot here I could also do

something like let's say I want

hello world another item I can display

that down below and I could have some

kind of card layout for example and I

can just use this really really nicely

now if you want to fine tune or tweak

any of the knobs on the image component

we have a full API reference in our

documentation including the ability to

change what service actually optimizes

your images through loaders so by

default and it works whether you

self-host or you use a managed service

you can optimize images on the next.js

server now if you for example want to

use a different service to optimize your

images you can specify a loader that

will make this very easy for you so if

you look at loader it takes in a

function this can Define the URL for any

service and you can pass in things like

the source the width and the quality and

it makes it really easy to swap out for

whichever service you prefer okay that's

all for this video hopefully you found

this helpful to see some practical

examples of how to use the image

component stay tuned for the next one

and let me know in the comments what

you'd like to see peace