Creating a Nuxt Fan Site with Advanced imgix Usage

<blockquote>Thomas Dale is the Head of Account Management for&nbsp;<a href="https://imgix.com" rel="noopener noreferrer" target="_blank">imgix</a>, a powerful real-time image processing and CDN delivery solution. Thomas works with imgix customers and partners to power partnerships, integrations and implementation of the fantastic imgix service.</blockquote><h3> Cosmic + imgix</h3>All of the images you upload to Cosmic are already transformed to imgix URLs, a powerful real-time image processing and CDN delivery solution. &nbsp;This article will help you take advantage of many of the included features of imgix which include optimizing
image formats, compressing, intelligently cropping, and so much more! &nbsp;<h3> Where are my imgix URLs?</h3>Every image you upload to Cosmic is already converted to a imgix URL! &nbsp;Here is a screenshot of the image metafields section in an object: <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/940a1f40-1502-11e9-b639-ff9ababa68ba-Screen-Shot-2019-01-10-at-10.06.23-AM.png" style="width: 631px;" class="fr-fic fr-rounded fr-dib"> You can see that the URL is already an imgix URL! &nbsp;The way you modify an imgix URL is by simply adding a query string following the path. &nbsp;Typically an image&#39;s path ends in the format of the image, for example: &quot;.jpg&quot;. &nbsp;You
would simply add a question mark and then begin entering the query string to modify the image. &nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/efa1b160-1502-11e9-aa5e-6f016c618576-Screen-Shot-2019-01-10-at-10.09.26-AM.png" style="width: 623px;" class="fr-fic fr-dib">In the example above, &quot;w=600&quot; will size the image to a width of 600 pixels and &quot;exp=1&quot; will set the exposure setting to 1. &nbsp;It is important to add an &quot;&amp;&quot; in between each of the parameters in the query string. &nbsp;You can see a complete list of the imgix API that you can enter as a query string here: <a href="https://docs.imgix.com/apis/url" rel="noopener noreferrer" target="_blank">https://docs.imgix.com/apis/url</a>.<h3> Most Common imgix Features</h3>auto=format,compressYou will notice that our docs contain a lot of different parameters! &nbsp;So I&#39;m going to try and tell you about a few awesome features to get you started. &nbsp;The first is the auto parameter. &nbsp;I like adding auto=format, compress to all of
my URLs. &nbsp;This will have the image change its format based on several factors:<ol><li>If the browser is Chrome, it will change the format to WEBP. &nbsp;This is a great format by Google that will make your images lighter and look better. &nbsp;It even supports transparency.</li><li>If the browser is not Chrome, it will then determine if the image contains any transparent pixels. &nbsp;If the image does contain transparent pixels (like a logo perhaps?) it will change the format to a PNG8. &nbsp;This is a lighter version of PNG that
supports transparency. &nbsp;If the image does not contain any transparent pixels it will change the format to progressive JPEG. &nbsp;This is supported by all modern browsers, is ~ 10% lighter than a JPEG, and it loads the image by making it slightly
blurred then filling in the image (although this happens extremely quick and can be hard to notice).</li></ol>Just using the auto=format, compress to change formats is already going to have a humongous impact on your image performance. &nbsp;This same API does do a few additional items as well. &nbsp;It will strip the color space from the image, which is about
3 KB. &nbsp;This is no longer needed with modern browsers so it is smart to remove this. &nbsp;Finally, it will compress the quality of the image. &nbsp;If you use this parameter and you feel that the image&#39;s quality is being compressed too much,
you can certainly modify this as well. &nbsp;The way to counter this quality reduction is to add an additional API to the query string identifying what quality level you want. &nbsp;Although the quality number goes from 1-100, please don&#39;t think of
the quality levels as a %. &nbsp;It is simply a number on a scale and each digit is not equal. &nbsp;For example, q=40 is not half the quality of q=80. &nbsp;The default is actually q=75, so that is often a good number to use. &nbsp;Here is an example URL with all of these together:<ul><li><a href="https://assets.imgix.net/examples/vista.png?q=75&auto=format,compress" rel="noopener noreferrer" target="_blank">https://assets.imgix.net/examples/vista.png?q=75&amp;auto=format,compress</a></li></ul>You can see the name of the image is vista.png, because it was originally a PNG. &nbsp;There wasn&#39;t transparency in this image. &nbsp;When you open this in Chrome, it will be a WEBP. &nbsp;When you open this in another browser like Safari, it will
be a progressive JPEG.width, height, &amp; cropOne of the most needed functionalities of an image processing solution is to be able to resize the height and width of an image. &nbsp;A common mistake with websites is using only css to size your images. &nbsp;This will make your image or container the correct size when viewing on your website, but the image being loaded may be a much larger image. &nbsp;If you were to inspect an image with your browser&#39;s dev tools, it will often show the size the image is viewed and the actual size of the loaded image: <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/c2d6bf00-184e-11e9-b975-2db2e519051b-1547506215594.jpg" style="width: 542px;"> This image is viewed as a smaller thumbnail that is 168 pixels wide by 112 pixels tall. &nbsp;It is actually loading a 3008 wide by 2000 pixel tall image! &nbsp;But I can modify this URL from <a href="https://cosmic-s3.imgix.net/112a4440-7857-11e7-998b-6dbc6e078b76-will-langenberg-8989.jpg" rel="noopener noreferrer" target="_blank">https://cosmic-s3.imgix.net/112a4440-7857-11e7-998b-6dbc6e078b76-will-langenberg-8989.jpg</a> (which is 1.1 MB) to include auto=format,compress (my favorite combo!) and then add a w=200 to lower the width of the image. &nbsp;You will notice that I also added a dpr=2; this will set the device pixel ratio to 2, which essentially doubles the width but will improve the look of smaller thumbnails in mobile devices.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/199b9220-18f9-11e9-ad3b-3160874732bc-Screen-Shot-2019-01-15-at-11.09.26-AM.png" style="width: 413px;" class="fr-fic fr-dib">With these changes, the image is now 16.1 KB (or 15.4 KB in a Chrome browser): <a href="https://cosmic-s3.imgix.net/112a4440-7857-11e7-998b-6dbc6e078b76-will-langenberg-8989.jpg?auto=format,compress&w=200&dpr=2" rel="noopener noreferrer" target="_blank">https://cosmic-s3.imgix.net/112a4440-7857-11e7-998b-6dbc6e078b76-will-langenberg-8989.jpg?auto=format,compress&amp;w=200&amp;dpr=2</a> A note on cropping. &nbsp;You will notice that I entered a w=200 and I did not enter a height. &nbsp;By default, imgix will respect the current aspect ratio of the image and set the height appropriately. &nbsp;If you did want a square, you could set a w=200&amp;h=200&amp;fit=crop. &nbsp;This would create a square and crop to the center of the image. &nbsp;There are many other ways to choose how to crop, such as cropping to faces, objects, or focal points. &nbsp;If you want to use one of these methods, I would look at them in the imgix API docs: <a href="https://docs.imgix.com/apis/url/size/crop" rel="noopener noreferrer" target="_blank">https://docs.imgix.com/apis/url/size/crop</a>. <h3>Implementing imgix Changes Across Your Whole App&nbsp;&nbsp;</h3>Taking these changes in mind, I wanted to apply them to a pre-existing app in Cosmic, the <a href="https://cosmicjs.com/apps/vuejs-photo-gallery" rel="noopener noreferrer" target="_blank">Vue.js Photo Gallery</a>. In this app, there is the large gallery
image which is displayed as a background image URL and small thumbnail images displayed in an img tag. &nbsp;I forked the Github article for this and added auto=format, compress to all of the images. &nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/14bcc0c0-240d-11e9-95bc-a55f047471f8-fc44ef70-785c-11e7-998b-6dbc6e078b76-mo-baghdadi-109634.jpg" style="width: 100%;" class="fr-fic fr-dib"> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/627151d0-20f9-11e9-ae95-71b7c8d3ff11-bgimg_cosmic.png" style="width: 100%;" class="fr-fic fr-dib">In the screenshot above you can see the changes I made to the larger gallery images. &nbsp;Since this is a nested string I simply added the imgix string after the imgix_url in the v-bind. &nbsp;For this example, I added a width of 2000 and a quality of
75. &nbsp;This will leave these images at a good quality and size them as a large image. &nbsp;I will be loading my largest original images to this app and I can be sure they will be sized at a correct size for a large gallery image. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67679d20-20f9-11e9-ae95-71b7c8d3ff11-thumbnail_cosmic.png" style="width: 100%;" class="fr-fic fr-dib"> In the screenshot above you can see the changes I made to the thumbnail images. &nbsp;For this example I had to add an additional function I titled decorateImgixUrl which returns the imgixUrl and appends the imgix API string to the end. &nbsp;For the
thumbnail images I added a width of 200 and a dpr setting of 2. &nbsp;This now resizes the same large image I had uploaded down to 200 width, and the addition of the dpr setting will help to improve the visual quality of these thumbnails in a mobile view. <h3>Conclusion</h3>This is all a pretty simple change, just adding the automatic features as well as resizing, but the effect it had on the demo example for this site was astounding! &nbsp;Originally, this page weighed 3.1 MB but now it only weighs 645 KB!&nbsp;If
you already use the Vue.js photo gallery app, this change has been applied to this app so you can update this easily yourself! &nbsp; Hopefully this brief demonstration shows you how much of an impact using just a few of imgix&#39;s popular features can have on your websites. &nbsp;I encourage you to look through the imgix API docs and see what other features are available for you to
use. &nbsp;

Blogs by Thomas Dale

Start building today

Blogs by Thomas Dale

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today