Descubra como CMSs como o WordPress e outros geradores de sites podem 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 Squoosh.app, a automatização da compactação de imagens como uma etapa do processo de desenvolvimento tem algumas limitações. Para começar, talvez você não sempre têm controle total sobre as imagens usadas em um site. A maioria das imagens voltadas para o usuário na Web é mais preocupada com o conteúdo. do que questões de desenvolvimento, enviadas por usuários ou editores, em vez de ficar em um repositório com recursos de desenvolvimento como JavaScript e folhas de estilo.
Isso normalmente exigirá mais de um processo de gerenciamento de imagens: uma tarefa de nível de desenvolvimento para os recursos de imagem usados em criar e manter um site (planos de fundo, ícones, logotipos etc.) e outro relacionado aos 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 diferem, os objetivos finais são os mesmos: codificação e compactação automatizadas com base em configurações definidas pela equipe de desenvolvimento.
Felizmente, as bibliotecas de processamento de imagens que você conheceu em seus fluxos de trabalho de desenvolvimento local podem ser usadas de diversas formas de contextos. Embora nunca possa haver uma abordagem única para a marcação de imagem responsiva, esses sistemas oferecem recursos padrões, opções de configuração e ganchos de API para facilitar a implementação.
Geradores de sites estáticos
Em comparação com os executores de tarefas, há algumas semelhanças na maneira como geradores de sites estáticos, como Jekyll ou Eleventy, abordam as imagens. Usando essas ferramentas para produzir um site pronto para implantação requer gerenciamento de ativos, incluindo minificação de CSS ou transcompilação 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á aprendeu.
O plug-in de imagem do Eleventy (link em inglês) oficial usa o Sharp para oferecer redimensionamento, geração de vários tamanhos de origem, recodificação e compactação, assim como algumas das tarefas que você aprendeu 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, o que significa que ela pode fazer muito mais para automatizar nossa imagem responsiva marcação. Por exemplo, quando invocado como parte de um código curto para exibir imagens, este plug-in gera uma saída HTML de acordo até as opções de configuração passadas 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 pode 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, conforme descrito acima, a marcação gerada será um elemento <picture>
contendo
elementos <source>
correspondentes, atributos type
e atributos srcset
já preenchidos com uma lista de
tamanhos de 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>
Obviamente, esse plug-in não poderá gerar um atributo sizes
viável, já que ele não pode saber o tamanho e a posição finais.
da imagem no layout renderizado, mas aceita uma como entrada ao gerar sua marcação, outro trabalho para o RespImageLint.
Frameworks
Frameworks de renderização do lado do cliente exigem um executor de tarefas ou um bundler como o Webpack para editar, codificar e compactar recursos de imagem
por conta própria. O Responsive-loader, por exemplo, também usa a biblioteca Sharp para salvar os recursos de imagem novamente. Em seguida, você pode
Em seguida, 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 em abstrações como o componente de imagem do React ou para preencher o marcação de imagem diretamente:
<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 renderização no lado do cliente é um ótimo candidato para Lazysizes e sizes="auto"
, oferecendo quase totalmente
imagens responsivas automatizadas.
Sistemas de gerenciamento de conteúdo
O WordPress foi um dos primeiros usuários da marcação de imagens nativas responsivas, e a API foi aprimorada gradualmente desde está sendo lançada no WordPress 4.4 com suporte para WebP e controle sobre o tipo MIME de saída. O WordPress Core foi projetado para usar a extensão ImageMagick para PHP. ou, na ausência disso, a biblioteca GD.
Quando uma imagem é enviada pela interface de administração do WordPress, essa imagem de origem é usada para gerar arquivos voltados ao usuário
servidor, da mesma forma que na máquina local. Por padrão, todas as imagens geradas pelo WordPress
com um atributo srcset
gerado com base nos tamanhos de imagem configurados no 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;
} );
Considerando que o WordPress entende completamente todos os cortes alternativos
e codificações geradas a partir de uma imagem enviada, pode fornecer funções auxiliares como
wp_get_attachment_image_srcset()
para
recuperam o valor completo e gerado de srcset
de um anexo de imagem;
Como você provavelmente já deve ter adivinhado, trabalhar com o atributo sizes
é um pouco mais complicado. Informações ausentes
sobre como as imagens serão usadas em um layout, o WordPress atualmente tem como padrão um valor sizes
que diz efetivamente "esta imagem
deve ocupar 100% da janela de visualização disponível até o tamanho intrínseco da maior fonte", ou seja, um padrão previsível, mas não um valor correto
um para qualquer aplicação do mundo 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 de imagem modernos mais rápidos para equipes de desenvolvimento e usuários.
E talvez o mais interessante: plug-ins como o Site Accelerator do Jetpack (antigo "Photon")
podem oferecer negociação do lado do servidor para codificações, garantindo que os usuários recebam a menor e mais eficiente codificação
navegador oferece suporte sem a necessidade do padrão de marcação <picture>
e type
. Isso é feito usando um conteúdo de imagem
rede de fornecimento: uma tecnologia que você pode usar, independentemente de seu CMS.
Tudo isso também se aplica a soluções de CMS hospedadas, como o Shopify, embora os mecanismos em si sejam um pouco diferentes: oferecer soluções semelhantes
hooks para gerar origens de imagens alternativas e atributos srcset
correspondentes
e a direção de arte usando o elemento <picture>
.