Extracting Original Image URLs from Next.js Optimized Paths

Next.js is renowned for its automatic image optimization, significantly improving page load times by resizing, optimizing, and serving images via a built-in Image Component. However, when working with server-side rendered pages or static sites, you might encounter a scenario where you need to extract the original image URL from the optimized image paths generated by Next.js. This is especially true when working with RSS feeds, SEO meta tags, or any situation where the actual image URL is needed.

In this post, we'll dive into how you can retrieve the original image URLs from Next.js optimized image paths using a simple server-side script.

The Challenge with Next.js Image Optimization

When an image is served through Next.js's Image component, the src attribute doesn't directly point to the original image file. Instead, it points to an optimized version of the image, which is dynamically generated by Next.js. This optimization process includes resizing the image, changing its quality, or converting its format, all of which are aimed at enhancing performance.

The optimized image URL looks something like this:

/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.123abc.png&w=3840&q=75

Here, the url query parameter holds the original image URL, but it's encoded and part of a larger path that directs to the Next.js image optimization handler.

How to Extract the Original Image URL

To extract the original image URL, you need to decode the url query parameter from the optimized image path. Here's how you can do it:

Step 1: Fetch the HTML Content

First, fetch the HTML content of the page containing the image(s) you're interested in. This might be part of your server-side rendering logic or a static site generation script.

Step 2: Use Cheerio to Parse the HTML

With the HTML content fetched, use Cheerio (a server-side version of jQuery) to parse the HTML and locate the <img> tags.

Step 3: Extract and Decode the Image URL

For each <img> tag, check if the src attribute contains the path to Next.js's image optimization handler (/_next/image). If it does, parse the url query parameter, decode it, and you have your original image URL.

Here's a JavaScript snippet demonstrating these steps:

const cheerio = require('cheerio')

// Example HTML content
let html = `...` // Your fetched HTML here
let $ = cheerio.load(html)

$('img').each(function () {
  let imageUrl = $(this).attr('src')
  if (imageUrl.includes('/_next/image')) {
    const urlParams = new URLSearchParams(imageUrl.split('?')[1])
    let decodedImageUrl = urlParams.get('url')
    if (decodedImageUrl) {
      decodedImageUrl = decodeURIComponent(decodedImageUrl)
      console.log('Original Image URL:', decodedImageUrl)
    }
  }
})

Conclusion

Extracting the original image URLs from Next.js's optimized image paths is straightforward once you understand the structure of the URLs. This technique can be particularly useful for SEO, creating RSS feeds, or whenever you need the direct link to an image bypassing Next.js's optimization layer.

Remember, while Next.js's image optimization is beneficial for performance, there might be cases where accessing the original image directly is necessary, and with this method, you can easily do so.