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.

  • 2,138