> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Cloudinary Image Component The Cloudinary Image Component is available after you've [installed the cartridge](sfcc_page_designer_setup_and_configuration) and enables you to embed images from your Cloudinary product environment into pages created with Page Designer. This page explains how to [use the Cloudinary Image Component](#using_the_cloudinary_image_component), how to make all images [responsive](#responsive_design_with_image_breakpoints) and gives an overview of features available in the [Cloudinary Media Library](#commonly_used_media_library_features). ## Using the Cloudinary Image Component The Cloudinary Image Component lets you [choose the image to display](#insert_an_image_from_cloudinary) directly from your Cloudinary Media Library. You can then [add image and text overlays](#add_image_and_text_overlays), and [configure other settings](#configure_image_settings) such as the alt text for the image, a placeholder image to display while the full image is downloading, a link from the image, and transformations to apply to the image to suit your design. ### Embed a Cloudinary Image Component To embed a Cloudinary Image Component into your page, in **Page Designer**, select and drag a **Cloudinary Image** from the Components menu. ![Add a Cloudinary Image Component](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742728543/docs/SFCC/add_image_component.png "thumb:c_scale,w_300/dpr_2.0, width: 300, popup:true") ### Insert an image from Cloudinary 1. To configure the Cloudinary Image Component, click the embedded component to open the **Cloudinary Image Component** configuration panel. ![Select a Cloudinary Image Component](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742729036/docs/SFCC/cloudinary_image_component_settings.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true") 1. To insert an image from your Cloudinary product environment, click **Choose Image**. The **Media Library** opens. > **TIP**: See [Commonly used Media Library features](#commonly_used_media_library_features) for information about the Media Library. 1. Select the image you want to insert and click **Insert**. ![Insert an image from Cloudinary](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742736634/docs/SFCC/insert_image.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true") ### Add image and text overlays 1. To add an image or text overlay, select the **Advanced** button from the configuration panel. 1. In the **Image Overlay** tab, select the image you want to overlay, then choose its position, opacity and size. ![Overlay an image](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742736635/docs/SFCC/advanced_settings_image_overlay.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true") 1. In the **Text Overlay** tab, type the text you want to overlay, and choose the font, position and color. ![Overlay text on an image](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742736635/docs/SFCC/advanced_settings_text_overlay.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true") 1. Click **Apply** to save the changes. ### Configure image settings ![Configuration panel settings](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742736635/docs/SFCC/image_component_configured.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true") You can configure other settings in the Cloudinary Image Component configuration panel as follows: * **Image alt text**: The alt text you want to apply to the image. * **Placeholder**: The type of image to display while the full image is loading. * **Image Link**: A URL to link to from the image. * **Transformation override**: The transformation to apply to the image in [URL syntax](transformation_reference), e.g. `c_fill,g_auto,w_500/e_grayscale`. This overrides any [globally configured transformations](sfcc_page_designer_setup_and_configuration#configure_cloudinary_credentials_and_other_settings_in_the_business_manager) and also any image or text overlays that you've applied. ## Responsive design with image breakpoints You can [customize breakpoints](sfcc_page_designer_setup_and_configuration#configure_cloudinary_credentials_and_other_settings_in_the_business_manager) for image widths to align with your specific page layouts. While default breakpoints are `[3840, 2560, 1200, 800]` pixels, adjusting these based on your page design needs can enhance performance and user experience. Be sure to consider different screen DPRs. For example, a CSS width of 1,000px on a retina screen (DPR 2) would need a breakpoint of 2000 to display at its best. To implement, set your desired breakpoints in pixels in the **Cloudinary Image Breakpoints** setting located at **Merchant Tools > Site Preferences > Custom Site Preference Groups > Cloudinary Page Designer**. Once configured, images will automatically resize according to these specified widths, ensuring optimal display across all devices. ## Commonly used Media Library features The SFCC Page Designer Cartridge embeds a compact version of the Cloudinary Media Library within each image and video component. You can access almost all of the same functionality that's available in the full Media Library in your Cloudinary Console. The Media Library opens when you click **Choose Image** or **Choose Video** in the Cloudinary Image or Video Component panel, or by clicking the folder icon if you have already selected your image or video, as shown here: ![Accessing the Media library from the image/video component](https://res.cloudinary.com/demo/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/Salesforce/browse_image.png "thumb: w_300,dpr_2, with_code:false, with_url:false, width: 300") > **NOTE**: > > :title=Browser compatibility notes: > * **Safari**: The Safari browser may require additional steps when logging in to the Media Library. If you encounter an issue, follow the prompts to log in separately and attempt to open the Media Library again. Alternatively, use one of the other [recommended browsers](dam_digital_asset_management#supported_browsers) when working with Cloudinary. > * **Third-party cookies**: Some browsers (such as Firefox) may block third-party cookies by default, which can prevent the Media Library Widget from functioning properly. Users may need to explicitly allow third-party cookies for the Cloudinary domain (`https://cloudinary.com`) in their browser settings. ### Advanced Search The **Advanced Search** feature lets you search by filters such as tags, metadata, format, orientation, resolution, or (if supported for your account), even by image analysis characteristics, such as prominent colors, presence of faces, or image location. ![Advanced Search](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/DAM/advanced_search_new_exp "thumb: w_850,dpr_2, width:850, with_code:false, with_url:false, popup:true") > **NOTE**: > > If Visual Search isn't enabled for your account, the **Advanced** / **Visual** toggle won't be visible and you'll only see Advanced Search. Visual Search is available to Enterprise customers by request. [Learn more about Visual Search](dam_visual_search). For more details, see [Advanced Search](dam_advanced_search) in the Assets user guide. ### Collections **Collections** are ad-hoc groupings of assets. Assets can be added to and from collections without affecting or moving the asset itself, and assets can be included in multiple collections. You can create your own collections (assuming you have the required permissions) or other Cloudinary users can share collections with you. You can also share collections with external stakeholders by sending a URL to a dedicated collection webpage, which is available to those with a link during an optionally specified date range. Collections can often be a convenient way to group all assets that you might want to use on a particular project or campaign. ![Collaborate with collections](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/DAM/collections_getting_started "thumb: w_550,dpr_2, width:550, popup:true") For more details, see [Collection management](dam_folders_collections_sharing#collection_management) in the Assets user guide. ### Tagging and metadata Assets that have tags and other metadata enable all Media Library users to better organize and search for assets in the Media Library. In addition to the option to specify tags when you upload an image or video, you can also add or edit tags and other metadata after images and videos are uploaded via the embedded Media Library, and even set the same tags or metadata on multiple images and videos at once. You can view and set this data using the Asset toolbar or in the Asset management page. #### Asset toolbar You can set tags and metadata for several selected assets at once from the Media Library using the **Tag** or **Edit Structured Metadata** options in the asset toolbar. You can **Edit Contextual Metadata** via the (3-dot) options menu. The type of metadata available for editing (contextual or structured) depends on the setup for your organization's account.![Media Library asset toolbar](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/docs/integrations/ml_toolbar_inser_upload_new_search_exp.png "thumb: w_750,dpr_2, with_code:false, with_url:false, width:750, popup:true") #### Asset management page You can view or edit tags and metadata as well as view embedded image metadata for a specific asset from the Summary and Metadata tabs of the **Asset management** page. To open the **Asset management** page either double-click the asset or select **Open** from the asset's context (right-click) menu. ![Asset management](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_grey/f_auto/q_auto/v1725271953/docs/DAM/ml_widget_insert_templates.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700, popup:true")> **TIP**: From the Asset management page, you can also select a pre-defined transformation of the original asset, view or activate a variety of image analysis options in the Analysis tab, and more. For details, see [Asset management drill-down](dam_manage_individual_assets#asset_management_drill_down) in the Assets user guide. ### Media Editor The Media Editors are accessible from the [asset management drill-down](dam_manage_individual_assets#asset_management_drill_down) page. Click the **Edit** pull-down button and select **Edit Image** for images or **Trim Video** for videos.The Media Editors allow you to make basic edits to images (crop, resize, flip, rotate, sharpen) and trim videos. In the image editor shown below, you can crop and resize your image to suit your design. When you're finished, you can download the edited version without modifying the original, save it to overwrite the original asset (you can retrieve the original if you have backups enabled), or save the edited version as a new asset. ![Media library media editor](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/integrations/ml_image_editor_new_search_exp?_a=BAMAAAfm0 "thumb: w_700,dpr_2, width: 700, popup: true") ### Transformation editor The transformation editor is accessible from the [Asset management page](#asset_management_page). To open it, select **Edit Transformation** from the kebab menu next to the original asset or the transformation you want to edit further. In the transformation editor you can apply and preview various transformations. Once you are satisfied with the adjustments, click **Insert** to use this transformed asset as your media item. Unlike the Media Editor, your original asset remains unmodified. > **NOTE**: Depending on your account settings and whether your administrator has opted into the feature, you may have access to the [Advanced Editor (Transformation Builder)](dam_editing_and_transformations#advanced_editor_transformation_builder_early_access) instead. ![Media library transformation editor](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1645345773/docs/integrations/ml_transformation_editor.png "thumb: w_500,dpr_2, with_code:false, with_url:false, width:500, popup:true") For more details, see [Asset and transformation editing](dam_manage_individual_assets#transformation_and_asset_details_editor) in the Assets user guide.