Generadores de sitios, frameworks y CMS

Descubre cómo los CMS, como WordPress, y otros generadores de sitios pueden hacerlo más fáciles de usar.

Si bien es una mejora con respecto a guardar manualmente cortes alternativos de cada imagen y optimizarlos manualmente a través de una herramienta como Squoosh.app, la automatización de la compresión de imágenes como paso del proceso de desarrollo tiene algunas limitaciones. Por un lado, no puedes siempre tienen control total sobre las imágenes que se usan en un sitio; la mayoría de las imágenes para el usuario en la Web son cuestiones más relacionadas con el contenido en lugar de problemas de desarrollo, subidos por usuarios o editores, en lugar de alojarse en un repositorio junto con recursos de desarrollo, como JavaScript y hojas de estilo.

Por lo general, esto requerirá más de un proceso para la administración de imágenes: una tarea de nivel de desarrollo para los recursos de imagen usados en crear y mantener un sitio (fondos, íconos, logotipos, etc.) y otro relacionado con los recursos de imagen generados a través del uso del sitio, como fotografías incorporadas en una publicación por parte del equipo editorial o un avatar que sube un usuario. Si bien el contexto puede difieren, los objetivos finales son los mismos: codificación y compresión automatizadas basadas en la configuración definida por el equipo de desarrollo.

Afortunadamente, las bibliotecas de procesamiento de imágenes que conociste de tus flujos de trabajo de desarrollo local se pueden usar en cualquier cantidad de contextos. Si bien nunca puede haber un enfoque único para el lenguaje de marcado de imágenes responsivas, estos sistemas brindan valores predeterminados, opciones de configuración y hooks de API para facilitar su implementación.

Generadores de sitios estáticos

En comparación con los ejecutores de tareas, hay cierta similitud en la forma en que los generadores de sitios estáticos, como Jekyll o Eleventy, abordan las imágenes. Usando Estas herramientas, que permiten crear un sitio web listo para la implementación, requieren de la administración de los recursos, como la reducción o transpilación y el agrupamiento de CSS de JavaScript. Como puedes imaginar, esto significa que estas herramientas te permiten procesar recursos de imagen de la misma manera, con muchas de las bibliotecas que ya has aprendido.

El complemento de imagen oficial de Eleventy usa Sharp para proporcionar funciones de cambio de tamaño, generación de varios tamaños de fuente, recodificación y compresión, al igual que algunas de las tareas que aprendiste aquí.

A diferencia de un ejecutor de tareas, un generador de sitios estático tiene estadísticas directas sobre la configuración y el uso de esas bibliotecas. y el lenguaje de marcado que se genera para el sitio de producción, lo que significa que puede hacer mucho más para automatizar nuestra imagen responsiva el lenguaje de marcado. Por ejemplo, cuando se lo invoque como parte de un código corto para mostrar imágenes, este complemento generará el código HTML según a las opciones de configuración que se pasan a Sharp.


const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {

async function imageShortcode(src, alt, sizes="100vw") {
  let metadata = await Image(src, {
  formats: ["avif", "webp", "jpeg"],
  widths: [1000, 800, 400],
  outputDir: "_dist/img/",
  filenameFormat: function( id, src, width, format, options ) {
      const ext = path.extname( src ),
        name = path.basename( src, ext );

      return `${name}-${width}.${format}`
  }
  });

  let imageAttributes = {
  alt,
  sizes,
  loading: "lazy"
  };

  return Image.generateHTML(metadata, imageAttributes);
}

eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};

Este código corto se podría usar en lugar de la sintaxis de la imagen predeterminada:

{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}

Si se configura para generar varias codificaciones, como se muestra más arriba, el lenguaje de marcado generado será un elemento <picture> que contenga los elementos <source> correspondientes, los atributos type y los atributos srcset ya están completamente completados con una lista de tamaños de candidatos generados.

<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>

Por supuesto, este complemento no podrá generar un atributo sizes viable, ya que no puede conocer el tamaño y la posición finales. de la imagen en el diseño renderizado, pero sí acepta una como entrada cuando genera el lenguaje de marcado, otra tarea para RespImageLint.

Frameworks

Los frameworks de renderización del cliente requerirán un ejecutor de tareas o agrupador, como Webpack, para editar, codificar y comprimir recursos de imagen. ellos mismos. El cargador responsivo, por ejemplo, también usa la biblioteca de Sharp para volver a guardar elementos de imagen. Luego, te permite Luego, usa import para que tus imágenes se conviertan en objetos:

  import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
  import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
  import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';

Estas imágenes importadas se pueden usar a través de abstracciones como el componente de imagen de React, o para propagarla lenguaje de marcado de imágenes directamente:

<picture>
  <source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
  <source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
  <img
    src={imageDefault.src}
    srcSet={imageDefault.srcSet}
    width={imageDefault.width}
    height={imageDefault.height}
    sizes='…'
    loading="lazy"
  />

Un framework que realiza renderizaciones del cliente es un buen candidato para Lazysizes y sizes="auto", lo que te brinda casi con imágenes responsivas automatizadas.

Sistemas de administración de contenido

WordPress fue uno de los primeros en adoptar el lenguaje de marcado de imágenes responsivas y la API se ha mejorado gradualmente desde presentado en WordPress 4.4 con compatibilidad para WebP y control sobre el tipo de MIME de salida. WordPress Core está diseñado para utilizar la extensión de ImageMagick para PHP. (o, si no, la biblioteca GD).

Cuando se sube una imagen a través de la interfaz de administrador de WordPress, esa imagen de origen se usa para generar archivos para el usuario en en el servidor, tal como lo harías en tu máquina local. De forma predeterminada, cualquier salida de imagen de WordPress se mostrará con un atributo srcset generado según los tamaños de imagen configurados en tu tema.

Dos parámetros de configuración clave que se pueden configurar para las imágenes generadas son la calidad de compresión y el tipo de MIME de salida.

Por ejemplo, si quieres establecer la calidad de compresión predeterminada en 70 para todas las imágenes generadas, usa lo siguiente:

add_filter( 'wp_editor_set_quality', function() { return 70; } );

Para lograr una compresión aún mejor, cambia a WebP el formato de salida de las imágenes JPEG subidas con lo siguiente:

add_filter( 'image_editor_output_format', function( $mappings ) {
  $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
} );

Dado que WordPress comprende cabalmente todos los cortes alternativos, y codificaciones que genera a partir de una imagen subida, puede proporcionar funciones auxiliares como wp_get_attachment_image_srcset() para Recupera el valor srcset generado completo de una imagen adjunta.

Como probablemente adivinarás a estas alturas, trabajar con el atributo sizes es un poco más tenso. Falta información sobre cómo se usarán las imágenes en un diseño, WordPress actualmente establece, de forma predeterminada, un valor sizes que dice efectivamente "esta imagen" debe ocupar el 100% del viewport disponible, hasta el tamaño intrínseco de la fuente más grande”, un valor predeterminado predecible, pero no un valor una para cualquier aplicación del mundo real. Asegúrate de usar wp_calculate_image_sizes(). para establecer atributos sizes adecuados al contexto en tus plantillas.

Por supuesto, existen innumerables complementos de WordPress dedicados a lograr que los flujos de trabajo de imágenes modernos sean más rápidos para los equipos de desarrollo y los usuarios. Quizás lo más interesante es que complementos como Site Accelerator de Jetpack (anteriormente "Photon") pueden proporcionar negociación del servidor para las codificaciones, lo que garantiza que los usuarios reciban la codificación más pequeña y eficiente navegador es compatible sin la necesidad de un patrón de marcado <picture> y type. Para ello, utiliza el contenido de una imagen red de distribución de aplicaciones: una tecnología que puedes usar tú mismo, independientemente de tu CMS.

Esto también se aplica a las soluciones de CMS alojadas como Shopify, aunque los mecanismos en sí difieren un poco: ofrecer productos similares Hooks para generar fuentes de imágenes alternativas y los atributos srcset correspondientes y dirección artística a través del elemento <picture>.