Descubra como os CMSs, como o WordPress e outros geradores de sites, podem facilitar o uso de imagens responsivas.
Embora certamente seja uma melhoria em relação a salvar manualmente cortes alternativos de cada imagem e otimizá-los manualmente com uma ferramenta como o Squoosh.app, automatizar a compactação de imagens como uma etapa do processo de desenvolvimento tem algumas limitações. Em primeiro lugar, nem sempre você terá controle total sobre as imagens usadas no site. A maioria das imagens voltadas para o usuário na Web é conteúdo mais do que questões de desenvolvimento, enviadas por usuários ou editores, e não em um repositório com recursos de desenvolvimento, como JavaScript e folhas de estilo.
Isso normalmente exige mais de um processo para o gerenciamento de imagens: uma tarefa de desenvolvimento para os recursos de imagem usados na criação e manutenção de um site (planos de fundo, ícones, logotipos e assim por diante) e outro relacionado a recursos de imagem gerados pelo uso do site, como fotos incorporadas em uma postagem por uma equipe editorial ou um avatar enviado por um usuário. Embora o contexto possa ser diferente, os objetivos finais são os mesmos: codificação e compactação automatizadas com base nas configurações definidas pela equipe de desenvolvimento.
Felizmente, as bibliotecas de processamento de imagens que você conheceu nos fluxos de trabalho de desenvolvimento local podem ser usadas em vários contextos. Embora nunca exista uma abordagem única para a marcação de imagem responsiva, esses sistemas oferecem padrões, opções de configuração e hooks de API eficientes para facilitar a implementação.
Geradores de sites estáticos
Em comparação com os executores de tarefas, há uma semelhança na maneira como os geradores de sites estáticos, como o Jekyll ou o Eleventy, abordam as imagens. O uso dessas ferramentas para produzir um site pronto para implantação requer o gerenciamento de recursos, incluindo minificação ou transcompilação de CSS e agrupamento de JavaScript. Como você pode imaginar, isso significa que essas ferramentas permitem processar recursos de imagem da mesma maneira, usando muitas das bibliotecas que você já conhece.
O plug-in de imagens oficial do Eleventy usa a ferramenta Sharp para oferecer redimensionamento, geração de vários tamanhos de origem, recodificação e compactação, assim como algumas das tarefas mostradas aqui.
Ao contrário de um executor de tarefas, um gerador de sites estático tem insights diretos sobre a configuração e o uso dessas bibliotecas e a marcação que está sendo gerada para o site de produção. Isso significa que ele pode fazer muito mais para automatizar nossa marcação de imagem responsiva. Por exemplo, quando invocado como parte de um código curto para exibição de imagens, este plug-in gera HTML de acordo com as opções de configuração transmitidas para o 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);
};
Esse código curto poderia ser usado no lugar da sintaxe de imagem padrão:
{% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
Se configurada para gerar várias codificações, como mostrado acima, a marcação gerada será um elemento <picture> contendo elementos <source>, atributos type e atributos srcset correspondentes já preenchidos com uma lista de tamanhos candidatos gerados.
<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>
Esse plug-in não pode generate um atributo sizes viável, já que ele não sabe o tamanho e a posição finais
da imagem no layout renderizado, mas aceita um deles como entrada ao gerar sua marcação, outro job para o RespImageLint.
Frameworks
Os frameworks de renderização do lado do cliente exigem um executor de tarefas ou um bundler como o Webpack para editar, codificar e compactar os recursos de imagem. O Carregador responsivo, por exemplo, também usa a biblioteca do Sharp para salvar novamente os recursos de imagem. Em seguida, ela permite que você
import suas imagens como 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';
Essas imagens importadas podem ser usadas com abstrações como o componente de imagem do React (link em inglês) ou para preencher diretamente a marcação de imagem responsiva:
<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"
/>
Um framework que faz a renderização no lado do cliente é um forte candidato para Lazysizes e sizes="auto", oferecendo imagens responsivas
quase totalmente automatizadas.
Sistemas de gerenciamento de conteúdo
O WordPress foi um dos primeiros usuários da marcação de imagens responsivas nativas, e a API foi melhorada gradualmente desde que foi introduzida no WordPress 4.4 com compatibilidade com WebP e controle sobre o tipo MIME de saída. O núcleo do WordPress foi projetado para usar a extensão PHP do ImageMagick (ou, caso contrário, a biblioteca GD).
Quando é feito o upload de uma imagem por meio da interface de administração do WordPress, essa imagem de origem é usada para gerar arquivos voltados ao usuário no servidor, da mesma forma que você faria na máquina local. Por padrão, qualquer saída de imagem do WordPress virá
com um atributo srcset gerado com base nos tamanhos de imagem configurados no seu tema.
Duas configurações importantes que podem ser definidas para as imagens geradas são a qualidade da compactação e o tipo MIME de saída.
Por exemplo, para definir a qualidade de compactação padrão como 70 para todas as imagens geradas, use o seguinte:
add_filter( 'wp_editor_set_quality', function() { return 70; } );
Para uma compactação ainda melhor, mude o formato de saída das imagens JPEG enviadas para WebP com o seguinte:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
Como o WordPress entende todos os cortes alternativos
e codificações que gera de uma imagem enviada, ele pode fornecer funções auxiliares como
wp_get_attachment_image_srcset() para
recuperar o valor srcset completo gerado de um anexo de imagem.
Como você já deve ter percebido, trabalhar com o atributo sizes é um pouco mais estressante. Sem informações
sobre como as imagens serão usadas em um layout, o WordPress tem como padrão um valor sizes que diz: "esta imagem
deve ocupar 100% da janela de visualização disponível, até o tamanho intrínseco da maior fonte", um padrão previsível, mas não correto
para qualquer aplicativo real. Use wp_calculate_image_sizes()
para definir atributos sizes adequados ao contexto nos seus modelos.
É claro que existem inúmeros plug-ins do WordPress dedicados a tornar os fluxos de trabalho modernos de imagens mais rápidos para equipes de desenvolvimento e usuários.
Talvez a melhor parte é que plug-ins como o Site Accelerator do Jetpack (antigo "Photon")
podem oferecer negociação no lado do servidor para codificações, garantindo que os usuários recebam a codificação menor e mais eficiente compatível com
o navegador sem a necessidade dos padrões de marcação <picture> e type. Ele faz isso com o uso de uma rede de fornecimento de conteúdo de imagem,
uma tecnologia que você pode usar, independentemente do seu CMS.
Tudo isso também acontece com soluções de CMS hospedadas, como a Shopify, embora os mecanismos sejam um pouco diferentes: oferecer ganchos
semelhantes para gerar fontes de imagens alternativas e atributos srcset correspondentes
e direção de arte usando o elemento <picture>.