Let’s face it. Managing images in the modern web is hard. Not only do we have to manage what dimensions images should render on different screen sizes, but then we also have to try and deliver the smallest possible high-quality image so that the performance of our site doesn’t suffer. After all, if a user is on a 400px wide device on a mobile network, why should they be downloading a 4000px size image that is then resized down to 400px using CSS?
And while there are workflows for helping developers to generate images of different sizes, techniques for specifying media queries for images, and so on, the effort to put them all together in a seamless way is often far from trivial.
Wouldn’t it be great if there was a way to leverage a powerful image optimization workflow without adding significant overhead to the development workflow? Well, for my fellow Nuxt fans, I’m happy to say that Nuxt Image has granted that wish.
What is Nuxt Image?
Nuxt Image is a plug-and-play image optimization module designed to give developers access to powerful components that will make image optimization a natural part of your workflow. But don’t take my word for it, let me show you just how powerful it is.
A “Simple” Scenario
Let’s say that we have a site that wants to display a beautiful image of space. The original image however, at its maximum resolution, it is 3.9MB in size and 5005 x 3417 pixels! 😱
Clearly, we can’t serve this image to users without a dramatic impact to the performance of our site, so we establish the following criteria:
- The maximum size we need the image to be is 1280px for devices that are 1280px or larger.
- However, at smaller devices, we would still like to optimize the image at the standard breakpoints (i.e., 320px, 640px, 768px, 1024px)
This means we’d need to:
- Generate and optimize 5 image assets
- Write the HTML for the image with all the responsive breakpoints properly defined
And let’s not forget this is for a single image. Luckily for us though, Nuxt Image is about to save day.
Using Nuxt Image, once we upload our
space.jpeg image into our
static directory, all we need to do to solve this is call our image with the
<nuxt-img src="/img/space.jpg" alt="Space by Jeremy Thomas on Unsplash" sizes="xl:100vw lg:100vw md:100vw sm:100vw xs:100vw" />
When our site is built, this is what Nuxt will basically generate all of the assets we need as well as the following HTML.
<img src="/_nuxt/image/space-61b74b.jpg" alt="Space by Jeremy Thomas on Unsplash" sizes="(max-width: 320px) 100vw, (max-width: 640px) 100vw, (max-width: 768px) 100vw, (max-width: 1024px) 100vw, 100vw" srcset=" /_nuxt/image/space-f4d5ae.jpg 320w, /_nuxt/image/space-c1b4a0.jpg 640w, /_nuxt/image/space-71cff9.jpg 768w, /_nuxt/image/space-38eb82.jpg 1024w, /_nuxt/image/space-61b74b.jpg 1280w " />
It’s just that easy! 🙌
Deploying with Nuxt Image
Believe it or not, if you’re using Nuxt to deploy a static site on Netlify, you don’t need any additional configuration!