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:
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!