Jazib Sawar
February 11, 2019
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
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.
