At imgix, we believe that delivering high-quality, optimized images should be as easy as possible. That’s why we work hard to provide useful developer-oriented tools on top of our image processing APIs. Today, we’re excited to announce the latest addition to our suite of SDKs: vue-imgix. This library makes it far easier for Vue developers to quickly get up and running with imgix, and to access some important new image optimizations.
Why Vue
If you’re already familiar with Vue, feel free to skip to the next section, Our Integration.
Vue is a popular open-source frontend framework that aims to solve some specific problems that software engineers face. Vue competes with other frontend frameworks such as Angular, React, and Ember. Vue uses the mature MVVM (or model-view-viewmodel) architecture and handles the viewmodel layer. Its primary aid to developers is to abstract away events, models, and DOM interactions, and allow the developer to focus on more important aspects.
This post won’t go into much detail on the specific benefits of or comparisons with other libraries since there are other great resources about this topic already:
Our Integration
Now that we’ve talked about the benefits of Vue, let’s dive into the details of the vue-imgix library. When we develop framework libraries, our primary focus is to deliver the best developer experience possible. We try to get out of the way of the developer and empower them to build what they want in the easiest manner possible. For us, this means expressive documentation and an intuitive, useful API.
For the development of this library, we took a slightly different approach and created APIs to support two use cases—one for developers who want something that works “out of the box”, and another for advanced imgix users seeking greater customization. We think this two-layer API approach will suit more use cases than ever before, and we’re excited for you to try it out.
Out-of-the-box API
This API was designed to behave much in the same way as an <img> element. You can see an example of this API in the sandbox below.
More information and examples about the simple API can be found in our documentation.
Advanced API
This API is useful for developers who are interested in integrating vue-imgix with their existing components, or for other advanced uses. An example of this API being used with a plain <img> element is shown below.
More information and examples about the simple API can be found in our documentation.
Placeholders in 2020
Another feature we’re delighted to announce is support for the new browser behavior around placeholders.
In the past, when rendering responsive images, the developer would have to implement a CSS hack to ensure that the image took up the correct size “placeholder” while the image was loading. Without this, the page would reflow. Unfortunately, this CSS hack was complicated and many developers didn’t use it.
Newer browsers have since implemented support for generic placeholder behavior by using the image’s width and height attributes, and it’s now easier than ever to support placeholders.
The requirements necessary to support placeholder behavior are as follows:
widthandheightattributes set on the img element- some
widthCSS value (e.g. 10px, 100%, calc(100vw - 10px)) height:autoas a CSS property
For example, for an image with the class test-img the CSS should be defined as:
.test-img {
/* These next two lines are critical for the new browser feature. */
width: calc(100vw - 128px);
height: auto; // This tells the browser to set the height of the image to what it should be, and ignore the height attribute set on the image
}
Regarding the actual <img> tag: the width and height attributes can be any value as long as their aspect ratio is the same as the image’s aspect ratio. E.g. width = 100, height = 50 is fine, as is width = 2, height = 1.
In our example, the image has an aspect ratio of ~0.66:1, so we have set a width of 66 and a height of 100, but we could have also used a width and height of 33 and 50, or 660 and 1000, for example.
In a Vue template, this would look like:
<ix-img
src="..."
sizes="calc(100vw - 128px)"
class="test-img"
width="66"
height="100"
/>
You can also read more about how our support for placeholder behavior works.
Lazy Loading
The other substantial feature that we explored with this library’s SDK development was a new method for lazy loading. We’re excited to present our revised recommendation for lazy loading, which is a hybrid Native + Intersection Observer approach.
First, we should take a brief look at the history of lazy loading. At the start, lazy loading was supported through the use of scroll event listeners and would listen to these events and calculate when the image was visible in the viewport, then load the image. This was complicated to implement, so the OSS community created libraries to support this behavior, such as lazysizes.
In the mid-2010s, browser vendors proposed a new browser API called the Intersection Observer API, which would make this kind of behavior simpler to support. It was released in 2017 and enabled a more performant version of lazy loading, and as before, new libraries were released to support this new API. We have preferred Lozad.js in this area.
All this time, browser vendors have been watching this development. In 2019, they announced and started to release support for native lazy loading. The new loading attribute supports this behavior for images (and iframes). There are a few valid settings for this attribute, but most of the time developers will want to set loading= "lazy" on images they wish to load lazily.
Native lazy loading has many benefits over previous versions of lazy loading. One key advantage is that it will work before the page’s JavaScript has loaded, and will even work in browsers that don’t support JavaScript. If a browser doesn’t support native lazy loading, it will just fall back to loading that image non-lazily.
Our approach uses native lazy loading if the browser supports it, and will fall back to a library if it doesn’t. You can learn more about our method for lazy loading here. We are also planning to roll this behavior out to the rest of our libraries in the future.
Conclusion
This Vue library not only allows developers to integrate with the imgix rendering APIs, but also delivers new features such as a new advanced API, a new feature around placeholders, and a new strategy for lazy loading. We can’t wait to see what you build with it. If you want to show us what you’ve made or have a question, feel free to reach out or tweet at us (@imgix).
