How to use the imgix Extension


In this guide, I’m going to show you how to use the imgix Extension to create and save reusable optimized images for your application. I will begin with a high-level overview of how imgix makes it easy to deliver optimized images to your websites and apps.


TL;DR

Install the imgix Extension


How to install the imgix Extension

Login into your Cosmic JS account and navigate to Your Bucket > Settings > Extensions. Click the Extensions tab to browse all the Extensions, find the imgix Editor Extension and click "Install Free".


What is imgix?

imgix is an API-first platform that enables you to optimize your images on the fly. Available optimizations and features include compression, resize & cropping, and face detection, hosted on a global CDN to make sure images are delivered fast. (Luckily, Cosmic JS comes with imgix integrated by default on all Buckets and accounts 😁)

Blow are some of the ways imgix helps you compress, optimize, resize, format, and add face detection to optimize the experience in your websites and apps.


Compression/Performance

Compression is crucial for building fast, modern web experiences. Speed is key for SEO, ranking and great user experiences. The imgix Extension provides you with various options to compress your images. You can set Quality and Auto Features for your required use cases. Auto Features are listed below:

  • Auto Compress will apply best-effort techniques to reduce the size of the image.
  • When Auto Enhance is set, the image is adjusted using the distribution of highlights, mid-tones, and shadows across all three channels—red, green, and blue (RGB). Overall, the image will look more vibrant.
  • With Auto Format, imgix determines whether the image can be served in a better format by a process called automatic content negotiation. For example, if the browser supports the latest WebP format, it will serve the image in WebP format.
  • Redeye will apply red-eye removal to detected faces automatically.


Resize/Crop

Similarly, exact dimensions and perfectly optimized images are very important if you are supporting different screen sizes. For example, you shouldn't serve retina images on smaller screens. The imgix Extension provides you with the way to create multiple image sizes for different screen sizes.

You can set the Width and Height of the image and choose different fit options. Clamp, Clip, Crop, and Face area can be used. If you choose Crop, you can set different crop options as well to make it look perfect for listed dimensions.


Face Detection

If you choose Face area in Fit options and your uploaded image has faces, you will see different Faces options. 

  • FaceIndex: lets you choose a face from the image.
  • FacePad: amount of space around the face in the image.
  • Mask: options include ellipse to create circular images for avatar and corners to create a rounded corner image. 


How to use the imgix Extension

After installing the imgix Extension, you will see a new tab on the left hand sidebar titled imgix Extension.

Upload images

Set optimization parameters

After uploading your images, you will be prompted to set optimization parameters such as quality, auto, crop/resize, face detection, etc. After saving your optimized images, they will be made available in a newly created Object (Imgix Images).

You can save multiple optimized images and your master image will not be affected. For example, you can have one image optimized for web and one for mobile using a combination of crop and quality parameters.


How to add imgix optimized images in your application

After you have generated your optimized images, you can use them in your application. You will notice that the optimized images will be made available in the metadata of the master image Object under optimized_images.

imgix Image Object


Now that you have your imgix images saved, you can use your optimized images using the REST API response. (You can also use the NPM module or GraphQL API, just look for the optimized_images response)


Conclusion

By using the imgix Extension, you can deliver high-quality images to your users that are optimized to their specific devices and bandwidth. This is another way that Cosmic JS is integrating with the best tools available, helping you create great application experiences. If you have any questions about this Extension you can join the Cosmic Community on Slack and reach out to Cosmic JS on Twitter.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


Tony Spiro, co-founder and CEO of Cosmic JS, presented "Building for Team Success with Content-Powered Apps" to illustrate the build vs. buy concept of software development in the API-first microservices movement. The full video is embedded below and runs approximately 45 minutes.
Cosmic JS makes it easy to manage content for your Bootstrap applications. In this blog we'll quickstart a Bootstrap Landing Page using the Cosmic CLI. This single page website landing page is built using Node.js and a minimal theme from Start Bootstrap.
Here I am going to explain the complete process to implement an Angular 6 blog, which uses Cosmic JS as back-end.
Learn how I built the Twitter Search Extension to search and save Tweets to your Bucket.
The relationship between content and code has come to an end.
A primary benefit of managing content API-first is that your content is transformed into portable and scalable content objects, available via API endpoint to create workflows with the third-party applications that your team uses.