Image Optimization with Sanity.io

This website is powered by Next.js and Sanity.io.

You'll see a bunch of images below that are stored in my Sanity project. When you upload an image through Sanity Studio, something cool happens afterward. To list a few, Sanity generates a low-quality image preview, it remembers the original width and height values, and automatically calculates the aspect ratio; of the uploaded image. (You can find more information in detail here.)

Another cool thing about having Sanity manage your images is that you can request different sizes of the original image to the Sanity image backend by specifying URL-parameters in your request. (more info here)

Now with these awesome Sanity-provided image solutions, we can implement responsive images that solve resolution switching - the browser will determine what size of the image it needs to fetch depending on its current viewport size.

In other words, the browser will download a smaller version of the image for mobile devices with narrower screens, resulting in faster image load and less bandwidth usage.

While I was at it, I decided to make an image viewer component as well, similar to that of Sanity.io docs, which can be activated by clicking an image.

Image viewer in Sanity.io documentation.
Image viewer in Sanity.io documentation.

For fun, I asked ChatGPT to generate a list of descriptions I can use to describe the images.

* the list of descriptions were randomly generated so they are not at all relevant to the actual image..! They are just readable lorem ipsums :)

Here are the list of images:

An elegant dinner party is taking place in a grand ballroom, with guests dressed in their finest attire.
An elegant dinner party is taking place in a grand ballroom, with guests dressed in their finest attire.

An elegant dinner party is taking place in a grand ballroom, with guests dressed in their finest attire. Crystal chandeliers sparkle overhead, casting a warm glow over the room. Waiters circulate with trays of champagne, while others serve platters of delicious food. The atmosphere is one of sophistication and celebration, as laughter and conversation fill the air.

A group of friends are on a camping trip in the wilderness, surrounded by towering trees and the sound of a babbling brook.
A group of friends are on a camping trip in the wilderness, surrounded by towering trees and the sound of a babbling brook.

A group of friends are on a camping trip in the wilderness, surrounded by towering trees and the sound of a babbling brook. They sit around a campfire, roasting marshmallows and telling stories late into the night. The light of the fire dances on their faces, and the stars twinkle overhead. The peace and tranquility of the forest makes it the perfect escape from the hustle and bustle of daily life.

A city skyline is lit up at night, with tall skyscrapers reaching towards the stars. Cars and people bustle about, the sounds of the city filling the air. A couple sits on a bench, taking in the view and holding hands. The energy of the city is palpable, and the lights create a magical atmosphere that inspires wonder and awe.

A woman stands on a beach at sunset, the ocean stretching out before her as far as the eye can see. The sky is ablaze with shades of orange and pink, and the sound of the waves is a soothing background to the stillness of the moment. She closes her eyes and takes a deep breath, feeling the peace and serenity of the natural world.

An artist is working in his studio, surrounded by paints, brushes, and canvases.
An artist is working in his studio, surrounded by paints, brushes, and canvases.

An artist is working in his studio, surrounded by paints, brushes, and canvases. The room is filled with the colors and textures of his creations, as he works with intensity and focus. The passion for his craft is evident in every stroke, as he creates a masterpiece that will captivate and inspire.

A group of children are playing in a park, their laughter and giggles filling the air.
A group of children are playing in a park, their laughter and giggles filling the air.

A group of children are playing in a park, their laughter and giggles filling the air. They run, climb, and play on the swings and slide, while others have a picnic on a blanket in the grass. The joy and innocence of childhood is on full display, and the park provides the perfect backdrop for their adventures.

A couple is on a hike through the mountains, surrounded by rugged peaks and breathtaking vistas.
A couple is on a hike through the mountains, surrounded by rugged peaks and breathtaking vistas.

A couple is on a hike through the mountains, surrounded by rugged peaks and breathtaking vistas. They walk hand in hand, taking in the beauty of their surroundings and the freedom of the great outdoors. The crisp, fresh air and the sounds of nature make for a truly invigorating experience.

A family is gathered for a reunion, with people of all ages coming together to catch up and reminisce.
A family is gathered for a reunion, with people of all ages coming together to catch up and reminisce.

A family is gathered for a reunion, with people of all ages coming together to catch up and reminisce. Food and drinks are shared, and laughter and conversation fill the air. The love and connection of family is evident in every smile and hug, and the reunion is a testament to the power of tradition and togetherness.

A couple is dancing in a dimly lit ballroom, their bodies moving in perfect harmony to the sound of a live band.
A couple is dancing in a dimly lit ballroom, their bodies moving in perfect harmony to the sound of a live band.

A couple is dancing in a dimly lit ballroom, their bodies moving in perfect harmony to the sound of a live band. The room is filled with the glow of candlelight, and the other guests look on in admiration. The romance and grace of the moment make it a true fairy tale come to life.

An astronaut is floating in the weightlessness of space, looking down at the earth below.
An astronaut is floating in the weightlessness of space, looking down at the earth below.

An astronaut is floating in the weightlessness of space, looking down at the earth below. The sight is breathtaking, with the blue and green of the planet set against the darkness of the cosmos. The sense of awe and wonder at the vastness of the universe is palpable, and the astronaut is filled with a sense of adventure and discovery.