Images
Images
Images are an essential part of a store. It is essential to have photos of very good quality and with excellent resolution, to ensure that the product experience is being passed 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 of600px
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 taking care of 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 theproduct-image
, specifying itswidth
:// /store/blocks.jsonc { ... "stack-layout#prodsum": { "children": [ "product-summary-image", "product-summary-specification-badges" ] }, + "product-summary-image": { + "props": { + "width": 281 + } + }, ... }
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 existinginfo-card
to update your implementation and do it using animage
:// /store/blocks/search.jsonc { "flex-layout.row#depBanner": { "children": [ - "info-card#depbanner" + "image#depbanner" ] }, }
To learn more about the definition of Content Delivery Network (CDN), see this article da Cloudflare.
-
Finally, define the ʻimage#depBanner`:
{ ... + "image#depbanner": { + "props": { + "src": "assets/electronics.png" + } + }, }
- 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:
{
...
"image#depbanner": {
"props": {
- "src": "assets/electronics.png"
+ "src": "assets/{{sua_imagem}}"
}
},
}
Example of 60% reduction in compression with Squoosh
Any questions?
See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)
Help us make this content better!
VTEX IO courses are open source. If you see something wrong, you can open a pull request!
Make a contributionUpdated 8 months ago