Images

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.

Images are an essential part of a store. It is essential to have photos of very good quality and excellent resolution to ensure that the product experience is being passed on in the best possible way.

Seeking optimum quality, however, should not be synonymous with wasting bandwidth. It is not necessary, for example, to upload an image of 8000px in width, in the store it will be rendered on a screen of 600px in width. What happens in these cases is that the image, once downloaded, is resized by the browser, and the extra resolution is then lost.

Optimization points

In the Store Framework, there are basically two points at which images can be optimized:

product-image: it is the product image that is shown on your page (PDP);
product-summary-image is the product image that is displayed on shelves and search results;
image: are common images, used for banners, carousels, and infocards

If you are responsible for registering images from a store, be sure to compress them first. This can guarantee a reduction of up to 85% of your weight, without the need to lose quality. A good alternative tool to facilitate this work is to use Squoosh.

Activity

On the main page, inspect any of the products on the New arrivals shelf by right-clicking on the top and then clicking on 'Inspect'. It is possible to observe in the code that appears that there is a waste of resolution, 500px is being requested as the default value, with only281px being used:
In the /store/blocks.jsonc file, then define the product-image, specifying its 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}

Inspecting again, we see that all the shelf images and search results are the correct size:
To improve CDN caching and ensure that no external images are being loaded, in the store/blocks/search.jsonc file, edit the existing info-card to update your implementation and do it using an image:

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

To learn more about the definition of Content Delivery Network (CDN), see this article da Cloudflare.
Finally, define the ʻimage#depBanner`:

_10{ _10 ... _10+ "image#depbanner": { _10+ "props": { _10+ "src": "assets/electronics.png" _10+ } _10+ }, _10}
We use the electronics.png example that was already available in the repository, but any image can be added if inserted into the /assets folder. Try accessing a free stock photo portal (such as Pexels), downloading an image, and compressing it on Squoosh. Download the image, add it to the /assets folder, and then reference it with the name you added:

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

Example of 60% reduction in compression with 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}