Automatic Image Optimization & Dynamic Cropping in Next.js with Next Cloudinary - Dev Hints
Automatic Image Optimization & Dynamic Cropping in Next.js with Next Cloudinary - Dev Hints
Automatically optimize with responsive sizing and dynamically crop and resize images in a Next.js app using Next Cloudinary. Learn how to configure the CldImage component to add images to a page while leveraging Cloudinary tech for optimization and transformations.
📝 Next Cloudinary CldImage
https://next-cloudinary.spacejelly.de…
💾 Using the CldImage Component
https://github.com/colbyfayock/cloudi…
Instructor: Colby Fayock ( @colbyfayock )
—
Cloudinary helps developers build performant experiences for the web with powerful optimization and transformation APIs.
🚀 Get started with a free account!
https://cld.media/devhintsnextcldimage
#cloudinary #devhints #nextcloudinary #nextjs #images #optimization #videos #webdevelopment
Content
5.359 -> next.js has built in ways in order for
7.799 -> us to load images on the web but by
9.96 -> loading our cloudinary images using the
11.82 -> image tag we're passing our images
13.679 -> already optimized by Cloud Neri into the
16.199 -> next.js optimization toolset basically
18.3 -> doing double the work on top of that
20.34 -> we're limited with what we can do not
22.199 -> being able to use the full capabilities
23.76 -> of cloudinary tech instead we can use
26.279 -> next cloudinary which gives you all the
28.019 -> features you love of cloud Neri inside
30 -> of a nicely wrapped component to use
32.279 -> inside of an xjs project once next
34.8 -> cloudinery is installed and you've
36.36 -> imported your CLD image component you
38.88 -> can simply replace the existing image
40.8 -> tag with CLD image and instead of trying
43.8 -> to reference the entire cloudinary URL
45.899 -> we can pass in only the public ID to all
49.02 -> of our images to make sure they're
50.34 -> loading directly from cloudinary once
52.559 -> that change is made we can see that our
53.94 -> images are now loaded directly from the
55.86 -> cloudinary CDN we can also see that by
58.559 -> default all these images are loaded with
60.42 -> F Auto and Q auto meaning for F Auto
63.059 -> Cloud9 is going to automatically
64.5 -> determine the the most modern and
66.119 -> efficient format to serve to the browser
68.04 -> requesting the image and for Q auto it's
70.619 -> going to determine how much it can
72.24 -> compress the image without actually
73.979 -> distorting the image itself but making
76.08 -> sure that we're not wasting precious
77.76 -> kilobytes in size because the CLD image
80.58 -> component wraps the image component this
82.439 -> works the same with sizing where if I
84.479 -> pass in sizes of 50w since I have two
87 -> columns we can see that all of my
89.04 -> responsive sizes breakpoints are
90.78 -> generated all using cloudner urls we can
93.96 -> even take advantage of more awesome
95.22 -> features from floundery including
96.78 -> Dynamic cropping and resizing where
98.64 -> currently we have wide images and Tall
100.619 -> images but we want them to all look
102.36 -> uniform so for this example I'm going to
104.82 -> pass in a width and a height both of 600
107.88 -> pixels I'm going to pass a crop in of
110.759 -> fill where we can now see all of our
113.1 -> images are formatted nicely as a square
115.14 -> where we're also using gravity of Auto
117.24 -> to make sure that we're automatically
118.979 -> detecting the subject and centering it
120.84 -> as best as we can to learn more about
123 -> using the CLD image component with next
125.04 -> Cloud Nary head over to
126.56 -> nextcloudnery.space jelly.dev where you
128.88 -> can find the usage the configuration
130.92 -> documentation as well as a bunch of
133.02 -> examples including background removal
134.879 -> and zoom and pan so in review in order
137.28 -> to get the best out of our images inside
139.02 -> of an xjs application we can use the
141.3 -> next cloudinary Library we're after
143.52 -> importing our CLD image component we can
146.459 -> drop in replace our CLD image component
148.8 -> for the existing image tag gaining a
151.2 -> full variety of different features using
153 -> cloudery Tech including optimization
155.459 -> Dynamic cropping and resizing all
157.5 -> delivered from the cloudinary CDN
Source: https://www.youtube.com/watch?v=oj2-BcZ8szk