Joan León PRO
⚡️ Web Performance Consultant | Speaker | Staff Frontend Engineer at @AdevintaSpain | @GoogleDevExpert in #WebPerf | @cloudinary Ambassador
Optimización de imágenes
JAM Stack
Adevinta Frontend Team
Optimización de imágenes
J
M
JavaScript
A
Markup
APIs
JavaScript
JavaScript
Optimización de imágenes
JAM Stack
J
imagemin
Optimización de imágenes
JAM Stack
J
imagemin
Optimización de imágenes
JAM Stack
J
imagemin
Optimización de imágenes
JAM Stack
J
imagemin
Optimización de imágenes
JAM Stack
J
imagemin-cli
$ npm install --global imagemin-cli
Command
Input
Output
Optimización de imágenes
JAM Stack
J
imagemin-cli
Optimización de imágenes
JAM Stack
J
imagemin-cli
Command
Input
Output
Optimización de imágenes
JAM Stack
J
imagemin-cli
Optimización de imágenes
JAM Stack
J
imagemin-cli
Demo or it didn't happen
Optimización de imágenes
JAM Stack
J
imagemin-cli
Optimización de imágenes
JAM Stack
J
imagemin
$ npm install --save imagemin
$ npm install --save imagemin-mozjpeg
$ npm install --save imagemin-pngquant
$ npm install --save imagemin-svgo$ npm install --save imagemin imagemin-{mozjpeg,pngquant,svgo}Optimización de imágenes
JAM Stack
J
imagemin
$ npm install --save imagemin
$ npm install --save imagemin-mozjpeg
$ npm install --save imagemin-pngquant
$ npm install --save imagemin-svgo$ npm install --save imagemin{,-{mozjpeg,pngquant,svgo}}const imagemin = require("imagemin");
const imageminMozjpeg = require("imagemin-mozjpeg");
const imageminPngquant = require("imagemin-pngquant");
const imageminSVGO = require("imagemin-svgo");
(async () => {
const files = await imagemin(["./originals/{*.jpg,*.png,*.svg}"], {
destination: "./images",
plugins: [
imageminMozjpeg({ quality: 80 }),
imageminPngquant({
strip: true,
quality: [0.75, 0.8]
}),
imageminSVGO({
removeViewBox: false,
removeDimensions: true
})
]
});
console.log("You´re rock");
})();
Optimización de imágenes
JAM Stack
J
imagemin
Optimización de imágenes
JAM Stack
J
imagemin
Demo or it didn't happen
APIs
APIs
Optimización de imágenes
JAM Stack
J
A
Optimización de imágenes
JAM Stack
J
A
Cloudinary API
Optimización de imágenes
JAM Stack
J
A
Cloudinary API
Demo or it didn't happen
Markup
Markup
Optimización de imágenes
JAM Stack
J
A
M
Gatsby
Optimización de imágenes
JAM Stack
J
A
M
Gatsby
Optimización de imágenes
JAM Stack
J
A
M
gatsby-plugin-sharp
gatsby-transformer-sharp
gatsby-remark-images
gatsby-image
Gatsby
Optimización de imágenes
JAM Stack
J
A
M
Gatsby
Demo or it didn't happen
Optimización de imágenes
JAM Stack
J
A
M
Next.js
Optimización de imágenes
JAM Stack
J
A
M
Images
+
Optimización de imágenes
JAM Stack
¿?
Optimización de imágenes JAM Stack
By Joan León
Optimización de imágenes JAM Stack
Las imágenes son un recurso que está presente en cualquier proyecto web. Hay muchos formatos de imágenes, muchos compresores y cientos de posibles configuraciones. En esta charla veremos una series de buenas prácticas en optimización de imágenes y daremos un repaso a las posibilidades que tenemos para mejorar la experiencia de usuario optimizando nuestras imágenes en un JAMStack.
