Luego Image {% img %}

É um auxílio para criar <img>, a partir de uma imagem de origem, é possível convertê-la em qualidade, tamanho, proporção e formato.

Instalação

Caso esteja usando um boilerplate mais antigo, é possível adicionar essa funcionalidade usando o comando:
PS: Na versão mais atual já consta essa funcionalidade

# NPM
npm i nunjucks-luego-image-extension

# Yarn
yarn add nunjucks-luego-image-extension

Como usar

PS: A pasta root das imagens continua sendo /assets/images/ *

# Versão abreviada
{% img 'imagem.jpg' %}

# Versão completa
{% img src='imagem.jpg' %}

Resultado

<picture class="wrap-img-imagem-G4352">
    <img
      src="assets/images/exported/placeholder/imagem-G4352.svg"
      alt=""
      class="img-imagem-G4352"
      data-src="assets/images/exported/imagem-G4352.webp"
      loading="lazy"
      height="1280"
      width="1920"
      style="">
</picture>

Observações importantes

• Imagens acima de 1920px de largura serão exportadas para 1920px caso queira uma imagem maior, informe com o atributo width.
• Recomendamos fortemente o atributo alt SEMPRE.
• A extensão padrão de expotação é webp
• A partir da imagem original é criado um svg como placeholder

Atributos

Atributo | Tipo | Default | Description ------ | ---- | ------- | ----------- src | string | - Obrigatório informar - | Primeiro parâmetro, src= é opcional width | number | Tamanho original (max 1920px) | Somente width mantém o aspect ratio height | number | Tamanho original (max 1080px) | Somente height mantém o aspect ratio fit | string | cover | Opções: cover / contain / fill / inside / outside ratio | string | proporção original | Proporção width/height quality | number | 85 | De 1 - 100 format | string | webp | Opções: jpg / webp / png / gif loading | string | lazy | Opções: lazy / eager class | string | 'img-' + uniqueId + nome do arquivo | - source | object | null | Atributos abaixo:

Width

# Sem o height, manterá o aspect ratio original
{% img 'imagem.jpg', width=500 %}

Height

# Sem o width, manterá o aspect ratio original
{% img 'imagem.jpg', height=500 %}

# Caso seja passado ambos os atributos, será considerado o atributo FIT (defaut: cover)
{% img 'imagem.jpg', height=500, width=500 %}

Fit

# Opções: cover / contain / fill / inside / outside
{% img 'imagem.jpg', height=500, width=400, fit='contain' %}

Ratio

# Para portrait o valor tem que ser menor que 1 Ex:
{% img 'imagem.jpg', ratio=0.7 %}

# Para landscape o valor tem que ser maior que 1 Ex:
{% img 'imagem.jpg', ratio=1.5 %}

Quality

# de 1 a 100 PS: em webp a compressão é muito eficiente
{% img 'imagem.jpg', quality=80 %}

Format

# Opções: jpg / webp / png / gif
{% img 'imagem.jpg', format='png' %}

Loading

# Opções: Opções: lazy / eager (carregamento natural)
{% img 'imagem.jpg', loading='eager' %}

Class

# Substitui a classe da img e o picture
{% img 'imagem.jpg', class='hero-item' %}

Source (saiba mais)

Uma imagem com a função de substituir a imagem "padrão", ela pode ser configurada como os media queries que já são utilizados em css, por exemplo, min-width, ou max-width.

Atributos Source

Atributo | Tipo | Default | Description ------ | ---- | ------- | ----------- breakpoint | string | (max-width: 768px) | Media queries width | number | 500 | Somente width mantém o aspect ratio height | number | mantém a proporção original | Somente height mantém o aspect ratio

# O padrão é (max-width: 768px) ou seja, mobile, mas pode ser alterado
{% img 'imagem.jpg', source={breakpoint: '(max-width: 1024px)', width: 500, height: 500} %}

⬆