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.

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


Cosmic allows you to easily create nested structures and upload media files. We learn how nested structures are built and how you can fetch such data from Cosmic API to use in a simple music site app.
Every blog needs a solid Content Management System (CMS). This allows content owners to control their content without having to hire a developer to make every single change to their site. Cosmic is a great choice for a CMS. In this how-to article, we’ll connect a React/Next.js app to Cosmic .
Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we discussed making localization for websites less spooky using Gatsby and Cosmic.
A website boilerplate satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.
Step by step guide to build a professional developer's portfolio using React, Cosmic, and Semantic-UI
Cosmic makes it easy to manage content for your Vue.js applications. In this blog we'll quickstart a Vue.js RPG Adventure Game using the Cosmic CLI. Our game, "Enter The Cosmos", is a turn-based, RPG style game built using Vue.js, Node.js and Cosmic.

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales