Introduction

Have you ever struggled with using external file storage URLs (Supabase storage) in your NextJs Image component? You're not alone. When I first attempted it, I encountered numerous challenges that affected both development efficiency and website performance.

In this post, I'll walk you through the steps I used to render external URLs in NextJS's Image component.

Even if your project is an image directory, e-commerce, or relies heavily on images. Don't worry, this guide will help you resolve the bottleneck of image optimization and external image URLs that satisfy both technical requirements and Google's quality content guidelines.

Why Use NextJS Image Component to Render Images?

NextJS Image component is superior to standard HTML image tags for rendering optimized images and when working with external storage solutions like Supabase storage or Cloudinary.

See Also: How to Implement Og Image in NextJs.

Images are part of a webpage's total weight. According to a web report on images, it states that images make up approximately 50% of an average website's page size. This directly impacts your site's Largest Contentful Paint (LCP) performance—a critical Core Web Vital that Google uses to evaluate user experience and search ranking.

Aside from the above, the NextJS Image component also addresses some concerns about image rendering:

1. Automatic format selection: Images are converted to modern formats like WebP and AVIF, which provide superior compression without quality loss
2. Responsive sizing: Automatically renders images based on the visitor's device.
3. Layout stability: When a web page is loading, it prevents layout shifts and maintains and maintains visual consistency.
4. Lazy loading: Defers images that are not focused on (off-screen) from loading until users scroll to them
5. Blur placeholders: It accepts a placeholder (blurred image) before the actual image completes loading.

With these features, your site can significantly improve its performance, better user experience, and ultimately, search engine rankings.

How to Load Image from Supabase Storage in Next.js using Image Loader Props .

Step1

In your next.config.js (if yours is in .mjs, change it to .js) add this code

The images object has a key loader with your supabase project URL as value

Step2

Create a utils.js file and create a supabaseLoader function and this code.

app/utils.js

The return https.. is your file storage URL. Make changes to following to match your file storage settings, bucket_name = storage_name and nested folder name (if any).

Step3

You can now use the supabase loader function with next/image in any file.

Let's break down the key properties:

- loader: Points to our custom `supabaseLoader` function.

- src: The source URL from Supabase storage.

- alt: Descriptive text for accessibility (always include this!).

- fill: Makes the image fill its parent container.

- sizes: Helps browsers determine the image size at different viewport widths.

- style: Controls how the image fits within its container.

- priority: Marks this image as high priority for loading (useful for above-the-fold images).

With this implementation, NextJS will optimize the image on demand as users request them. This approach significantly improves your Largest Contentful Paint (LCP) time, typically rendering images within 2.5 seconds—well below the 4.0-second threshold that Google considers problematic.

See Also : Why Create React App (CRA) was Deprecated.

For dynamic images where you don't have blur data URLs readily available, you can use a simple color placeholder:

See Also: Build a FullStack Application with Next.js App Router and MongoDB

Best Practices for Image Optimization in NextJS.

Based on my experience implementing this solution across multiple projects, here are some best practices to follow:

1. Use descriptive alt text: Enhance accessibility and SEO with meaningful descriptions.

2. Set appropriate priority: Mark above-the-fold images as `priority={true}`.

3. Implement responsive sizing: Use the `sizes` attribute to help browsers select optimal images.

4. Choose the right format: Consider allowing WebP and AVIF formats for modern browsers.

5. Optimize image dimensions: Don't load 4000px images for 400px containers.

6. Use blur placeholders: Provide a smooth loading experience for users.

7. Lazy load below-the-fold images: Defer loading until users scroll to that content.

Following these practices will ensure your images load quickly and efficiently while maintaining visual quality.

Conclusion.

NextJs ensures your website offers images that are optimized for different devices by using the loader functions when rendering images from external URLs.

The loader function will supply ({src}) source to dynamically generate picture URLs at various sizes.

The `srcset`attribute is then automatically created using this information, ensuring that users see the best possible picture size for their viewport, reducing needless data transmission, and speeding up load time.

The default loader serves images straight from the Next.js server, optimizing them from any web location via the built-in Image Optimization API of Next.js. You can, however, develop your loader function with a few lines of JavaScript code (same as above) if you would rather serve images straight from a custom image server or a Content Delivery Network (CDN).

Please Share.