Skip to content
Permalink
develop
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
title description createdAt publishedAt updatedAt position category
Configuraci贸n
Las opciones predeterminadas para estos optimizadores deber铆an ser suficientes en la mayor铆a de los casos, pero puede sobrescribir todas las opciones disponibles si lo deseas
2019-03-01T13:35:06Z
2019-03-01T13:35:06Z
2020-07-15T16:46:04Z
3
Primeros Pasos

Este m贸dulo utiliza img-loader por debajo el cual se basa en mozjpeg, optipng, gifsicle y svgo.

Las opciones predeterminadas para estos optimizadores deber铆an ser suficientes en la mayor铆a de los casos, pero puede sobrescribir todas las opciones disponibles si lo deseas.

handleImages

  • Tipo: string[]
  • Por defecto: ['jpeg', 'png', 'svg', 'webp', 'gif']

@aceforth/nuxt-optimized-images registra el cargador webpack para todos estos tipos de archivos.

Si no quieres que uno de estos sea manejado por @aceforth/nuxt-optimized-images porque, por ejemplo, tienes otro plugin o una regla de carga personalizada, simplemente ret铆rela del array.

Ten en cuenta que una imagen que se est谩 manejando no significa que tambi茅n se optimice autom谩ticamente. El paquete de optimizaci贸n requerido para esa imagen tambi茅n tiene que ser instalado. Por favor, lea la secci贸n paquetes de optimizaci贸n para m谩s informaci贸n.

Si una imagen se maneja pero no se optimiza, significa que la imagen original se utilizar谩 y se copiar谩 para la compilaci贸n.

inlineImageLimit

  • Tipo: number
  • Por defecto: 1000

Los archivos m谩s peque帽os ser谩n alineados con un data-uri por url-loader.

Este n煤mero define el tama帽o m谩ximo del archivo (en bytes) para que las im谩genes se alineen. Si una imagen es m谩s grande, se copiar谩 a la carpeta est谩tica de Nuxt.js. Las im谩genes se optimizar谩n en ambos casos.

Para desactivar completamente el inlineado de la imagen, establece este valor en -1. Entonces, siempre obtendr谩s una URL de la imagen.

imagesName

  • Tipo: function
  • Por defecto: ({ isDev }) => isDev ? '[path][name][hash:optimized].[ext]' : 'img/[contenthash:7].[ext]'

El nombre de archivo de las im谩genes optimizadas.

Aseg煤rate de mantener el fragmento [hash] para que reciban un nuevo nombre de archivo si el contenido cambia.

responsiveImagesName

  • Tipo: function
  • Por defecto: ({ isDev }) => isDev ? '[path][name]--[width][hash:optimized].[ext]' : 'img/[contenthash:7]-[width].[ext]'

El nombre de archivo de las im谩genes responsive.

Aseg煤rate de mantener el fragmento [hash] para que reciban un nuevo nombre de archivo si el contenido cambia.

optimizeImagesInDev

  • Tipo: boolean
  • Por defecto: false

Para un desarrollo m谩s r谩pido y HMR, las im谩genes no se optimizan de forma predeterminada cuando se ejecutan en modo de desarrollo. En producci贸n, las im谩genes siempre se optimizan, independientemente de este ajuste.

mozjpeg

Requiere el paquete de optimizaci贸n opcional imagemin-mozjpeg.

  • Tipo: object
  • Por defecto: {}

mozjpeg se utiliza para optimizar las im谩genes JPEG. Puede especificar las opciones para ello aqu铆. Las opciones predeterminadas de mozjpeg se utilizan si se omite esta opci贸n.

pngquant

Requiere el paquete de optimizaci贸n opcional imagemin-pngquant.

  • Tipo: object
  • Por defecto: {}

pngquant se utiliza para optimizar las im谩genes PNG por defecto. Las opciones predeterminadas de pngquant se utilizan si omite esta opci贸n.

optipng

Requiere el paquete de optimizaci贸n opcional imagemin-optipng.

  • Tipo: object
  • Por defecto: {}

optipng es una forma alternativa de optimizar las im谩genes PNG. Puedes especificar las opciones para ello aqu铆. Las opciones predeterminadas de optipng se utilizan si omite esta opci贸n.

gifsicle

Requiere el paquete de optimizaci贸n opcional imagemin-gifsicle.

  • Tipo: object
  • Por defecto:
{
    interlaced: true,
    optimizationLevel: 3,
}

gifsicle se utiliza para optimizar las im谩genes GIF. Puedes especificar las opciones para ello aqu铆. Las opciones predeterminadas de gifsicle se utilizan si omite esta opci贸n.

svgo

Requiere el paquete de optimizaci贸n opcional imagemin-svgo.

  • Tipo: object
  • Por defecto: {}

svgo se utiliza para optimizar las im谩genes e iconos svg. Puedes especificar las opciones para ello aqu铆. Las opciones predeterminadas de svgo se utilizan si omite esta opci贸n.

Los plugins svgo pueden deshabilitarse o habilitarse en el array de plugins:

{
  svgo: {
    plugins: [
      { removeComments: false }
    ]
  }
}

webp

Requiere el paquete de optimizaci贸n opcional webp-loader.

  • Tipo: object
  • Por defecto: {}

imagemin-webp se utiliza para optimizar las im谩genes de WebP y convertir otros formatos a WebP. Puedes especificar las opciones para ello aqu铆. Las opciones predeterminadas de imagemin-webp se utilizan si omite esta opci贸n.

responsive

Requiere el paquete de optimizaci贸n opcional responsive-loader.

  • Tipo: object
  • Por defecto: {}

La configuraci贸n para responsive-loader puede definirse aqu铆.

defaultImageLoader

Requiere el paquete de optimizaci贸n opcional responsive-loader.

  • Tipo: string
  • Por defecto: 'img-loader'

Por defecto, img-loader maneja la mayor铆a de las peticiones.

Si usas mucho responsive-loader y no quieres a帽adir el par谩metro de consulta ?resize a cada requerimiento, puedes establecer este valor en 'responsive-loader'.

Despu茅s de eso, responsive-loader manejar谩 todas las im谩genes JPEG y PNG por defecto, incluso sin un par谩metro de consulta adicional. Ten en cuenta que no puedes usar ninguno de los par谩metros de consulta que @aceforth/nuxt-optimized-images ofrece en estas im谩genes porque la petici贸n se reenv铆a y no se modifica.

Todos los dem谩s formatos (SVG, WEBP y GIF) siguen funcionando como antes con img-loader y por lo tanto tienen todos los par谩metros de consulta disponibles.

optimizeImages

  • Tipo: boolean
  • Por defecto: true

Si no deseas que las im谩genes sean optimizadas, puedes establecer este valor en `false'.

Si no tienes ning煤n paquete de optimizaci贸n instalado y esta opci贸n est谩 configurada como true, no se optimizar谩 ninguna imagen. En este caso, se imprime una advertencia en la consola durante la compilaci贸n para informarte sobre una posible mala configuraci贸n.