From 871b894c08282024a0a82efa6793b56bce3ca5a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Celi?= <112641072+barbara-celi@users.noreply.github.com> Date: Fri, 22 Nov 2024 12:48:56 -0300 Subject: [PATCH 1/2] Update and rename vtex-io-documentation-best-practices-for-rendering-images.md to vtex-io-documentation-optimizing-image-rendering.md --- ...ion-best-practices-for-rendering-images.md | 47 ------------------ ...ocumentation-optimizing-image-rendering.md | 48 +++++++++++++++++++ 2 files changed, 48 insertions(+), 47 deletions(-) delete mode 100644 docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-best-practices-for-rendering-images.md create mode 100644 docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-optimizing-image-rendering.md 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 deleted file mode 100644 index c787eeb347..0000000000 --- a/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-best-practices-for-rendering-images.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: "Rendering images" -slug: "vtex-io-documentation-best-practices-for-rendering-images" -hidden: true -createdAt: "2020-06-03T16:02:44.306Z" -updatedAt: "2022-12-13T20:17:44.629Z" ---- - -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. - -## Best practices for uploading images - -Follow these guidelines to upload images efficiently and avoid performance issues: - -- 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. - -## List of image blocks - -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/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. - -### Configuring the Product Summary Image Block - -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 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: - -![beat-practices-images](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-best-practices-for-rendering-images-0.png) diff --git a/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-optimizing-image-rendering.md b/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-optimizing-image-rendering.md new file mode 100644 index 0000000000..3a456ff363 --- /dev/null +++ b/docs/guides/vtex-io/Perks/best-practices/vtex-io-documentation-optimizing-image-rendering.md @@ -0,0 +1,48 @@ +--- +title: "Optimizing image rendering" +slug: "vtex-io-documentation-optimizing-image-rendering" +hidden: false +createdAt: "2020-06-03T16:02:44.306Z" +updatedAt: "2024-11-22T15:43:44.058Z" +excerpt: "Learn how to optimize image rendering for faster load times." +--- + +This guide outlines best practices for using images in your [Store Theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) to maintain consistency and performance. + +Images are crucial for creating a strong brand identity, but if not managed properly, they may slow down your store. To address this, Store Framework offers several image blocks tailored for different purposes, minimizing performance loss and allowing you to display images effectively. Additionally, there are best practices to follow when uploading images in your Store Theme. + +This guide presents the following sections: + +- [List of image blocks](#list-of-image-blocks): Presents the VTEX native components available in Store Framework that you can use to optimize image rendering on your store. +- [Best practices for uploading images](#best-practices-for-uploading-images): Describes best practices to maintain performance and visual consistency when updating images. + +## List of image blocks + +Store Framework offers several image blocks for different use cases. Selecting the right block helps to maintain performance and visual consistency. + +- [**Logo**](https://developers.vtex.com/docs/apps/vtex.store-components/logo): Renders your brand logo, typically in the header or footer. +- [**Infocard**](https://developers.vtex.com/docs/apps/vtex.store-components/infocard): Renders images with links and call-to-action (CTA) buttons when you want to guide users with image-based CTAs. +- [**Rich Text**](https://developers.vtex.com/docs/apps/vtex.rich-text): Renders markdown text when you need to combine text and images in a single block. +- [**Product Summary Image**](https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryimage): Renders the product image attached to the product summary information, such as the product name and price. It's commonly used within other store components, like the [Shelf](https://developers.vtex.com/docs/apps/vtex.shelf), to display products with their key details. + + When using the Product Summary block, configure at least one of the following props: + - `aspectRatio` + - `width` + - `height` + - `maxHeight` + + These props define image dimensions, ensuring that product summary images are displayed at a consistent size, even if the images uploaded in the catalog have different dimensions. By declaring these props, your store shelf will replicate image consistency across all products being displayed, differently from the shelf example below: + + ![beat-practices-images](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-best-practices-for-rendering-images-0.png) + + > ℹ️ You don't 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 needs. + +- [**Image**](https://developers.vtex.com/docs/apps/vtex.store-components/image): Renders standalone images without additional elements such as links or text, for when you just need to display an image. + +## Best practices for uploading images + +Follow these guidelines to upload images efficiently and avoid performance issues: + +- To upload images, use the [Assets Builder](https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder) or [Site Editor](https://developers.vtex.com/docs/guides/store-framework-working-with-site-editor). These tools handle cropping automatically, ensuring a consistent user experience across your store. +- Avoid hardcoding image URLs in the `blocks.json` file, as this can lead to image deformation. +- Don't use images with large dimensions, as they may not crop correctly in Site Editor, leading to display issues. From 06212875a9240fd053f0fefea917d0873dc24d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Celi?= <112641072+barbara-celi@users.noreply.github.com> Date: Fri, 22 Nov 2024 12:51:28 -0300 Subject: [PATCH 2/2] Removing duplicate file --- ...ocumentation-optimizing-image-rendering.md | 48 ------------------- 1 file changed, 48 deletions(-) delete mode 100644 docs/guides/vtex-io/Storefront-Guides/boosting-performance/vtex-io-documentation-optimizing-image-rendering.md diff --git a/docs/guides/vtex-io/Storefront-Guides/boosting-performance/vtex-io-documentation-optimizing-image-rendering.md b/docs/guides/vtex-io/Storefront-Guides/boosting-performance/vtex-io-documentation-optimizing-image-rendering.md deleted file mode 100644 index a3ec672751..0000000000 --- a/docs/guides/vtex-io/Storefront-Guides/boosting-performance/vtex-io-documentation-optimizing-image-rendering.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "Optimizing image rendering" -slug: "vtex-io-documentation-optimizing-image-rendering" -hidden: false -createdAt: "2020-06-03T16:02:44.306Z" -updatedAt: "2024-11-08T13:25:53.180Z" -excerpt: "Learn how to optimize image rendering for faster load times." ---- - -This guide outlines best practices for using images in your [Store Theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) to maintain consistency and performance. - -Images are crucial for creating a strong brand identity, but if not managed properly, they may slow down your store. To address this, Store Framework offers several image blocks tailored for different purposes, minimizing performance loss and allowing you to display images effectively. Additionally, there are best practices to follow when uploading images in your Store Theme. - -This guide presents the following sections: - -- [List of image blocks](#list-of-image-blocks): Presents the VTEX native components available in Store Framework that you can use to optimize image rendering on your store. -- [Best practices for uploading images](#best-practices-for-uploading-images): Describes best practices to maintain performance and visual consistency when updating images. - -## List of image blocks - -Store Framework offers several image blocks for different use cases. Selecting the right block helps to maintain performance and visual consistency. - -- [**Logo**](https://developers.vtex.com/docs/apps/vtex.store-components/logo): Renders your brand logo, typically in the header or footer. -- [**Infocard**](https://developers.vtex.com/docs/apps/vtex.store-components/infocard): Renders images with links and call-to-action (CTA) buttons when you want to guide users with image-based CTAs. -- [**Rich Text**](https://developers.vtex.com/docs/apps/vtex.rich-text): Renders markdown text when you need to combine text and images in a single block. -- [**Product Summary Image**](https://developers.vtex.com/docs/apps/vtex.product-summary/productsummaryimage): Renders the product image attached to the product summary information, such as the product name and price. It's commonly used within other store components, like the [Shelf](https://developers.vtex.com/docs/apps/vtex.shelf), to display products with their key details. - - When using the Product Summary block, configure at least one of the following props: - - `aspectRatio` - - `width` - - `height` - - `maxHeight` - - These props define image dimensions, ensuring that product summary images are displayed at a consistent size, even if the images uploaded in the catalog have different dimensions. By declaring these props, your store shelf will replicate image consistency across all products being displayed, differently from the shelf example below: - - ![beat-practices-images](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-best-practices-for-rendering-images-0.png) - - > ℹ️ You don't 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 needs. - -- [**Image**](https://developers.vtex.com/docs/apps/vtex.store-components/image): Renders standalone images without additional elements such as links or text, for when you just need to display an image. - -## Best practices for uploading images - -Follow these guidelines to upload images efficiently and avoid performance issues: - -- To upload images, use the [Assets Builder](https://developers.vtex.com/docs/guides/vtex-io-documentation-assets-builder) or [Site Editor](https://developers.vtex.com/docs/guides/store-framework-working-with-site-editor). These tools handle cropping automatically, ensuring a consistent user experience across your store. -- Avoid hardcoding image URLs in the `blocks.json` file, as this can lead to image deformation. -- Don't use images with large dimensions, as they may not crop correctly in Site Editor, leading to display issues.