Netlify Dynamic Site Challenge : Building a All in one Image playground with Netlify Image CDN
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-02 17:50:27

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): Visual Feast.*

## Introduction
In the digital era, captivating visuals are crucial for engaging audiences and conveying messages effectively. As websites evolve to become more dynamic and interactive, the need for efficient image management and delivery solutions becomes paramount. Netlify Image CDN offers a powerful toolkit for developers to optimize, transform, and deliver images seamlessly, enhancing user experience and performance. In this article, we'll delve into how to leverage Netlify Image CDN

## What I Built
I have built an Image Gallery using Angular and Netlify's Image CDN, which showcases dynamic images with the help of Netlify's image transformation capabilities. Additionally, based on `Let’s Get Dynamic! Ideas for the Netlify Dynamic Site Challenge` I have created a Social Media Image Optimizer tool that allows users to upload images, select their desired social media platform, and optimize the images for the best format and size, making them look stunning on platforms like Instagram and Facebook.

## Demo

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgo9i3pueys55rnt0058.png)

Demo link : [Click Here](https://img-playground.netlify.app/)
{% embed https://img-playground.netlify.app/ %}

### Social Media Optimizer 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/md108v3gikrnypqsvrv2.png)

## Platform Primitives
### Netlify Image CDN
Netlify Image CDN serves as the backbone of our project, providing us with a robust infrastructure for image optimization and delivery. By leveraging Netlify's on-demand image transformation capabilities, we can dynamically manipulate images based on various parameters such as width, height, format, quality, and more. This enables us to deliver optimized images tailored to the specific needs of our application and users.

Use below transformation options below by following their [documentation ](https://docs.netlify.com/image-cdn/overview/) you can easily apply image transformation 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guhaprh5ig10vo08qkw4.png)

Here's an outline of apps built with Angular and integrated with the Netlify Image CDN:

**Image Gallery:**
- Built using Angular and Netlify's Image CDN
- Showcases dynamic images using `Unsplash` image API
- Utilizes Netlify's image transformation capabilities

**Social Media Image Optimizer:**

- Allows users to upload images and select their desired social media platform
- Optimizes images for the best format and size
- Supports platforms like Instagram, Facebook, and others
- Built using Angular and Netlify's Image CDN

**On-Demand Image Transformation**:
   - Integrated Netlify Image CDN to dynamically manipulate images at the time of delivery.
   - Utilized parameterized transformation by adjusting parameters like width, height, quality, format, fit, and position in the image URL.

To transform an image, request `/.netlify/images` with below query parameters that specify the source asset and the desired transformations.

```typescript
// for height and width w and h parameter
/.netlify/images?url=/owl.jpeg&w=50&h=50'
//for fit = [contain (default), cover, fill]
/.netlify/images?url=/owl.jpeg&fit=cover&w=50&h=50'
//for Position = [top, bottom, left, right, center (default)]
/.netlify/images?url=/owl.jpeg&fit=cover&w=50&h=50&position=left'
//for Format = [avif,jpg,png,webp,gif]
/.netlify/images?url=/owl.jpeg&fm=png'
//for quality q parameter supports whole integers from 1 to 100
/.netlify/images?url=/owl.jpeg&fm=avif&q=50'
```

**Format Optimization**:
   - Supported modern image formats like WebP and AVIF for optimal compression efficiency, reducing file sizes while maintaining image quality and improving load times.

**Performance Enhancement**:
   - Optimized image delivery and reduced file sizes contributed to faster page load times and enhanced user experience.

**Bandwidth Efficiency**:
   - Implemented efficient image compression and delivery techniques to minimize bandwidth usage, suitable for applications with large amounts of visual content or bandwidth-constrained environments.

**Developer Productivity**:
    - Netlify Image CDN automated image optimization and delivery tasks, freeing up developer time and resources to focus on building and iterating on core application functionality.

{% embed https://dev.to/chintanonweb/netlify-dynamic-site-challenge-building-blob-playground-with-netlify-blob-1im4 %}
{% embed https://dev.to/chintanonweb/netlify-dynamic-site-challenge-building-news-article-cache-management-playground-4f4a %}