Netlify Dynamic Site Challenge : Using the power of CDNs and Transformations for a visual feast

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

What I Built

I built a webpage to display the power of CDNs and image transformations.

Libraries used:

• I have used ReactJS to build this webapp
• I have also used Material UI to make the webpage responsive.

Assets used:

• For the purpose of this project, I used a set of preloaded images.
• I've used normal <img src={url} alt={text}/> tags, therefore, the code will run exactly the same even when the images are coming in the form of a url from a database.

Netlify CDN and transformations:

• As the code has been deployed on Netlify, the images are being fetched from the Netlify CDNs
• I utilised the power of image transformations that come out of the box with Netlfiy CDN
• It can be done with the help of query parameters like w for width, h for height, fit for fit, fm for format and q for quality

These transformations can allow us to control the amount of data being downloaded by the browser to display these assets, this can be especially helpful when we upload high quality images but want to show the same image in a small thumbnail.

UI and UX elements

• On top is the url, which reflects the image url with all the transformations that the user selected.
• The UI is basically divided into three parts
• Left side is the list of images that the user can select
• Middle part is the image being displayed based on the transformations - you will also find the caption below the image explaining the meaning of the fit you choose.
• Right side is the section from which the user can control transformations

On the right side you will also see the difference in the size of the image being downloaded by the user in real time with each user transformation.
For example:
A Quality 100 image will be bigger in terms of bytes than a Quality 1 image - this control is the biggest advantage of transformations!

Demo

Link to the website

Platform Primitives

I've used an image processing and delivery service, specifically a CDN (Content Delivery Network), to manage and optimize images dynamically.

1. Dynamic Image URL Construction

• I used a buildImageUrl function that dynamically constructs URLs based on various parameters like width, height, format, quality, and fit.

• These query parameters are controlled by the user on the UI and they request specific transformations from the Netlify Image CDN, which processes and serves optimized versions of the images based on these parameters.
  

const buildImageUrl = () => {
  const { url } = images[selectedImageIndex];
  return `${baseUrl}?url=${encodeURIComponent(url)}&w=${imageWidth}&h=${imageHeight}&fit=${fit}&fm=${format}&q=${quality}`;
};

Key Features Leveraged:
Width and Height: Dynamic resizing of images to fit within specified dimensions without downloading the full-size image, reducing bandwidth usage.
Format: Automatic conversion into different formats (e.g., WebP, JPG) based on the user's capabilities and settings, enhancing compatibility and performance.
Quality: Adjusting the compression level to balance between image quality and file size, crucial for performance optimization.
Fit: Specifies how images should fit within specified dimensions, which is essential for maintaining the aspect ratio or covering a specific area.

2. Fetching and Displaying Optimized Images

• I used a function to fetch the image from the constructed URL and calculate its file size.

• This demonstrates the image’s weight after being processed by the CDN, providing real-time feedback on optimization benefits.
  

const fetchImageSize = async () => {
  const response = await fetch(buildImageUrl());
  const blob = await response.blob();
  setFileSize(blob.size / 1024); // Convert bytes to KB
};

3. React Hooks for real time updates

• React's useEffect hook is used to automatically update the image whenever relevant parameters change.

• This ensures that any adjustments made to the settings by the user are immediately reflected in the image served, showcasing the real-time capabilities of the CDN.
  

useEffect(() => {
  fetchImageSize();
}, [imageWidth, imageHeight, fit, format, quality]);

I will be making another submission for this.

Conclusion
Rapid increase in media consumption have made CDNs a necessity. Netlify's powerful transformation features and ease of integration provide a much welcomed addition to the arsenal of developers.
I have tried to keep the UI/UX as interactive and user-centric as possible and also tried to educate the user with real time changes in sizes and definition of some terms on the UI.
I hope you all enjoy using the project as much as I enjoyed working on it.

Thank you!