Resize and Optimise Images Using Free API - ImageCDN

Sh Raj - Apr 15 - - Dev Community

Resize and Optimize Images Using Free API - ImageCDN

In the digital age, images are the visual language of the web, conveying stories, emotions, and information across the globe. However, with great image quality comes great responsibility—responsibility for optimizing these images to ensure fast load times and minimal bandwidth usage. This is where ImageCDN steps in, offering a free API that enables users to resize and optimize images with ease.

https://imagecdn.app/

About ImageCDN

ImageCDN is on a mission to revolutionize the way images are handled on the web. Their goals are clear:

  1. Improve Image Quality: By providing advanced image compression algorithms, ImageCDN aims to enhance the quality of images while reducing their size.

  2. Enhance Web Performance: Speed matters on the web, and ImageCDN's globally distributed CDN ensures that resized and optimized images load quickly, improving overall website performance.

  3. Accessibility for All: Whether you're a developer working on a personal project, a startup with a limited budget, or an open-source enthusiast, ImageCDN is designed to be accessible to all. Their service empowers users to maximize the impact of their images without breaking the bank.

How to Use ImageCDN

ImageCDN's API is straightforward and user-friendly, making image optimization a breeze. The primary endpoint, GET /v2/image/{image}, is where the magic happens. Let's take a closer look at how you can leverage this API:

Examples

Suppose we have an image hosted on Unsplash and we want to resize it to 200x400 pixels:

https://imagecdn.app/v2/image/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1540665569139-922f374b8657?width=200&height=400
Enter fullscreen mode Exit fullscreen mode

This example demonstrates how to use the API to fetch an image from a URL, resize it to the specified dimensions, and return the optimized version.

Query Parameters

When making a request to ImageCDN's API, you can customize the output using the following query parameters:

  • image: A URL-encoded link to the image you wish to process. The image must be accessible to the ImageCDN service.
  • height: The desired height of the image in pixels.
  • width: The desired width of the image in pixels.
  • format: Override the output format of the image. Options include webp, jpg, or png. Defaults to the best format supported by the browser.
  • fit: Specifies how the image should fill the provided space. Options include cover, contain, fill, inside, or outside. Defaults to cover.

Why Choose ImageCDN?

  • Ease of Use: With a simple API structure and clear documentation, ImageCDN makes image optimization accessible to developers of all levels.

  • Advanced Compression: ImageCDN's compression algorithms ensure that images are optimized for web use without sacrificing quality.

  • Global CDN: Leveraging a globally distributed Content Delivery Network (CDN), ImageCDN ensures that your resized images load quickly from anywhere in the world.

  • Cost-Effective: The best part? It's free to use! ImageCDN is committed to providing a valuable service to the web development community without any cost barriers.

Get Started Today!

Ready to supercharge your web performance with optimized images? Head over to ImageCDN to explore the API documentation, examples, and start resizing and optimizing your images today. Remember, better images mean better web experiences for everyone.

--- 👻 (dev.to)

GET Image Using cloudinary cdn :- https://res.cloudinary.com/practicaldev/image/fetch/{Image URL}

// Samle URLs
https://res.cloudinary.com/practicaldev/image/fetch/s--bgqVJtWi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/

https://res.cloudinary.com/practicaldev/image/fetch/s--bgqVJtWi--/https://avatars.githubusercontent.com/u/66713844?v=4

https://res.cloudinary.com/practicaldev/image/fetch/s--bgqVJtWi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://avatars.githubusercontent.com/u/66713844?v=4


https://res.cloudinary.com/practicaldev/image/fetch/https://avatars.githubusercontent.com/u/66713844?v=4

https://res.cloudinary.com/practicaldev/image/fetch/s--bgqVJtWi--/https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/018f0c05-e177-4e4e-86c3-4f2ce2518df8/original=true/00438-1318222633.jpeg


// Deleted or not 

https://res.cloudinary.com/practicaldev/image/fetch/https://raw.githubusercontent.com/mediagur/images/main/Screenshot%202024-04-13%20at%202.38.53%E2%80%AFPM.png
Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .