diff --git a/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-best-practices-for-rendering-images.md b/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-best-practices-for-rendering-images.md index d3c4a28ac4..a00380ae52 100644 --- a/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-best-practices-for-rendering-images.md +++ b/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-best-practices-for-rendering-images.md @@ -6,35 +6,41 @@ createdAt: "2020-06-03T16:02:44.306Z" updatedAt: "2022-12-13T20:17:44.629Z" --- -While building your brand's visual identity, you'll often use images in your Store Theme. Images, however, can significantly impact a website's performance. In this sense, Store Framework provides different image blocks for different use cases. Each block defines how images will be cropped, rendered, and displayed to end-users. Hence, to implement the right solution for your use case, please consider the practices presented in the following. +Images play a vital role in building your brand’s visual identity, but they can also impact your store's performance. To balance aesthetics and speed, Store Framework provides several image blocks, each designed for specific use cases. -*** +This guide outlines best practices for handling images in your [Store Theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) to maintain both performance and consistency. -## Uploading images to your theme's code +## Best practices for uploading images -- Upload images to your theme's code using the [**Assets Builder**](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-assets-builder) or the [Site Editor](https://help.vtex.com/en/tutorial/site-editor-overview). The Assets Builder and the Site Editor ensure that the images are properly cropped, providing end-users a consistent and uniform experience. -- Don't declare the URLs of the desired images directly in the `blocks.json` file. Otherwise, the images may end up deformed. -- Don't use images with large dimensions. Otherwise, the Site Editor may not be able to crop them. +Follow these guidelines to upload images efficiently and avoid performance issues: -## Choosing the right image block +- Use the [Assets Builder](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-assets-builder) or [Site Editor](https://help.vtex.com/en/tutorial/site-editor-overview) to upload images. These tools handle cropping automatically, ensuring a consistent user experience. +- Avoid hardcoding image URLs in the `blocks.json` file. Doing so may cause image deformation. +- Do not use images with large dimensions. Images with large dimensions might not crop correctly in the Site Editor, leading to display issues. -Store Framework has different solutions for rendering images, each one of them designed for a specific use case. +## List of image blocks -In the following, we outlined the main functionalities of each image block so you can identify which solution is the best fit for what you're trying to achieve and avoid performance drops in your store website. +The Store Framework offers several image blocks, each suited to different use cases. Selecting the appropriate block will help maintain performance and visual consistency: -- [**Logo**](https://developers.vtex.com/docs/guides/vtex-store-components-logo) - Renders your brand's logo. It should preferably be used in your store's Header and Footer. -- [**Infocard**](https://developers.vtex.com/docs/guides/vtex-store-components-infocard) - Renders images in the UI with links and call-to-action buttons that guide the user's flow. Info cards are recommended when you want to render an image directly linked to a call-to-action button. -- [**Rich Text**](https://developers.vtex.com/docs/guides/vtex-rich-text) - Renders markdown texts. Rich texts allow plenty of customization, such as passing an image URL to be rendered. Rich texts are recommended for building text communications that may need to have an image linked to them. -- [**Product Summary Image**](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryimage) - Renders the product image attached to a product summary information (e.g., name, price). Product summary images must be displayed within other store components, such as the Shelf. -- [**Image**](https://developers.vtex.com/docs/guides/vtex-store-components-image) - Renders an image without links, buttons, markdown texts, or product summary information attached. It is exclusively responsible for rendering an image of your choosing in your store's theme. +- [**Logo:**](https://developers.vtex.com/docs/apps/vtex.store-components/logo) Use this block to render your brand’s logo, typically in the header or footer. +- [**Infocard:**](https://developers.vtex.com/docs/apps/vtex.store-components/infocard) Ideal for displaying images with links and call-to-action buttons. Use this block when you want to guide users with image-based CTAs. +- [**Rich Text:**](https://developers.vtex.com/docs/apps/vtex.rich-text) A versatile block for rendering markdown text, which can also include images. Use this when text and images are combined. +- [**Product Summary Image:**](https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryimage) Renders the product image attached to a product summary information (e.g., name, price). It is often used within other store components like the Shelf. +- [**Image:**](https://developers.vtex.com/docs/apps/vtex.store-components/image) A simple block for rendering standalone images without additional elements like links or text. Use this block when you just need to display an image. -### Product Summary Image block +### Configuring the Product Summary Image Block -When using the Product Summary component, define at least one of the following props: `aspectRatio`, `width`, `height`, `maxHeight`. These props define image dimensions and enable you to let Product Summary images be of identical size when rendered, even if the images submitted in the admin's Catalog have a different size. +When using the Product Summary block, configure at least one of the following props: +- `aspectRatio` +- `width` +- `height` +- `maxHeight` + +These props define image dimensions and enable you to let product summary images be of identical size when rendered, even if the images submitted in the Admin's Catalog are of a different size. These props define the image's dimensions and allow product summary images to be presented with the same size, regardless of the dimensions of the images uploaded via the admin's Catalog. -> ℹ️ You don't have to specify these four properties in your Product Summary Image block at the same time. Each one has a distinct purpose and can be used independently. For more information on implementing these props, please refer to the [**Product Summary Image**](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryimage) documentation. +> ℹ️ You do not need to define all four properties in your Product Summary Image block at the same time. Each property has a unique purpose and can be configured based on your specific needs. For more information, refer to the [**Product Summary Image**](https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryimage) documentation. For example, by declaring these props, your store's Shelf will have image consistency across all products being displayed, differently from the Shelf example below: