1
00:00:03,000 --> 00:00:06,301
To conclude this section on Image Optimization,

2
00:00:06,301 --> 00:00:09,243
I want to test a production build of our app,

3
00:00:09,243 --> 00:00:12,675
and show you how images work in that environment.

4
00:00:12,675 --> 00:00:15,249
Let me go and stop the dev server,

5
00:00:15,249 --> 00:00:17,065
and maximize the terminal,

6
00:00:17,065 --> 00:00:19,578
so we can see the full build output.

7
00:00:22,805 --> 00:00:25,347
Ok, our production build is ready.

8
00:00:25,347 --> 00:00:27,231
Now let's start the server,

9
00:00:28,027 --> 00:00:29,976
and to test our app we want to

10
00:00:29,976 --> 00:00:31,860
look at the Network requests.

11
00:00:31,925 --> 00:00:33,765
Let's go and reload the page,

12
00:00:33,765 --> 00:00:37,121
doing a full "empty cache and hard reload".

13
00:00:37,121 --> 00:00:37,957
You can see that

14
00:00:37,957 --> 00:00:41,069
the images have been converted to "webp".

15
00:00:41,069 --> 00:00:43,056
The first one is loaded right

16
00:00:43,056 --> 00:00:44,494
after the stylesheet,

17
00:00:44,563 --> 00:00:47,680
because it has the "priority" property set.

18
00:00:47,680 --> 00:00:49,885
While the other two are loaded

19
00:00:49,885 --> 00:00:51,869
after the "main-app" script

20
00:00:51,942 --> 00:00:54,373
because they use lazy loading.

21
00:00:54,373 --> 00:00:56,925
If we look at the details for a request

22
00:00:56,925 --> 00:00:59,985
you can see that the URL is always the one

23
00:00:59,985 --> 00:01:03,169
for the special Next.js image path,

24
00:01:03,169 --> 00:01:05,596
and then the "url" parameter points

25
00:01:05,596 --> 00:01:07,608
to the original Strapi image.

26
00:01:07,677 --> 00:01:09,972
So everything works pretty much

27
00:01:09,972 --> 00:01:11,822
like with the dev server.

28
00:01:11,896 --> 00:01:15,447
In fact, if we look inside the ".next" folder

29
00:01:15,447 --> 00:01:17,317
we should also see the image

30
00:01:17,317 --> 00:01:18,987
files in the local cache.

31
00:01:19,054 --> 00:01:21,378
This is the one for "Hades".

32
00:01:21,378 --> 00:01:26,657
Note how the image has been resized to "640x360",

33
00:01:26,657 --> 00:01:30,395
and the file size is just 31KB.

34
00:01:30,395 --> 00:01:33,274
So, there isn't much difference between

35
00:01:33,274 --> 00:01:35,194
dev and production server,

36
00:01:35,268 --> 00:01:38,149
when it comes to Image Optimization.

37
00:01:38,149 --> 00:01:41,091
Now, for completeness I shall mention that

38
00:01:41,091 --> 00:01:44,245
it is possible to use the Image component

39
00:01:44,245 --> 00:01:46,787
even when doing a static export.

40
00:01:46,787 --> 00:01:50,652
But only if we don't use the default image loader.

41
00:01:50,652 --> 00:01:54,684
In other words, if we don't use the Next.js server

42
00:01:54,684 --> 00:01:57,374
to convert and resize the images.

43
00:01:57,374 --> 00:01:59,851
One alternative is to set the

44
00:01:59,851 --> 00:02:02,328
"unoptimized" option to true.

45
00:02:02,413 --> 00:02:05,169
This effectively tells the Image component

46
00:02:05,169 --> 00:02:08,477
to just use the original "src" URLs.

47
00:02:08,477 --> 00:02:11,320
Let me show you how this works in practice,

48
00:02:11,958 --> 00:02:14,184
if we do another production build.

49
00:02:18,351 --> 00:02:21,501
Since we configured "output" to "export"

50
00:02:21,501 --> 00:02:25,650
it generated a static website in the "out" folder.

51
00:02:25,650 --> 00:02:28,669
Now, the build process does not download

52
00:02:28,669 --> 00:02:30,934
any of the images from Strapi.

53
00:02:31,009 --> 00:02:33,643
We do have some images here actually,

54
00:02:33,643 --> 00:02:35,353
but these have been copied

55
00:02:35,353 --> 00:02:36,998
from our "public" folder.

56
00:02:37,064 --> 00:02:39,258
In fact, we should really delete

57
00:02:39,258 --> 00:02:40,699
these old images now.

58
00:02:40,767 --> 00:02:43,847
We only needed them before moving to Strapi.

59
00:02:43,847 --> 00:02:46,089
Let me do another build, without

60
00:02:46,089 --> 00:02:47,419
those extra images.

61
00:02:48,667 --> 00:02:51,948
Ok, let's serve the static website.

62
00:02:52,947 --> 00:02:54,891
And let's go and reload the page

63
00:02:54,891 --> 00:02:56,410
in the browser once more.

64
00:02:56,607 --> 00:02:58,354
We can see straight away that

65
00:02:58,762 --> 00:03:01,202
the images are in "jpeg" format.

66
00:03:01,202 --> 00:03:03,331
And if we look at the request URL,

67
00:03:03,502 --> 00:03:05,423
you can see that the image is

68
00:03:05,423 --> 00:03:07,278
loaded directly from Strapi.

69
00:03:07,344 --> 00:03:09,593
So this is how it works with

70
00:03:09,593 --> 00:03:11,601
the "unoptimized" option.

71
00:03:11,682 --> 00:03:14,745
Since we're not running a Next.js server

72
00:03:14,745 --> 00:03:17,534
we cannot use any of the optimizations

73
00:03:17,534 --> 00:03:18,928
done by the server,

74
00:03:19,001 --> 00:03:21,802
like converting to the WebP format,

75
00:03:21,802 --> 00:03:23,642
or resizing the images.

76
00:03:23,722 --> 00:03:26,421
But we can still use the Image component

77
00:03:26,421 --> 00:03:29,559
which enables some browser optimizations,

78
00:03:29,559 --> 00:03:31,698
like setting the "fetchpriority"

79
00:03:31,698 --> 00:03:32,968
on the first image,

80
00:03:33,035 --> 00:03:36,265
or, a better example would be lazy loading,

81
00:03:36,735 --> 00:03:38,760
that's enabled on this other image.

82
00:03:38,760 --> 00:03:41,109
So there is still a small benefit

83
00:03:41,109 --> 00:03:43,173
in using the Image component,

84
00:03:43,244 --> 00:03:45,689
even with the "unoptimized" option.

85
00:03:45,689 --> 00:03:47,401
Although I have to say that

86
00:03:47,401 --> 00:03:49,599
you could also set the "loading"

87
00:03:49,599 --> 00:03:50,836
attribute yourself

88
00:03:50,905 --> 00:03:54,426
directly on the standard HTML "img" element,

89
00:03:54,426 --> 00:03:57,576
without using the Next Image component.

90
00:03:57,576 --> 00:03:59,616
Now, there's also another option:

91
00:03:59,616 --> 00:04:02,099
you can set the "loader" property

92
00:04:02,099 --> 00:04:04,339
which is useful if you host your

93
00:04:04,339 --> 00:04:06,230
images in a cloud platform,

94
00:04:06,300 --> 00:04:09,939
like "akamai", "cloudinary", or "imgix".

95
00:04:09,939 --> 00:04:12,417
These are services that specialize

96
00:04:12,417 --> 00:04:14,385
in managing digital assets.

97
00:04:14,458 --> 00:04:17,678
Or you can also write your own "custom" loader,

98
00:04:17,678 --> 00:04:19,723
in which case you also need to

99
00:04:19,723 --> 00:04:21,630
set the "loaderFile" option,

100
00:04:21,699 --> 00:04:23,384
pointing to the JavaScript

101
00:04:23,384 --> 00:04:24,941
file with your own code.

102
00:04:25,005 --> 00:04:27,185
You can find out more about this

103
00:04:27,185 --> 00:04:29,160
in the Next.js documentation.

104
00:04:29,229 --> 00:04:31,916
The page for the Image component includes

105
00:04:31,916 --> 00:04:33,620
the Configuration Options,

106
00:04:33,686 --> 00:04:35,983
and if we look at "loaderFile"

107
00:04:35,983 --> 00:04:37,997
we can see some sample code.

108
00:04:37,997 --> 00:04:41,534
Basically, a custom loader is simply a function

109
00:04:41,534 --> 00:04:44,411
that returns the URL for a given image,

110
00:04:44,411 --> 00:04:48,295
given some parameters like "width" and "quality".

111
00:04:48,295 --> 00:04:50,650
So if you want to host your images

112
00:04:50,650 --> 00:04:52,174
on some other platform

113
00:04:52,244 --> 00:04:55,135
you can always write your own loader file.

114
00:04:55,135 --> 00:04:57,314
That said, it seems to me that

115
00:04:57,314 --> 00:04:59,426
you only get the full benefits

116
00:04:59,426 --> 00:05:00,975
of the Image component

117
00:05:01,045 --> 00:05:03,572
if you also use the Next.js server

118
00:05:03,572 --> 00:05:05,802
to do the image optimizations.

119
00:05:05,876 --> 00:05:08,309
So that's what we'll do in this project.