Background:

The image handling process involves uploading images to Amazon S3 and using Amazon CloudFront as a Content Delivery Network (CDN) to efficiently serve these images. The primary goal is to compress the images served by CloudFront to enhance website performance and reduce loading times. To achieve this efficiently, the team has decided to implement the aws-image-handler solution, available on GitHub at https://github.com/aws-solutions/serverless-image-handler.

Support Media Types:

The image handling solution supports two CDN links:

By default, images are served with the domain https://static.nftgo.io or https://lh3.googleusercontent.com, and previews will be translated to the WebP format. However, if an image cannot be properly handled or processed, it will be served directly from https://static-image.nftgo.io, which contains the original media without any pre-processing.

Note: The image URL may not necessarily start with the specified domains, as the original image might not have been saved in the designated CDN links yet.

Supported Original Media Formats:

The aws-image-handler efficiently handles various media formats and automatically converts them to the appropriate format. The supported original media formats and their corresponding conversions are as follows:

image/avif -> webp
image/png -> webp
image/jpeg -> webp
image/jpg -> webp
image/, video/ -> webp
image/svg -> webp
image/tiff -> webp
image/apng -> webp
image/webp -> webp
image/gif -> gif
image/svg+xml -> svg

Image Handle Example

One of the image handling functional which allows reducing the size of the image while maintaining the aspect ratio.

For domain `https://static.nftgo.io`:

The resize operation is performed using the following URL query parameters.

https://static.nftgo.io/{path}?size={width}x{height}&fit=1

{path}: The path of the image to be resized.
{width}: The desired width of the resized image.
{height}: The desired height of the resized image.
fit=1: This parameter ensures that the image is adjusted to the specified {width} and {height}, while preserving the aspect ratio.

For domain `https://lh3.googleusercontent.com`:

You can use the following parameters to process the image:

Original image: {Original_image_url}

=w{size}: Set the maximum width of the image. size=0 means to retrieve the original image.
Example: {Original_image_url}=w500
=h{size}: Set the maximum length of the image.
Example: {Original_image_url}=h600
=s{size}: Specify to retrieve a square with a length of size.
Example: {Original_image_url}=s400