In today’s day and age, where communication is led digitally, having a high-quality website is essential for acquiring a wide exposure in the web market. Over the years, Sanity has become one of the most popular headless CMS platforms and is being widely used for creating high-quality websites. Built on JavaScript and React.js, Sanity provides content access through an API and one can choose where to upload the content. What’s different now, though, is that website owners are also merging other powerful solutions such as an image CDN among many others.
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.
How Sanity Manages Images
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.
Image Representation
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 Show Image
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.
URL Builder
A package is provided to build a URL with any framework. The @sanity/image-URL npm package for JavaScript projects is provided to generate image-URLs for the image record. The user can also specify constraints such as width, height, etc.
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:
How Does ImageEngine’s Image CDN Work?
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.
Delivery Network
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.
Image Management
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.
How to Integrate ImageEngine with Sanity
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
In the tag add the ImageEnigne delivery address in front of the call to the URL For() function:
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.
Sanity Image vs. ImageEngine
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.
Conclusion
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.
Top comments (0)