Cómo la optimización de imágenes redujo el peso de la página de inicio en mi sitio web en un 62 %

Las imágenes son quizás el tipo de contenido más común que se encuentra en Internet. Se dice que una imagen puede valer más que mil palabras. Pero, si te dejas llevar demasiado, agregarán muchos megabytes al peso de tu sitio.

Por lo tanto, si bien una imagen web debe ser de alta calidad y vibrante, debe mantenerse dentro de un tamaño razonable para garantizar que los tiempos de carga de la página sean lo más rápidos posible y que el uso de datos se mantenga en un nivel aceptable.

En mi caso, descubrí que el tamaño de la página principal de mi sitio web superaba los 1,1 MB. Las imágenes representaron el 88% de esa cantidad. Me di cuenta de que el peso de estas imágenes (en términos de resolución) era más de lo que realmente necesitaban. Tomé la decisión de optimizar las imágenes.

Comencé el proceso de optimización leyendo el excelente libro electrónico Essential Image Optimization de Eddie Osmani y luego procedí a implementar sus recomendaciones en mi sitio web. También aprendí y apliqué el concepto de imágenes flexibles.

Todo esto permitió reducir el peso de la página principal a 445kb. ¡Es decir, el peso disminuyó en un 62%!

En este artículo, describiré los pasos que tomé para optimizar el peso de la página principal.

¿Qué es la compresión de imágenes?

La compresión de imágenes es una reducción en el tamaño de una imagen mientras se mantiene la calidad de la imagen en un nivel aceptable. Para comprimir las imágenes en mi sitio, elegí la herramienta imagemin .

Para usar imagemin, asegúrese de tener instalado Node.js, luego abra una ventana de terminal y escriba cd en your_project_dir y ejecute el siguiente comando:

npm install imagemin

Cree un nuevo archivo llamado imagemin.js y pegue el siguiente contenido en la terminal:

const imagemin = require('imagemin');
const PNGImages = 'assets/images/*.png';
const JPEGImages = 'assets/images/*.jpg';
const output = 'build/images';

Siéntase libre de cambiar los valores de PNGImages, JPEGImages y generarlos de acuerdo con la estructura de su proyecto.

Para comprimir cualquier tipo de imagen, necesita instalar más complementos.

Comprimir JPEG con MozJPEG

Para comprimir imágenes JPEG, utilicé una herramienta llamada MozJPEG de Mozilla, que está disponible como complemento de imagemin: imagemin-mozjpeg . Puede instalarlo ejecutando el siguiente comando:

npm install imagemin-mozjpeg

Luego agregue lo siguiente a su archivo imagemin.js:

const imageminMozjpeg = require('imagemin-mozjpeg');
const optimiseJPEGImages = () =>
  imagemin([JPEGImages], output, {
    plugins: [
      imageminMozjpeg({
        quality: 70,
      }),
    ]
  });
optimiseJPEGImages()
  .catch(error => console.log(error));

Puede ejecutar el script ejecutándolo node imagemin.jsen la terminal. Procesará todas las imágenes JPEG y colocará sus versiones optimizadas en el archivo build/images.

He encontrado que un valor qualityde igual 70en su mayor parte produce muy buenas imágenes, pero el suyo puede no ser el mismo. ¡Experimentar!

MozJPEGgenera un JPEG progresivo de forma predeterminada, lo que significa que las imágenes se cargarán desde la resolución más baja hasta la mejor hasta que estén completamente cargadas. También tienden a ser un poco más pequeños que los archivos JPEG básicos debido a la forma en que están codificados.

Puedes comprobar si una imagen JPEG es progresiva o no usando esta excelente herramienta de línea de comandos de Sindre Sorhus .

Los pros y los contras de usar JPEG progresivos están bien descritos en su libro de Eddy Osmani. Para mí, personalmente, las ventajas superan a las desventajas, por lo que me quedo con la configuración predeterminada.

Si prefiere utilizar imágenes JPEG básicas, establezca el valor progressiveen false. Por cierto, no olvide visitar la página imagemin-mozjpeg nuevamente para ver otras configuraciones con las que puede jugar.

Optimización de imágenes PNG con pngquant

pngquant  es mi herramienta favorita para optimizar imágenes PNG. Puede usarlo a través del complemento imagemin: imagemin-pngquant :

npm install imagemin-pngquant

Luego agregue lo siguiente a su imagemin.jsarchivo:

const imageminPngquant = require('imagemin-pngquant');
const optimisePNGImages = () =>
  imagemin([PNGImages], output, {
    plugins: [
      imageminPngquant({ quality: '65-80' })
    ],
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .catch(error => console.log(error));

Un valor qualityigual 65-80proporciona un compromiso excelente entre el tamaño del archivo y la calidad de la imagen.

Con esta configuración, pude obtener una captura de pantalla de 187 KB de mi sitio sin ninguna pérdida notable en la calidad de la imagen. Sin optimización, la captura de pantalla pesaba 913 KB. ¡El peso se redujo en un 79%!

Aquí están ambos archivos. Échales un vistazo y juzga por ti mismo:

Use el formato WebP para navegadores que lo admitan

WebP  es un formato de imagen relativamente nuevo presentado al público por Google en 2010. Utiliza el algoritmo de compresión de imágenes fijas con pérdida y sin pérdida del códec de video VP8 , lo que lo convierte en una excelente alternativa a los formatos JPEG y PNG.

Visualmente, la calidad de imagen de WebP es muy similar a la de JPEG y PNG, pero el tamaño del archivo de WebP es mucho menor. Por ejemplo, cuando convertí la captura de pantalla anterior al formato WebP, obtuve un archivo de 88 KB que era comparable en calidad a la imagen original de 913 KB. ¡Al mismo tiempo, el peso disminuyó en un 90%!

Echa un vistazo a las tres imágenes. ¿Puedes ver la diferencia?

Personalmente, creo que la calidad de la última imagen prácticamente no difiere de la de mayor peso.

Entonces, ahora que entendemos que tiene sentido usar el formato WebP, es importante señalar que en la actualidad este formato no puede reemplazar por completo a JPEG y PNG, ya que no todos los navegadores lo admiten.

En el momento de escribir este artículo, los navegadores conocidos como Firefox, Safari y Edge no tenían soporte para WebP.

Sin embargo, según caniuse.com , más del 70 % de los usuarios de todo el mundo utilizan navegadores habilitados para WebP. Esto significa que al usar imágenes WebP, puede hacer que sus páginas web sean más rápidas para aproximadamente el 70% de sus visitantes.

Convierte JPEG y PNG a WebP

Convertir imágenes JPEG y PNG a WebP es bastante fácil si usa el complemento imagemin-webp .

Instálelo ingresando el siguiente comando en su terminal:

npm install imagemin-webp

Luego agregue lo siguiente a su imagemin.jsarchivo:

const imageminWebp = require('imagemin-webp');
const convertPNGToWebp = () =>
  imagemin([PNGImages], output, {
    use: [
      imageminWebp({
        quality: 85,
      }),
    ]
  });
const convertJPGToWebp = () =>
  imagemin([JPGImages], output, {
    use: [
      imageminWebp({
        quality: 75,
      }),
    ]
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .then(() => convertPNGToWebp())
  .then(() => convertJPGToWebp())
  .catch(error => console.log(error));

Un valor qualityigual 85produce imágenes WebP de calidad similar a su equivalente PNG, pero WebP es significativamente más pequeño. Para las imágenes JPEG, descubrí que un valor qualityigual 75brinda un buen equilibrio entre la calidad y el tamaño de la imagen.

Para ser honesto, todavía estoy experimentando con estos valores, así que no los tome como mi recomendación.

Y no olvide volver a visitar la página imagemin-webp para ver todas las configuraciones disponibles para su uso.

Trabajar con imágenes WebP en HTML

Una vez que haya terminado de convertir sus imágenes al formato WebP, puede usar un marcado HTML especial para aquellos casos en los que el navegador no admita el formato WebP.

<picture>
    <source srcset="sample_image.webp" type="image/webp">
    <source srcset="sample_image.jpg" type="image/jpg">
    <img src="sample_image.jpg" alt="">
</picture>

Con este marcado, los navegadores que entienden el formato image/webpdescargan una variante en la que todas las imágenes están en formato WebP y las muestran, mientras que otros navegadores descargan y muestran imágenes en formato JPEG.

Cualquier navegador que no entienda <picture>se saltará todo sourcey descargará lo que esté en el atributo de srcetiqueta en la imgparte inferior. Por lo tanto, estamos mejorando gradualmente nuestra página principal, admitiendo todas las clases de navegadores.

Tenga en cuenta que la etiqueta imges en todos los casos una parte obligatoria de la sintaxis, ya que muestra una imagen, es decir, si no se especifica esta etiqueta, no habrá imagen.

La etiqueta <picture>y todo lo que hay dentro sourceayuda al navegador a seleccionar la versión deseada de la imagen. Una vez realizada la selección, la URL de la imagen se pasa a la etiqueta img y se muestra en la página.

Esto significa que no necesita diseñar las etiquetas <picture>sourceya que el navegador no las representa. Es decir, puede, como antes, diseñar solo el archivo img.

Conclusión

Como puede ver, el proceso de optimización de imágenes es bastante simple y al final lo llevará a una reducción en el tiempo de carga de la página, lo que significa que los visitantes de su sitio gastarán mucho menos de su valioso tiempo, lo que a su vez significa que será más cómodo utilizar sus servicios. Así que dedica un par de horas a optimizar tu contenido en el sitio.

Isaiah : Cómo la optimización de imágenes redujo el peso de la página de mi sitio web en un 62 %

Compartir:
Categorías: Tutoriales

0 comentarios

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.