Using Images in Next.js (next/image examples)
Summary
TLDRこの動画スクリプトでは、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
🖼️ ウェブイメージ最適化の問題と解決策
第1段落では、ウェブページで画像を使用する際に直面する一般的な3つの問題について説明されています。1つは、画像の読み込みによるレイアウトシフトがユーザーに干扰を与えることです。2つ目は、ページや訪問者のデバイスに最適化されていない大きすぎる画像を読み込むことです。3つ目は、望むレイアウトを実際に画面に表示するのが難しいことです。これらの問題を解決するための方法として、image component index.jsが提案されています。
🛠️ ネクスト..jsの画像コンポーネントの使い方
第2段落では、ネクスト..jsの画像コンポーネントを使って、異なる方法で画像を表示する例について詳しく説明されています。基本的な使用方法から、背景画像を設定する方法、グリッドパターンでの複数画像の表示方法まで、様々な例が紹介されています。また、画像を最適化するためのallow listの設定や、画像フォーマットの指定方法なども説明されています。最後に、画像コンポーネントのAPIリファレンスについて触れられています。
Mindmap
Keywords
💡レイアウトシフト
💡オプティマイズ
💡ビューポート最適化
💡リモートイメージ
💡背景画像
💡CSS Grid
💡オブジェクトフィット
💡レスポンシブ画像
💡画像コンポーネント
💡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
تصفح المزيد من مقاطع الفيديو ذات الصلة
Banned From Adobe Stock!
Ultimate AI Midjourney V6 Architecture Guide
【2024年7月】最新版!CopilotやChatGPTの使い方|利用者は是非知っておくべき設定方法|著作権は?|普段使いの方にも必見の設定とは
Instant IDでLoRAが不要になる?【Stable Diffusion WebUIでInstant IDを使い同じ顔の人物を生成する方法】
【超有料級】AI画像×ショート動画で最強バズ動画を作って月100万円達成する方法【ChatGPT】【AI副業】
【2021年最新】軽く・安定して録画や配信しながらゲームができるOBSやクリップを撮る設定方法を紹介!【低スぺPCの方も必見!】【画質の問題も解消】
5.0 / 5 (0 votes)