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


Eliminate the language barrier between you and the opinions of your customers
Cosmic JS makes managing content so fast and easy that you're likely to have a lot of it. I'll demonstrate a few helpful tips when searching and organizing your content in this blog.
The Cosmic JS team was honored to to speak at Toyota Connected for the Ember.js Dallas Meetup this week. Cosmic JS co-founder Tony Spiro presented "Building Modern Apps with API Services" to illustrate the growing trend of offloading core dev tasks onto best-in-class API services.
To demonstrate how easy it is to get started with Cosmic JS, we'll utilize the Cosmic JS CLI to quickstart a React Auth App. This app shows implementation of Authentication in ReactJS, NextJS and NodeJS using the Cosmic JS API. This app has all the basic modules like signin, signup, view/edit profi
Digital Ocean, a hosting provider beloved by developers, provides a highly intuitive interface for deploying and managing application infrastructure. In this tutorial I'm going to show you how to install and deploy a Cosmic-powered Nuxt.js app on Digital Ocean.
Grab and save content from any website to your Cosmic JS Bucket.