NextJS 14 Image Optimisation using Imgix (2024)

In this comprehensive tutorial, we'll dive deep into the world of image loading by leveraging NextJS's Image component, Imgix, and AWS S3. You'll learn how to create an Imgix Source, set up an S3 bucket, and create an IAM user with the necessary permissions and access keys. You'll also learn how to beautifully integrate these elements using NextJS's Image component with the loader prop and loader function.
This video is perfect for those who want to understand the nitty-gritty details of image loading in NextJS, using Imgix for optimal image handling and AWS S3 for reliable storage. By the end of this tutorial, you'll have a solid understanding of the entire process, and be able to apply these skills to your own projects for efficient, professional image handling.
Timestamps:
0:50 Create your imgix account
2:32 Create an S3 bucket, IAM user, permissions and access keys
5:30 Create a source on your imgix account
6:40 Create a NextJS image component with a imgix loader prop
14:30 Optimise your image with imgix URL query parameters
Remember to subscribe for more detailed programming tutorials and hit the like button if you found this video helpful. Drop a comment if you have any questions or suggestions for future videos. Happy coding!

[@user-ps6tt3kp7l]

Thank you for teaching❤

[@taylorlindoresreeves]

Welcome!

[@salieflewis]

My understanding was Next.js does optimization inherently within its Image component, is Imgix more effective at compression?

[@taylorlindoresreeves]

For sure, NextJS does indeed do some optimisation. But with the loader prop for the image component you get the benefit of handing off your images to an external source such as S3 bucket, which is always beneficial in terms of performance. But with Imgix as an additional caching and compression layer, you get fine grained control of your images, all while having them stored in an external source. Technically you could store 20mb images and not have to worry about how to handle compression and optimisation in the business logic or frontend layer image component (I think NextJS uses Sharp). You simply use the imgix URL and provide it with format and compress query parameters.

[@salieflewis]

@@taylorlindoresreeves That makes sense! Do you know if there is a similar workflow that can be used alongside Expo’s Image component?

[@taylorlindoresreeves]

@@salieflewis hmm I’m not sure honestly, I don’t have experience with Expo. Good luck 🤞

[@randyhill6284]

promo sm ✋