Imagens

As imagens são parte essencial de uma loja. É imprescindível ter fotos de muito boa qualidade e que estejam com excelente resolução, para garantir que a experiência do produto esteja sendo passada da melhor maneira possível.

Buscar qualidade ótima, no entanto, não deve ser sinônimo de desperdiçar banda. Não é necessário, por exemplo, carregar uma imagem de 8000px de largura, sendo que na loja ela vai ser renderizada em uma tela de 600px de largura. O que acontece, nesses casos, é que a imagem, depois de baixada, é redimensionada pelo navegador e a resolução extra é, então, perdida.

Pontos de otimização

No Store Framework, existem basicamente dois pontos em que as imagens podem ser otimizadas:

  • product-image: é a imagem de produto que é mostrada em sua página (pdp);
  • product-summary-image é a imagem de produto que é exibida em prateleiras e resultados de busca;
  • image: são imagens comuns, usadas para banners, carrosséis e infocards

Se estiver responsável por cuidar do cadastramento de imagens de uma loja, tenha certeza de comprimi-las antes. Isto pode garantir uma redução de até 85% do seu peso, sem que seja necessário também perder qualidade. Uma boa alternativa de ferramenta para facilitar este trabalho é usar o Squoosh.

Atividade

  1. Na página principal, inspecione algum dos produtos da prateleira de New arrivals clicando com o botão direito em cima e em seguida em Inspecionar. É possível observar no código que aparece, que existe um desperdício de resolução, está sendo solicitado 500px como valor padrão, sendo que apenas 281px estão sendo utilizados:

    imageimage

  2. No arquivo /store/blocks.jsonc, defina então o product-image, especificando o seu width:

    // /store/blocks.jsonc
    {
      ...
      "stack-layout#prodsum": {
        "children": [
          "product-summary-image",
          "product-summary-specification-badges"
        ]
      },
    + "product-summary-image": {
    +   "props": {
    +     "width": 281
    +   }
    + },
      ...
    }
    

    Inspecionando novamente, vemos que todas as imagens de prateleira e resultado de busca estão com o tamanho correto:

  1. Para melhorar o caching de CDN e garantir que nenhuma imagem externa está sendo carregada, no arquivo store/blocks/search.jsonc, edite o info-card existente para atualizar sua implementação e fazê-lo usando um image:

    // /store/blocks/search.jsonc
    {
      "flex-layout.row#depBanner": {
        "children": [
    -     "info-card#depbanner"
    +     "image#depbanner"
        ]
      },
    }
    

    Para saber um pouco mais sobre a definição de Content Delivery Network (CDN), veja esse artigo da Cloudflare.

  2. Defina, por último, o image#depbanner:

    {
      ...
    + "image#depbanner": {
    +    "props": {
    +      "src": "assets/electronics.png"
    +    }
    + },
    }
    

imageimage

  1. Usamos o exemplo electronics.png que já estava disponível no repositório, mas qualquer imagem pode ser adicionada se inserida dentro da pasta /assets. Experimente acessar algum portal de stock photo gratuito (como o Pexels), baixar uma imagem e comprimí-la no Squoosh. Baixe a imagem, adicione-a a pasta de /assets e depois referencie com o nome que voce adicionou:
{
  ...
  "image#depbanner": {
    "props": {
-     "src": "assets/electronics.png"
+     "src": "assets/{{sua_imagem}}"
    }
  },
}

imageimage

Exemplo de redução de 60% na compressão com Squoosh

Está com dúvidas?

Veja o gabarito para esta etapa ou participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue


Next step