Optimización

de imágenes

para la web

The sum of transfer size kilobytes of all external images requested by the page. An external image is identified as a resource with the png, gif, jpg, jpeg, webp, ico, or svg file extensions or a MIME type containing image.

DISCLAIMER

Después de la charla de Joan León ... sortearemos el libro "Image Optimization" de Addy Osmani entre todos los/as asistentes.

DISCLAIMER

49 images

283 MB

=

Other example

one more...

44 images

1.4 MB

32 images

7.4 MB

https://www.adevinta.es/

1

2

3

?

🙈

"Original"

"Original"

ImageOptim

+2

ImageOptim

+2

WebP

const sharp = require("sharp");
const fs = require("fs");

const ORIGINALS = "./home/original-images/";
const IMAGES = "./home/images/";
const FORMAT = "webp";

function convertToimg({ file }) {
  const filename = file.split(".").slice(0, -1).join(".");

  return sharp(`${ORIGINALS}/${file}`).toFile(
    `${IMAGES}${filename}.${FORMAT}`,
    () => console.log(`${IMAGES}${filename}.${FORMAT}`)
  );
}

WebP

fs.existsSync(IMAGES)
  ? fs.rmdirSync(IMAGES, { recursive: true })
  : fs.mkdirSync(IMAGES);


fs.readdirSync(ORIGINALS).forEach((file) => {
  const isImageFile = /\.(jpe?g|png|tif?f|avif)$/i.test(file);

  isImageFile && convertToimg({ file });
});

WebP

4,5 MB

15,5 MB

home

2,1 MB

17,5 MB

speakers

WebP

+1

WebP

+2

WebP

AVIF

const sharp = require("sharp");
const fs = require("fs");

const ORIGINALS = "./home/original-images/";
const IMAGES = "./home/images/";
const FORMAT = "avif";

function convertToimg({ file }) {
  const filename = file.split(".").slice(0, -1).join(".");

  return sharp(`${ORIGINALS}/${file}`).toFile(
    `${IMAGES}${filename}.${FORMAT}`,
    () => console.log(`${IMAGES}${filename}.${FORMAT}`)
  );
}

AVIF

2,3 MB

15,5 MB

home

1 MB

17,5 MB

speakers

AVIF

+1

AVIF

+2

AVIF

AVIF

const sharp = require("sharp");
const fs = require("fs");

const ORIGINALS = "./home/original-images/";
const IMAGES = "./home/images/";
const FORMAT = "avif";
const WIDTH = 680

function convertToimg({ file }) {
  const filename = file.split(".").slice(0, -1).join(".");

  return sharp(`${ORIGINALS}/${file}`)
  	.resize(WIDTH)
  	.toFile(
          `${IMAGES}${filename}.${FORMAT}`,
          () => console.log(`${IMAGES}${filename}.${FORMAT}`)
        );
}

AVIF

644 KB

17,5 MB

speakers

JPEG-XL

<picture>
  <source type="image/jxl" srcset="image.jxl">
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" height="300" width="200"
       alt="Awesome image">
</picture>
<picture>
  <source
    sizes="(min-width: 600px) 100vw, 600px,
           (min-width: 1200px) 100vw, 1200px"
    srcset="image-wide.avif 600w,
            image-ultrawide.avif 1200w"
    type="image/avif">
  ...
  <img src="image.jpg" height="300" width="200"
       alt="Awesome image">
</picture>
<picture>
  <source
    sizes="(min-width: 600px) 100vw, 600px,
           (min-width: 1200px) 100vw, 1200px"
    srcset="image-wide.jpg 600w,
            image-ultrawide.jpg 1200w"
    type="image/jxl">
  <source
    sizes="(min-width: 600px) 100vw, 600px,
           (min-width: 1200px) 100vw, 1200px"
    srcset="image-wide.avif 600w,
            image-ultrawide.avif 1200w"
    type="image/avif">
  <source
    sizes="(min-width: 600px) 100vw, 600px,
           (min-width: 1200px) 100vw, 1200px"
    srcset="image-wide.webp 600w,
            image-ultrawide.webp 1200w"
    type="image/webp">
  <source
    sizes="(min-width: 600px) 100vw, 600px,
           (min-width: 1200px) 100vw, 1200px"
    srcset="image-wide.jpg 600w,
            image-ultrawide.jpg 1200w"
    type="image/jpeg">
  <img 
    loading="lazy"
    decoding="async"
    src="image.jpg"
    height="300" width="200"
    alt="Awesome image">
</picture>
<picture>
  <img 
    sizes="(min-width: 600px) 100vw, 600px,
           (min-width: 1200px) 100vw, 1200px"
    srcset="
      https://res.cloudinary.com/nucliweb/.../image.png 600px,
      https://res.cloudinary.com/nucliweb/.../image.png 1200px"
    src="https://res.cloudinary.com/nucliweb/.../image.png"
    loading="lazy"
    decoding="async"
    height="300"
    width="200"
    alt="Awesome image">
</picture>

.../upload/dpr_auto,f_auto,q_auto/v1683697498/...

We use...

image-set()

/* Select image based on resolution */
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/* Select gradient based on resolution */
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/* Select image based on supported formats */
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);

Takeaways

Use WebP, AVIF, JPEG-XL image format

Use native loading="lazy"

Preload the LCP image element

Use Responsive Images

Define the image size in the <img> tag

Use CDN image service

Resources

Optimización de imágenes para la web

By Joan León

Optimización de imágenes para la web

Como profesionales del desarrollo web, invertimos tiempo y esfuerzo en seleccionar los mejores frameworks, aplicar buenas prácticas en Javascript y CSS, y optimizar el SEO de nuestro contenido. Sin embargo, a menudo pasamos por alto un aspecto crucial: ¡las imágenes! Según el Web Almanac 2022, aproximadamente el 85% de las imágenes en la web se encuentran en formatos como JPEG, PNG y GIF, y sorprendentemente, el 10% de las páginas contienen al menos una imagen que pesa cerca de 1 MB o más. Cargamos imágenes innecesarias, utilizamos formatos inadecuados y no las adaptamos al tamaño de pantalla del usuario. Esto resulta en una experiencia deficiente para nuestros visitantes. Pero no te preocupes, ¡tenemos la solución! Descubre cómo utilizar herramientas de análisis, optimización y validación que te permitirán reducir el peso de tus imágenes y mejorar significativamente la velocidad de carga de tu página. ¡Eleva la experiencia de tus usuarios a un nuevo nivel! Ya seas desarrollador, editor de contenido, especialista en marketing o producto, esta información es fundamental para garantizar que tus proyectos web destaquen en todos los aspectos. Atrévete a optimizar tus imágenes y marca la diferencia en la percepción de velocidad de tus usuarios.

  • 341