npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mole-inc/nuxt-optimized-images

v2.3.0

Published

Automatically optimizes images used in Nuxt.js projects (jpeg, png, svg, webp and gif).

Downloads

7

Readme

:sunrise: :rocket: Nuxt Optimized Images

Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).

This module is inspired by the work of Cyril Wanner in next-optimized-images.

codecov

Features

Image sizes can often get reduced up to 60%, but this is not the only thing @mole-inc/nuxt-optimized-images does:

  • Reduces image size by optimizing images during build.
  • Improves loading speed by providing progressive images (for formats that support it).
  • JPEG/PNG images can be converted to WebP on the fly for an even smaller size.
  • Can resize images or generate low-quality image placeholders (lqip) and extract the dominant colors of it.
  • Provides query params for file-specific handling/settings.
  • And supports these features already included in Nuxt.js:
    • Content hash to the file name so images can get cached on CDN level and in the browser for a long time.
    • Inlined small images to save HTTP requests and additional roundtrips.
    • Same URLs for unchanged images over multiple builds for long time caching.

Installation

:warning: node >= 10 and nuxt >= 2 are required.

npm install --save-dev @mole-inc/nuxt-optimized-images

or

yarn add --dev @mole-inc/nuxt-optimized-images

Add @mole-inc/nuxt-optimized-images to buildModules section of nuxt.config.js:

:warning: If you are using Nuxt < 2.9.0, use modules instead.

{
  buildModules: [
    '@mole-inc/nuxt-optimized-images',
  ],

  optimizedImages: {
    optimizeImages: true
  }
}

See the configuration section for all available options.

:warning: Images won't get optimized out of the box. You have to install the optimization packages you really need in addition to this module. This doesn't force you to download big optimization libraries you don't even use. Please check out the table of all optional optimization packages.

Optimization Packages

You have to install the optimization packages you need in your project in addition to this module. Then, @mole-inc/nuxt-optimized-images detects all the supported packages and uses them.

So you only have to install these packages with npm, there is no additional step needed after that.

The following optimization packages are available and supported:

| Optimization Package | Description | Project Link | |--------------------------------|-------------------------------------------------------------------------------------------------------------------------|----------------------------| | @mole-inc/imagemin-mozjpeg | Optimizes JPEG images | Link | | @mole-inc/imagemin-jpegoptim | Optimizes JPEG images | Link | | @mole-inc/imagemin-pngquant | Optimizes PNG images | Link | | @mole-inc/imagemin-optipng | Alternative for optimizing PNG images | Link | | imagemin-gifsicle | Optimizes GIF images | Link | | imagemin-svgo | Optimizes SVG images and icons | Link | | @mole-inc/webp-loader | Optimizes WebP images and can convert JPEG/PNG images to WebP on the fly (WebP resource query) | Link | | @mole-inc/lqip-loader | Generates low quality image placeholders of an image (lqip resource query) | Link | | responsive-loader | Can resize images on the fly and create multiple versions of it for a srcSet. Important: You need to additionally install either jimp (node implementation, slower) or sharp (binary, faster) | Link | | @mole-inc/sqip-loader | Loads images and exports tiny SQIP previews as image/svg+xml URL-encoded data | Link |

Example: If you have JPG, PNG, and SVG images in your project, you would then need to run

npm install --save-dev @mole-inc/imagemin-mozjpeg @mole-inc/imagemin-pngquant imagemin-svgo

# or

yarn add --dev @mole-inc/imagemin-mozjpeg @mole-inc/imagemin-pngquant imagemin-svgo

To install all optional packages, run:

npm install --save-dev @mole-inc/imagemin-mozjpeg @mole-inc/imagemin-jpegoptim @mole-inc/imagemin-pngquant imagemin-gifsicle imagemin-svgo @mole-inc/webp-loader @mole-inc/lqip-loader responsive-loader sqip-loader sharp

# or

yarn add --dev @mole-inc/imagemin-mozjpeg @mole-inc/imagemin-jpegoptim @mole-inc/imagemin-pngquant imagemin-gifsicle imagemin-svgo @mole-inc/webp-loader @mole-inc/lqip-loader responsive-loader sqip-loader sharp

:warning: Please note that by default, images are only optimized for production builds, not development builds. However, this can get changed with the optimizeImagesInDev config.

Documentation

License

Code released under the MIT License.