You can use a gulpfile with either gulp-responsive or gulp-sharp-responsive.
I personally use the latter, because it has support for the AVIF format.
To integrate it nicely with your Angular project, you can follow these steps:
- Install the dependencies:
npm i --save-dev gulp gulp-sharp-responsive
- Create a
gulpfile.js in your project root with the following content
const { src, dest } = require("gulp");
const sharpResponsive = require("gulp-sharp-responsive");
const compress = () =>
src("images/*.{png,jpg}")
.pipe(
sharpResponsive({
formats: [
// jpeg
{ width: 256, format: "jpeg", rename: { suffix: "-256" } },
{ width: 512, format: "jpeg", rename: { suffix: "-512" } },
{ width: 1024, format: "jpeg", rename: { suffix: "-1024" } },
// webp
{ width: 256, format: "webp", rename: { suffix: "-256" } },
{ width: 512, format: "webp", rename: { suffix: "-512" } },
{ width: 1024, format: "webp", rename: { suffix: "-1024" } },
// avif
{ width: 256, format: "avif", rename: { suffix: "-256" } },
{ width: 512, format: "avif", rename: { suffix: "-512" } },
{ width: 1024, format: "avif", rename: { suffix: "-1024" } },
],
})
)
.pipe(dest("src/assets/compressed"));
module.exports = {
compress,
};
- Create a folder in your project root, where your uncompressed image files are located (In this example it is called
images)
- Add a preinstall script to your
package.js, so that your gulpfile is called on every build
"scripts": {
"prebuild": "gulp compress",
// ...
},
If you call npm run build now, it will compress your images and move them in the specified assets folder, before actually running ng build.
Now you can use the image files with a picture/source combination like in the following snippet. Keep in mind that the order of the source tags is important.
<!-- {{image}} is the image name -->
<picture *ngIf="image">
<!-- avif -->
<source
srcset="assets/compressed/{{image}}-256.avif"
media="(max-width: 512px)"
type="image/avif"
/>
<source
srcset="assets/compressed/{{image}}-512.avif"
media="(max-width: 1024px)"
type="image/avif"
/>
<source
srcset="assets/compressed/{{image}}-1024.avif"
media="(max-width: 2048px)"
type="image/avif"
/>
<!-- webp -->
<source
srcset="assets/compressed/{{image}}-256.webp"
media="(max-width: 512px)"
type="image/webp"
/>
<source
srcset="assets/compressed/{{image}}-512.webp"
media="(max-width: 1024px)"
type="image/webp"
/>
<source
srcset="assets/compressed/{{image}}-1024.webp"
media="(max-width: 2048px)"
type="image/webp"
/>
<!-- jpeg -->
<source
srcset="assets/compressed/{{image}}-256.jpg"
media="(max-width: 512px)"
type="image/jpeg"
/>
<source
srcset="assets/compressed/{{image}}-512.jpg"
media="(max-width: 1024px)"
type="image/jpeg"
/>
<source
srcset="assets/compressed/{{image}}-1024.jpg"
media="(max-width: 2048px)"
type="image/jpeg"
/>
<!-- original -->
<img src="assets/compressed/{{ image }}-1024.jpg" />
</picture>
