DEV Community

Cover image for Net Gala: Netlify Img Transforms
Nabil Alamin
Nabil Alamin

Posted on • Updated on

Net Gala: Netlify Img Transforms

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

It's more of a snack than a feast, but I made a gallery app to recreate pieces of a couple of sites I found on awwwards. It's got nice transitions, has a monochromatic feel and takes advantage of Netlify's Image CDN and it's transforms feature.


Give it a try: Link ✨
Here's the CodeπŸ’»

Platform Primitives

I used the CDN for fetching and transforming images in my NextJS app, it also provides some amazing cache out of the box. Using the custom loader prop in the next/image component, I was able to apply the following transforms:

  • Sizing
  • Object Fit
  • Format
  • Quality

Here's a snippet of the loader:

  const loadImage = (args: ImageLoaderProps) => {
    const { src } = args;

    return `.netlify/images?url=${src}&w=${transforms.width}&h=${transforms.height}&q=${transforms.quality}&fit=${}&fm=${transforms.format}`;
Enter fullscreen mode Exit fullscreen mode

And here's the UI implementation:
Transformation UI

Generally, when using NextJS 13.5+ with Netlify, you don't need a custom loader, the cdn works by default with next/image but I needed the loader for some of the transforms and flexibility in rendering. Thanks @hrishikeshk for pointing that out.


It was a fun experience building this, I got the chance to implement some nice designs and transitions, play around with CSS and try out a new component library. I'm also really delighted with how the bottom section turned out:


Thanks for reading and have a great day πŸ‘‹


...I wonder if anyone got the pun in the title πŸ€”

Top comments (2)

philiphow profile image
Philip How

Great animations! The interface is really intuitive.

arndom profile image
Nabil Alamin

Glad you liked it 😊