Optimize your images with Nuxt Image
Nuxt image handles the hard parts of optimizing assets through an intuitive interface. Let’s learn how to use it!
Now more than ever, online experiences are supplementing in-person experiences. Most people would not hesitate to make an online purchase, but they expect to see a high quality image of the product they intend to buy. These images often come in obscure formats and high resolution files designed to preserve the image quality. However, speed and quality are often at odds in the web development process. Slow load times and blurry visuals are equally detrimental, creating a common problem for developers to solve: How can we optimize images in a way that delivers the highest quality image in the right format, dimension, and resolution, while keeping the smallest possible size? While workflows and techniques exist to aid developers in managing images in the modern web, it is far from trivial. We need an intuitive way to optimize assets without adding significant overhead to the development workflow.
What is Nuxt?
Nuxt is a frontend framework built on top of Vue. Why use Nuxt over Vue? Nuxt offers many features that would be complex to achieve with plain Vue, including: server-side rendering to improve SEO, automatically generated routes, and automatic code splitting with pre-rendered pages, just to name a few. Nuxt is a powerful framework that makes developing apps easier. Nuxt can do everything Vue can do and more, making it an excellent choice for most web apps.
Nuxt Image
Nuxt Image is a plug-and-play image optimization module for Nuxt apps. It handles the difficult parts of image optimization, providing an intuitive interface for transforming and optimizing assets. The image module comes with two components: nuxt-img and nuxt-picture, which are drop-in replacements for their native counterparts, <img>
and <picture>. One advantage of these components is they don’t output any unexpected markup while serving your images.
The Problem
Users and companies alike prefer faster sites. In fact, if a page takes longer than three seconds to load, the site will likely be abandoned. And, since people like faster loading pages, Google does as well. One of the main culprits of a slow-loading website are non-optimized images. By optimizing our images we will not only increase and maintain traffic, but will also get better search engine rankings.
Let’s say we are given an image to display straight from the photographer unoptimized. For example, 5mb in size and 4,000 x 6,000 pixels. Untouched, this image would have a dramatic impact on the speed of our site, as it exceeds our needs greatly. Let’s assume the maximum size we need the image to be is 2,000px, however we want to optimize the image at the standard breakpoints for smaller devices (i.e., 320px, 640px, 768px, 1024px). To achieve this, we would have to generate five different images as well as write the html with all the responsive breakpoints properly defined. All of this for one picture! Not thanks. Nuxt Image will simplify this process and save us time.
The Solution
With Nuxt Image, all we need to do is add our image using the nuxt-image component. <nuxt-img> outputs a native <img> tag directly and can be used just like we would use a normal <img> tag. To optimize our image in the above scenario, all we need to do is:
<nuxt-img src=”/my-image.png” alt=”My Image” sizes="xl:100vw lg:100vw md:100vw sm:100vw xs:100vw"/>It’s that easy! When our site is built, Nuxt will generate all of the assets we need, and will configure our <img> tag for us with the specified breakpoints. Here is the HTML that will be generated by nuxt-image:
<img src=”/_ipx/my-image.png?w=1280” alt=”My Image” sizes=”(max-width: 320px) 100vw, (max-width:
640px) 100vw (max-width: 768px) 100vw, (max-width: 1024px) 100vw, 100vw" srcset=”
/_ipx/my-image.png?w=320 320w, /_ipx/my-image.png?w=640 640w, /_ipx/my-image.png?w=768 768w,
/_ipx/my-image.png?w=1024 1024w, /_ipx/my-image.png?w=2000 2000w”/>If we generate a Lighthouse report for our app using our normal <img> tag vs using <nuxt-img> we can see how nuxt-image improves our score significantly.
Most noteworthy, we can see that ‘properly size images’ is no longer listed as an area for improvement when using nuxt-image, as we would expect.
Summing it up
When using images in web development, optimization is key. It will not only maintain visitors by increasing loading times, but will even help get new traffic by improving SEO. Nuxt Image makes the process of optimizing our assets quick and simple without adding any significant overhead, so give it a shot! You can deploy your Nuxt app in a few clicks and zero configuration using Vercel! Here’s a quick tutorial on how to do that: https://vercel.com/guides/deploying-nuxtjs-with-vercel