Imagens de produto no Magento 2: resize, cache e LCP

As imagens de produto costumam ser a parte mais pesada de uma página Magento, e nas páginas de produto a imagem principal muitas vezes é o elemento do Largest Contentful Paint. Acertar isso passa por várias camadas: como o Magento redimensiona e faz cache das imagens, quais tamanhos o tema pede, como os arquivos são comprimidos e como o navegador os carrega. Este artigo percorre cada camada para o Magento Open Source e o Adobe Commerce 2.4.8.

Como o Magento serve imagens de produto

Os uploads originais ficam em pub/media/catalog/product, em pastas nomeadas com os dois primeiros caracteres do nome do arquivo. O storefront nunca mostra o original. Os templates pedem a um image helper uma imagem por um ID do etc/view.xml do tema, como category_page_grid ou product_page_image_medium. O Magento redimensiona o original para as dimensões desse ID e guarda o resultado em pub/media/catalog/product/cache/, em uma pasta nomeada com um hash dos parâmetros de resize.

Se um arquivo redimensionado ainda não existe quando o navegador o pede, o web server passa o request para o pub/get.php, que o cria na hora. É por isso que a configuração de exemplo do nginx roteia arquivos ausentes em /media/ para o get.php. Funciona, mas o primeiro request de cada tamanho de imagem é lento, e uma página com muitas imagens novas pode disparar dezenas de operações de resize ao mesmo tempo.

Defina os tamanhos que você realmente usa

Cada ID de imagem no view.xml é um tamanho que o Magento pode gerar para toda imagem de produto. Temas herdados do Luma carregam muitos IDs que um tema customizado não usa mais. Outros são maiores que o espaço que ocupam na página.

Sobrescreva os tamanhos no etc/view.xml do seu tema para casar com o layout real:

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="category_page_grid" type="small_image">
                <width>360</width>
                <height>450</height>
            </image>
            <image id="product_page_image_medium" type="image">
                <width>700</width>
                <height>875</height>
            </image>
        </images>
    </media>
</view>

Baseie os tamanhos na maior renderização de cada slot, considerando telas de alta densidade. Maior que isso são bytes desperdiçados. Mantenha também a proporção dos IDs consistente com as fotos. Proporções diferentes produzem preenchimento branco em volta das imagens quando o keep_frame está ligado, que é o padrão.

Gere as imagens redimensionadas antes

Para evitar o resize durante os requests dos clientes, gere o cache com antecedência:

bin/magento catalog:images:resize

Ele percorre toda imagem de produto e todo ID de imagem dos temas em uso. Em um catálogo grande leva horas e usa muita CPU. A opção --async publica o trabalho em uma message queue, para um consumer processá-lo em segundo plano:

bin/magento catalog:images:resize --async
bin/magento queue:consumers:start media.storage.catalog.image.resize

Rode depois de mudar o view.xml, depois de uma troca de tema e depois de importações de imagens em massa. Não rode em todo deploy. As imagens redimensionadas não dependem do código, então podem ser mantidas entre releases em um diretório de media compartilhado, veja deploys sem downtime.

O admin tem um botão Flush Catalog Images Cache em System, Cache Management. Ele apaga todo o cache de imagens redimensionadas. Em um catálogo grande isso significa que toda imagem é regenerada sob demanda depois. Use só de propósito.

Compressão e tamanho de arquivo

Configurações de upload

Em Stores, Configuration, Advanced, System, Images Upload Configuration você define a qualidade JPEG que o Magento usa ao salvar imagens redimensionadas, e uma largura e altura máximas para uploads. Limitar as dimensões do upload impede que editores enviem fotos de 6000 pixels direto da câmera, que são lentas de redimensionar e desperdiçam armazenamento.

bin/magento config:show system/upload_configuration/jpeg_quality
bin/magento config:show system/upload_configuration/max_width
bin/magento config:show system/upload_configuration/max_height

Image adapter

O Magento pode redimensionar com GD ou com ImageMagick, escolhido em Advanced, Developer, Image Processing Settings. Essa seção só é visível no modo developer, mas o valor vale em produção. O ImageMagick geralmente produz melhor qualidade com o mesmo tamanho de arquivo. Teste os dois com as suas fotos.

Otimize os arquivos redimensionados

O Magento não faz otimização lossless nas imagens redimensionadas. Ferramentas como jpegoptim e optipng podem rodar sobre a pasta de cache depois da geração. Mantenha em um agendamento e não toque nos originais.

find pub/media/catalog/product/cache -name '*.jpg' -newer /var/tmp/last-optimize \
  -exec jpegoptim --strip-all --max=82 {} +
touch /var/tmp/last-optimize

Formatos modernos

Servir WebP ou AVIF pode reduzir bastante o peso das imagens. Em vez de converter dentro do Magento, o caminho mais fácil de manter é deixar uma CDN ou um serviço de imagens converter com base no header Accept do navegador. Se você fizer isso no nível do web server, garanta que o cache varie por formato, para que um navegador sem suporte nunca receba o formato.

Resize na CDN

O Magento 2.4 tem uma configuração chamada Catalog media URL format, em Stores, Configuration, General, Web, Url Options. A opção legada usa as pastas de hash descritas acima. A outra opção coloca os parâmetros de resize na query string da URL da imagem original e deixa o resize propriamente dito para um serviço de otimização de imagens na frente do Magento, por exemplo o Fastly Image Optimization no Adobe Commerce Cloud.

Só mude para o formato de parâmetros na query se algo na frente do Magento redimensiona imagens. Senão, os navegadores recebem os originais em tamanho total. As escolhas e o setup de CDN estão em CDN com Cloudflare ou Fastly.

Comportamento de carregamento e LCP

Bytes são metade da história. Como o navegador descobre e prioriza as imagens decide o quão rápida a página parece.

• Lazy load abaixo da dobra. As imagens da listagem depois das primeiras linhas devem ter loading="lazy". Confira o template de listagem do seu tema, já que temas customizados costumam perder isso.
• Nunca faça lazy load da imagem do LCP. A imagem principal do produto e a primeira linha de uma listagem de categoria devem carregar de imediato. Na página de produto, adicione fetchpriority="high" à imagem principal.
• Atributos width e height. Defina em toda imagem para o navegador reservar espaço e o layout não se deslocar quando as imagens chegam.
• A galeria do Luma. A galeria de produto do Luma é montada com JavaScript, e a imagem principal pode aparecer só depois de o widget da galeria inicializar. Renderizar a primeira imagem como HTML simples, que é o que o Hyva faz, melhora muito o LCP.
• Imagens responsivas. Um srcset com dois ou três tamanhos deixa os celulares baixarem arquivos menores. Isso exige IDs de imagem extras no view.xml e mudanças nos templates, então adicione onde o ganho for mensurável, geralmente nas listagens e na imagem principal do produto.

Meça com dados de campo do Chrome UX report ou do seu próprio real user monitoring, não só um único teste de laboratório. Mais em Core Web Vitals no Magento 2.

Manutenção

• Apagar um produto nem sempre apaga os arquivos dele. Com os anos o pub/media/catalog/product junta imagens órfãs. Compare os arquivos no disco com o catalog_product_entity_media_gallery antes de remover qualquer coisa, e mantenha um backup.
• Reimportar imagens cria duplicatas com sufixos como _1. Só envie colunas de imagem nas importações quando as imagens mudarem.
• Deixe o cache de imagens fora dos backups que você restaura com frequência. Ele pode ser regenerado.

FAQ

Por que minhas imagens de produto do Magento são lentas na primeira vez?

A versão redimensionada ainda não existe, então o get.php a cria durante o request. Rode o catalog:images:resize depois de mudanças de tema ou de imagens para as imagens estarem prontas antes de os clientes pedirem.

Onde o Magento guarda as imagens de produto redimensionadas?

Em pub/media/catalog/product/cache, em pastas nomeadas por um hash dos parâmetros de resize do view.xml. Limpar o cache de imagens do catálogo apaga essa pasta.

O Magento 2 consegue servir imagens WebP?

O jeito mais simples e confiável é converter na CDN ou no serviço de imagens conforme o suporte do navegador. Converter dentro do Magento exige uma extensão ou código customizado e cuidado com o cache.

Devo fazer lazy load de todas as imagens de produto?

Não. Faça lazy load só das imagens abaixo da dobra. A imagem principal do produto e a primeira linha visível de uma listagem devem carregar imediatamente, ou o LCP piora.

Atendo como freelancer em Magento e Adobe Commerce, incluindo performance de frontend e Core Web Vitals. Se precisar de ajuda com isso, fale comigo.