An image CDN is a regular content delivery network topped with a set of software enhancements to improve the underlying CDNs functionality for optimizing and transforming images in real-time, thereby making it more suitable for image delivery. One of the most technically savvy providers of image CDNs is ImageEngine.
Before understanding how images are managed under ImageEngine and why they should be integrated with Sanity, it’s important to know the image management process of Sanity first.
Sanity manages the image through a pipeline and distributes it globally at the edge. Anytime an image is requested, a new image is created and automatically cached around the user to deliver maximum frontend performance.
Images are represented as a field in a document or embedded in a text block. It might include additional information such as caption, credit, and specific crop. The actual image data to be displayed is referenced as an asset.
To present images, get the base URL of the image from the asset.
Here, we have a document “type - person” with the field image, the base URL can be fetched with this query:
Get the reference asset of the image to extract the URL only.
Configure the URL with projectID and dataset. Import the right path to the root project file. Like this:
Use this builder syntax to create the urls:
ImageEngine has a global network of servers for faster delivery of the optimized images. So, the integration page load is faster than ever for improved core web vitals, SEO, and user experience. ImageEngine’s image CDN uses the closest node to the user to deliver the asset fast. Before delivering an image to the end-user, it detects the user’s device and optimizes the images for the requesting device.
The device-aware image CDN from ImageEngine performs edge-computing and significantly reduces the website payload. It supports:
Device detection: Distributes device-specific images from cache for faster image delivery.
Image resizing: Perfectly optimizes images without interrupting the existing environment.
Global CDN: Delivers the image quickly via a highly distributed geographical network.
Adaptive compression: Performs compression based on PPI (Pixels Per Inch) supported by the users’ devices.
ImageEngine can be integrated on the webpage in different manners. Prefixing allows the complete origin image URL to be prefixed by an ImageEngine delivery address. In this case, no DNS changes are required.
If a custom CNAME is preferred, the CNAME can be used directly when an origin is attached to the engine.
ImageEngine simplifies the image management process and transforms images into different competitive formats such as AVIF, WebP, JPG, and many more.
WebP: WebP is an incredibly useful format as it offers both performance and features. Unlike other formats, WebP supports both lossy and lossless compression, as well as transparency and animation.
JPEG: This format is best for still images, real-world images, and complex coloring.
AVIF: AVIF not only has superior image quality but also supports 10 and 12 bit color at full resolution, resulting in images that are up to 10 times smaller than other known formats.
ImageEngine’s image CDN also reduces image payload by an average of 84% in WebP images and 79% in JPEG images.
Integrating the ImageEngine with Sanity is very easy and helps in optimizing, converting, and delivering the image files for quick access. Listed below are five steps to integrate ImageEngine API with Sanity:
Step 1: Sign-up the ImageEngine Account to optimize images and to get a delivery address to boost web performance.
Step 2: Specify the origin of the images. Enter the Sanity website URL: https://www.sanity.io as image origin. After specifying the origin of the images, ImageEngine will generate a delivery address.
Step 3: To integrate the ImageEngine with Sanity follow the methods below-mentioned steps building upon the image-URL package:
- Prefixing Method
Then the image src URL will be like:
- Delivery Address Method
The other method would be to replace the cdn.sanity.io with the ImageEngine delivery address in the image tag:
Then the image src URL will be like this:
Thus, ImageEngine CDN integrates with Sanity to optimize your web performance.
Use the control panel to customize the account anytime. The settings, origin, and delivery address can be changed later on.
Generally, there is a significant difference between the file sizes but there is a negligible difference in image quality. Furthermore, the most compressed AVIF image format is supported by ImageEngine but not at all by Sanity.
Sanity API Image
The Sanity optimized image size is 25.7kB as shown below.
ImageEngine Optimized Image
ImageEngine’s optimized image size is 15.4kB as shown below.
Here’s a comparison of ImageEngine’s image and Sanity’s published image.
The different image formats above are generated by Sanity and ImageEngine for size and quality comparison.
Integrating ImageEngine with Sanity is an easy job that helps in optimizing, converting, and delivering the images for faster web page loading. This easy integration is followed for almost all the formats under any of the two methods i.e. Prefix or delivery address method and makes it possible to reduce the image file size upto 20% without compromising the quality. All of this not only improves the core web vitals but also positions a website as an authentic source in the eyes of users. Furthermore, the most compressed AVIF image format is supported by ImageEngine but not at all by Sanity. So, start using ImageEngine for sanity today and see the difference in speed and scalability.