Unos estáticos

muy dinámicos

Unos estáticos

muy dinámicos

Adevinta Frontend Team

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

#nuclitruki

#AdevintaMeetups

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

Command

Input

Output

#AdevintaMeetups

Joan

León

@nucliweb

#AdevintaMeetups

Joan

León

@nucliweb

REFACTORTIME

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

Command

Input

Output

 Folders

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Folders

recursive-readdir

#nuclitruki

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

5.1.0

1.3.2

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 imagemin-cli

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 svgo

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updating...

npm-check-updates

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updated

After

Before

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updating

 Like a crafter

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updating

 Like a crafter

OctoLinker

#nuclirecurso

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updating

 Like a crafter

El frontend es para las valientes

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updating

 Like a crafter

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updating

 Like a crafter

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updating

 Like a crafter

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("All images optimized!");
  console.log("You are rock! 🤘🏼");
})();

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Compressors

 Updating

 Like a crafter

After

Before

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Originals

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Originals

iStock-514322740.jpg

8.605.297 bytes

5677 × 3777px

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Originals

home.jpg

128.510 bytes

485 x 300px

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Density

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Density

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Density

128Kb

  485 x 300px

389 kb

  975 x 600px

739 Kb

 1455 x 900px

 home.jpg

 home@2.jpg

 home@3.jpg

ORIGINALS

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Documentation

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Documentation

#AdevintaMeetups

Joan

León

@nucliweb

Refactor Time 

 Guidelines

 Documentation

🙈

#AdevintaMeetups

SSIM

Butteraugli

==

The Structural Similarity

Herramientas para medir las diferencias percibidas entre imágenes

Joan

León

@nucliweb

Improvements 

 Diffing

#AdevintaMeetups

Joan

León

@nucliweb

Improvements 

 Diffing

 SSIM

#AdevintaMeetups

Joan

León

@nucliweb

Improvements 

 Diffing

 BETA

 SSIM

#AdevintaMeetups

Joan

León

@nucliweb

Improvements 

 Image Garbage Colector

 Working Draft

Eliminar las imágenes que no se estén visualizando por las usuarias

  • Analizar los logs para comprobar la última fecha de acceso a una imagen
  • Marcarla como potencialmente "borrable"
  • Script para borrarlas
  • Dashboard para borrarlas
  • PR para eliminar las imágenes

#AdevintaMeetups

Joan

León

@nucliweb

Improvements 

 Backlog

  • Responsive Images en componentes React
  • Responsive Images en background-image con PostCSS
  • Responsive Images automatizado
  • PNG como formato para las imágenes originales
  • Ejecutar compress antes de hacer el sync a S3

#AdevintaMeetups

Joan

León

@nucliweb

Legacy Code 

 Yes, we have monolith too 🤪

#AdevintaMeetups

-624 KB 🤘🏼

Joan

León

@nucliweb

ImageBot 

#AdevintaMeetups

Joan

León

@nucliweb

Crafter 

#AdevintaMeetups

¿?

#AdevintaMeetups

We

❤️

feed

back

Unos estáticos muy dinámicos

By Joan León

Unos estáticos muy dinámicos

En muchos proyectos, tenemos una series de recursos que no son dinámicos: imágenes, vídeos, iconos, tipografías o textos i18n. Las imágenes suelen ser las menos cuidadas, desde el punto de vista de la performance. Y lo sé de primera mano, así que os quiero contar cómo pasamos de una carpeta images desplegada en un S3, a un repositorio con unas guidelines de la estructura, naming, automatización de compresión de imágenes y generación de “Responsive Images”, test de regresión visual e incluso un garbage images collector, para hacer limpieza de esas imágenes que quedan en el olvido.

  • 500
Loading comments...

More from Joan León