How to use the imgix Extension

Community Articles
Community Articles 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 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 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 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 on Twitter.

You may also like


In this blog we'll quickstart a React Native Cross-Platform Blog using the Cosmic CLI. This app is three apps in one: Web, iOS and Android app all with content powered by Cosmic. Go to the GitHub repo to see the iOS and Android app share the same React Native codebase.
Thanks to everyone in Dallas who came out to the Vuetiful Holiday Meetup at Simple Media, featuring Vuetify, Netlify and Cosmic. ๐ŸŽ‰
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart an Angular Ecommerce App. This Angular ecommerce app allows you to process orders from customers and accept Stripe payments for goods and services. Manage inventory in the Cosmic Dashboard.
This article will demonstrate how to build a simple ecommerce website with the purpose of showing how we can offer a customized experience for everyone. Our data will be stored and served by Cosmic and we will use Angular for our Front-End.
Here I am going to explain the complete process to implement an Angular 6 blog, which uses Cosmic as back-end.
Salesforce is the worldโ€™s leading enterprise CRM application. Zapier gives people internet superpowers by allowing them to connect and automate the apps they use. Using Zapier to connect your Cosmic-powered content with Salesforce is easy and requires zero coding.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales