Salutare tuturor și bine ați venit la acest tutorial.

Astăzi aș dori să vă prezint un nou plugin pentru Gulp care a fost creat optimizarea imaginilor web.

gulp-sharp-responsive

gulp-sharp-responsive se bazează pe pachetul Sharp NPM, o bibliotecă de procesare rapidă a imaginilor care își propune să simplifice această sarcină plictisitoare.
Procesul de creare a imaginilor adaptive pentru diferite formate devine mult mai simplu, totul de ce avem nevoie e să configuram corect algoritmul, iar restul se face automat pentru noi.

Context

Să presupunem că dorim să generăm imaginea noastră ion.jpg în mapa dist/img.
De asemenea, am dori să avem imagini de diferite dimensiuni:

640 (mobile)
768 (tablet)
1024 (desktop)

Și diferite formate:

jpeg
webp
avif

Utilizăm gulp-sharp-responsive

Instalare

Mai întâi, să instalăm Gulp și acest plugin:

npm install --save-dev gulp gulp-sharp-responsive

Configurare

În fișierul gulpfile.js adăugați acest cod:

// gulpfile.js
const { src, dest } = require("gulp");
const sharpResponsive = require("gulp-sharp-responsive");

După care elaborăm funcția pentru crearea și optimizarea imaginilor:

// gulpfile.js
const { src, dest } = require("gulp");
const sharpResponsive = require("gulp-sharp-responsive");

const img = () => src("src/img/*.jpg")
  .pipe(sharpResponsive({
    formats: [
      // jpeg
      { width: 640, format: "jpeg", rename: { suffix: "-sm" } },
      { width: 768, format: "jpeg", rename: { suffix: "-md" } },
      { width: 1024, format: "jpeg", rename: { suffix: "-lg" } },
      // webp
      { width: 640, format: "webp", rename: { suffix: "-sm" } },
      { width: 768, format: "webp", rename: { suffix: "-md" } },
      { width: 1024, format: "webp", rename: { suffix: "-lg" } },
      // avif
      { width: 640, format: "avif", rename: { suffix: "-sm" } },
      { width: 768, format: "avif", rename: { suffix: "-md" } },
      { width: 1024, format: "avif", rename: { suffix: "-lg" } },
    ]
  }))
  .pipe(dest("dist/img"));

În finar, să expunem această funcție, astfel încât să o putem folosi prin npm run img
Îm fișierul package.json scriem următoarele:

// package.json
{
  "scripts": {
    "img": "gulp img"
  }
}

Acum, să rulăm aceast script.
În terminalul dvs., executați această comandă:

npm run img

Ca rezultat ar trebui să primiți în consolă un rezultat similar:

$ npm run img

> img     
> gulp img

[14:11:00] Using gulpfile /home/localhost/gulpfile.js
[14:11:01] Starting 'build'...
[14:11:01] Starting 'img'...
[14:11:02] Finished 'img' after 1.92 s
[14:11:02] Finished 'build' after 1.93 s

Și în mapa dist/img fișierele noi generate:

.
├── dist/
│   └── img/
│       ├── ion-lg.avif
│       ├── ion-lg.jpg
│       ├── ion-lg.webp
│       ├── ion-md.avif
│       ├── ion-md.jpg
│       ├── ion-md.webp
│       ├── ion-sm.avif
│       ├── ion-sm.jpg
│       └── ion-sm.webp
├── src/
│   └── img/
│       └── ion.jpg
├── gulpfile.js
└── package.json

Concluzie

Adaptivitatea imaginilor poate fi de folos atunci când doriți să vă îmbunătățiți viteza paginii web folosind această tehnică HTML:

<picture>
  <!-- avif -->
  <source srcset="/img/ion-sm.avif" media="(max-width: 640px)" type="image/avif" />
  <source srcset="/img/ion-md.avif" media="(max-width: 768px)" type="image/avif" />
  <source srcset="/img/ion-lg.avif" media="(max-width: 1024px)" type="image/avif" />
  <!-- webp -->
  <source srcset="/img/ion-sm.webp" media="(max-width: 640px)" type="image/webp" />
  <source srcset="/img/ion-md.webp" media="(max-width: 768px)" type="image/webp" />
  <source srcset="/img/ion-lg.webp" media="(max-width: 1024px)" type="image/webp" />
  <!-- jpeg -->
  <source srcset="/img/ion-sm.jpeg" media="(max-width: 640px)" type="image/jpeg" />
  <source srcset="/img/ion-md.jpeg" media="(max-width: 768px)" type="image/jpeg" />
  <source srcset="/img/ion-lg.jpeg" media="(max-width: 1024px)" type="image/jpeg" />
  <!-- original -->
  <img src="/img/ion.jpeg" class="img-responsive" alt="Ion in the vilage." />
</picture>

În acest fel, solicitați de la browser:

Să încarce inițial imagini de format mai modern
Să încarce o imagine care se potrivește cu lățimea ferestrei de vizualizare
Afișare <img> dacă un browser nu suportă formate moderne

Vă mulțumesc că ați citit acest tutorial, sper că v-a plăcut la fel de mult pe cât mi-a plăcut și mie!