Imagens

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

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

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:
No arquivo /store/blocks.jsonc, defina então o product-image, especificando o seu width:

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

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

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:

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

Para saber um pouco mais sobre a definição de Content Delivery Network (CDN), veja esse artigo da Cloudflare.
Defina, por último, o image#depbanner:

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

{"base64":" ","img":{"width":1674,"height":1293,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":905383,"url":"https://user-images.githubusercontent.com/18701182/93905955-f52db800-fcd1-11ea-9129-065bea80145b.png"}}

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 comprimi-la no Squoosh. Baixe a imagem, adicione-a a pasta de /assets e depois referencie com o nome que voce adicionou:

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

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

Answer sheet

See answer sheet for blocks.jsonc

blocks.jsonc


_61// /store/blocks.jsonc
_61{
_61  "store.orderplaced": {
_61    "blocks": ["order-placed"]
_61  },
_61
_61  "store.account": {
_61    "blocks": ["my-account"],
_61    "parent": {
_61      "challenge": "challenge.profile"
_61    }
_61  },
_61
_61  "store.login": {
_61    "blocks": ["login-content#default"]
_61  },
_61
_61  "login-content#default": {
_61    "props": {
_61      "isInitialScreenOptionOnly": false,
_61      "defaultOption": 1,
_61      "showPasswordVerificationIntoTooltip": true
_61    }
_61  },
_61
_61  "product-summary.shelf": {
_61    "children": [
_61      "product-summary-add-to-list-button",
_61      "stack-layout#prodsum",
_61      "product-summary-name",
_61      "product-rating-inline",
_61      "product-summary-space",
_61      "product-summary-price"
_61    ]
_61  },
_61
_61  "stack-layout#prodsum": {
_61    "children": [
_61      "product-summary-image",
_61      "product-summary-specification-badges"
_61    ]
_61  },
_61  "product-summary-image": {
_61    "props": {
_61      "width": 281
_61    }
_61  },
_61
_61  "product-summary-specification-badges": {
_61    "props": {
_61      "specificationGroupName": "Group",
_61      "specificationName": "On Sale",
_61      "visibleWhen": "True",
_61      "displayValue": "SPECIFICATION_NAME"
_61    }
_61  },
_61
_61  "store.product-review-form": {
_61    "blocks": ["product-review-form"]
_61  }
_61}

See answer sheet for search.jsonc

search.jsonc


_307// /store/blocks/search.jsonc
_307{
_307  "store.search": {
_307    "blocks": ["search-result-layout#search"]
_307  },
_307
_307  "search-result-layout#search": {
_307    "blocks": ["search-result-layout.desktop", "search-not-found-layout"]
_307  },
_307  "search-result-layout.desktop": {
_307    "children": [
_307      "flex-layout.row#did-you-mean",
_307      "flex-layout.row#suggestion",
_307      "flex-layout.row#banner-one",
_307      "flex-layout.row#searchbread",
_307      "flex-layout.row#searchtitle",
_307      "flex-layout.row#result"
_307    ],
_307    "props": {
_307      "pagination": "show-more",
_307      "preventRouteChange": false,
_307      "mobileLayout": {
_307        "mode1": "small",
_307        "mode2": "normal"
_307      }
_307    }
_307  },
_307  "flex-layout.row#result": {
_307    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
_307    "props": {
_307      "preventHorizontalStretch": true,
_307      "fullWidth": true
_307    }
_307  },
_307
_307  "flex-layout.row#searchtitle": {
_307    "children": ["search-title.v2"]
_307  },
_307
_307  "flex-layout.row#did-you-mean": {
_307    "children": ["did-you-mean"]
_307  },
_307  "flex-layout.row#suggestion": {
_307    "children": ["search-suggestions"]
_307  },
_307  "flex-layout.row#banner-one": {
_307    "children": ["search-banner#one"]
_307  },
_307  "search-banner#one": {
_307    "props": {
_307      "area": "one",
_307      "blockClass": "myBanner",
_307      "horizontalAlignment": "center"
_307    }
_307  },
_307  "flex-layout.row#searchbread": {
_307    "children": ["breadcrumb.search"],
_307    "props": {
_307      "preserveLayoutOnMobile": true,
_307      "fullWidth": true
_307    }
_307  },
_307
_307  "store.search#brand": {
_307    "blocks": ["search-result-layout"],
_307    "props": {
_307      "context": {
_307        "orderByField": "OrderByReleaseDateDESC",
_307        "hideUnavailableItems": true,
_307        "maxItemsPerPage": 10
_307      }
_307    }
_307  },
_307  "store.search#department": {
_307    "blocks": ["search-result-layout#department"]
_307  },
_307
_307  "store.search#category": {
_307    "blocks": ["search-result-layout#cat"]
_307  },
_307
_307  "store.search#subcategory": {
_307    "blocks": ["search-result-layout#cat"]
_307  },
_307
_307  "search-result-layout#department": {
_307    "blocks": [
_307      "search-result-layout.desktop#dep",
_307      "search-result-layout.mobile#dep",
_307      "search-not-found-layout"
_307    ]
_307  },
_307  "search-result-layout#cat": {
_307    "blocks": [
_307      "search-result-layout.desktop#cat",
_307      "search-result-layout.mobile#cat",
_307      "search-not-found-layout"
_307    ]
_307  },
_307
_307  "image#depbanner": {
_307    "props": {
_307      "src": "assets/electronics.png"
_307    }
_307  },
_307
_307  "info-card#depbanner": {
_307    "props": {
_307      "imageUrl": "https://image.shutterstock.com/z/stock-photo-party-with-best-friends-group-of-cheerful-young-people-enjoying-home-party-with-snacks-and-drinks-492006757.jpg",
_307      "callToActionMode": "none",
_307      "isFullModeStyle": true,
_307      "headline": " ",
_307      "blockClass": "depbanner"
_307    }
_307  },
_307
_307  "search-result-layout.desktop#dep": {
_307    "children": [
_307      "flex-layout.row#depBanner",
_307      "flex-layout.row#searchbread",
_307      "flex-layout.row#searchtitle",
_307      "flex-layout.row#result"
_307    ],
_307    "props": {
_307      "pagination": "show-more",
_307      "mobileLayout": {
_307        "mode1": "small",
_307        "mode2": "normal"
_307      }
_307    }
_307  },
_307  "search-result-layout.desktop#cat": {
_307    "children": [
_307      "flex-layout.row#searchbread",
_307      "flex-layout.row#searchtitle",
_307      "flex-layout.row#result"
_307    ],
_307    "props": {
_307      "pagination": "show-more",
_307      "mobileLayout": {
_307        "mode1": "small",
_307        "mode2": "normal"
_307      }
_307    }
_307  },
_307  "flex-layout.col#filter": {
_307    "children": ["filter-navigator.v3"],
_307    "props": {
_307      "blockClass": "filterCol"
_307    }
_307  },
_307  "order-by": {
_307    "props": {
_307      "hiddenOptions": [
_307        "OrderByReleaseDateDESC",
_307        "OrderByNameASC",
_307        "OrderByNameDESC"
_307      ]
_307    }
_307  },
_307  "flex-layout.col#content": {
_307    "children": [
_307      "flex-layout.row#searchinfo",
_307      "flex-layout.row#fetchprevious",
_307      "flex-layout.row#products",
_307      "flex-layout.row#fetchmore"
_307    ],
_307    "props": {
_307      "width": "grow"
_307    }
_307  },
_307  "flex-layout.row#searchinfo": {
_307    "children": ["flex-layout.col#productCount", "flex-layout.col#orderby"]
_307  },
_307  "flex-layout.col#productCount": {
_307    "children": ["total-products.v2"],
_307    "props": {
_307      "blockClass": "productCountCol"
_307    }
_307  },
_307  "flex-layout.col#orderby": {
_307    "children": ["order-by.v2"],
_307    "props": {
_307      "blockClass": "orderByCol"
_307    }
_307  },
_307  "flex-layout.row#fetchprevious": {
_307    "props": {
_307      "marginBottom": 3
_307    },
_307    "children": ["search-fetch-previous"]
_307  },
_307  "flex-layout.row#fetchmore": {
_307    "props": {
_307      "marginTop": 3
_307    },
_307    "children": ["search-fetch-more"]
_307  },
_307  "flex-layout.row#products": {
_307    "children": ["search-content"]
_307  },
_307  "search-content": {
_307    "blocks": ["gallery", "not-found"]
_307  },
_307
_307  "flex-layout.row#depBanner": {
_307    "children": ["image#depbanner"]
_307  },
_307
_307  "search-result-layout.mobile#dep": {
_307    "children": [
_307      "flex-layout.row#depBanner",
_307      "flex-layout.row#searchinfomobile",
_307      "flex-layout.row#searchbread",
_307      "flex-layout.row#productCountMobile",
_307      "flex-layout.row#contentmobile"
_307    ],
_307    "props": {
_307      "pagination": "show-more",
_307      "mobileLayout": {
_307        "mode1": "small",
_307        "mode2": "normal"
_307      }
_307    }
_307  },
_307  "search-result-layout.mobile#cat": {
_307    "children": [
_307      "flex-layout.row#searchinfomobile",
_307      "flex-layout.row#searchbread",
_307      "flex-layout.row#productCountMobile",
_307      "flex-layout.row#contentmobile"
_307    ],
_307    "props": {
_307      "pagination": "show-more",
_307      "mobileLayout": {
_307        "mode1": "small",
_307        "mode2": "normal"
_307      }
_307    }
_307  },
_307  "flex-layout.row#contentmobile": {
_307    "children": ["search-content"],
_307    "props": {
_307      "preserveLayoutOnMobile": true
_307    }
_307  },
_307
_307  "flex-layout.row#searchinfomobile": {
_307    "children": [
_307      "flex-layout.col#orderByMobile",
_307      "flex-layout.col#filterMobile",
_307      "flex-layout.col#switcherMobile"
_307    ],
_307    "props": {
_307      "preserveLayoutOnMobile": true,
_307      "colSizing": "auto",
_307      "colJustify": "around"
_307    }
_307  },
_307
_307  "flex-layout.col#orderByMobile": {
_307    "children": ["order-by.v2"],
_307    "props": {
_307      "blockClass": "orderByMobileCol"
_307    }
_307  },
_307
_307  "flex-layout.row#productCountMobile": {
_307    "children": ["total-products.v2"],
_307    "props": {
_307      "blockClass": "productCountMobileRow"
_307    }
_307  },
_307
_307  "flex-layout.col#filterMobile": {
_307    "children": ["filter-navigator.v3"],
_307    "props": {
_307      "blockClass": "filterMobileCol"
_307    }
_307  },
_307  "flex-layout.col#switcherMobile": {
_307    "children": ["search-layout-switcher"],
_307    "props": {
_307      "blockClass": "switcherMobileCol"
_307    }
_307  },
_307  "search-not-found-layout": {
_307    "children": ["flex-layout.row#searchbread", "flex-layout.row#notfound"]
_307  },
_307
_307  "flex-layout.row#notfound": {
_307    "children": ["not-found"],
_307    "props": {
_307      "fullWidth": true
_307    }
_307  },
_307
_307  "breadcrumb": {
_307    "props": {
_307      "showOnMobile": true
_307    }
_307  },
_307
_307  "gallery": {
_307    "blocks": ["product-summary.shelf"]
_307  }
_307}