# Advanced Image Settings for Mobile & Desktop View > With advanced control over image dimensions, users can properly optimize the appearance of their websites and funnels for both mobile and desktop views… - Source: https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/advanced-image-settings-for-mobile-desktop-view - Section: Sites / Funnels and Websites - Reading time: 3 min - Images: 5, each explained below --- With advanced control over image dimensions, users can properly optimize the appearance of their websites and funnels for both mobile and desktop views, and ensure responsive designs that improve user experience and SEO performance. --- **TABLE OF CONTENTS** - [What Are Image Dimensions Settings?](#what-are-image-dimensions-settings) - [Why Are Image Dimension Settings Important?](#why-are-image-dimension-settings-important) - [How to Use Image Dimensions Settings](#how-to-use-image-dimensions-settings) - [Frequently Asked Questions](#frequently-asked-questions) --- # **What Are Image Dimensions Settings?** Image dimension settings allow you to adjust image dimensions independently for mobile and desktop views. You can specify height and width for images in mobile layouts, ensuring that visuals look sharp and consistent across devices. It also supports multiple units for measurement, including pixels (px), relative units (rem, em), and percentages (%), for greater design flexibility. ![What Are Image Dimensions Settings? (image 1 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155036519011/original/Fw_AGG2kNN2LPHEKEgvOEE3CKdyB5lGA4w.png) **What Are Image Dimensions Settings? (image 1 of 5)** This screenshot appears in the "What Are Image Dimensions Settings?" section of "Advanced Image Settings for Mobile & Desktop View". The text alongside this image reads: It also supports multiple units for measurement, including pixels (px), relative units (rem, em), and percentages (%), for greater design flexibility. Immediately after, the guide continues: Enhanced Responsiveness: Ensure images adapt seamlessly to different screen sizes, improving user experience. Improved SEO Performance: Optimizing image sizes for mobile and desktop views can boost your CLS (Cumulative Layout Shift) and…. - What this covers: It also supports multiple units for measurement, including pixels (px), relative units (rem, em), and percentages (%), for greater design flexibility. - Next: Enhanced Responsiveness: Ensure images adapt seamlessly to different screen sizes, improving user experience. Improved SEO Performance: Optimizing image sizes for mobile and desktop views can boost your CLS (Cumulative Layout Shift) and PageSpeed scores, key factors for SEO rankings. Design Flexibility: Customize image dimensions using different units to match your specific design needs. --- # **Why Are Image Dimension Settings Important?** - **Enhanced Responsiveness:** Ensure images adapt seamlessly to different screen sizes, improving user experience. - **Improved SEO Performance:** Optimizing image sizes for mobile and desktop views can boost your CLS (Cumulative Layout Shift) and PageSpeed scores, key factors for SEO rankings. - **Design Flexibility:** Customize image dimensions using different units to match your specific design needs. ![Why Are Image Dimension Settings Important? (image 2 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155036522118/original/4gvW-DTjpKeyfelXPRYAjYoDf7m2daJyGg.gif) **Why Are Image Dimension Settings Important? (image 2 of 5)** This animation appears in the "Why Are Image Dimension Settings Important?" section of "Advanced Image Settings for Mobile & Desktop View". The text alongside this image reads: Enhanced Responsiveness: Ensure images adapt seamlessly to different screen sizes, improving user experience. Improved SEO Performance: Optimizing image sizes for mobile and desktop views can boost your CLS (Cumulative Layout Shift) and PageSpeed scores, key factors for SEO rankings. Design…. Immediately after, the guide continues: Navigate to your Funnel or Website Builder in the GHL Customer Care dashboard. Select the page containing the image you wish to edit. - What this covers: Enhanced Responsiveness: Ensure images adapt seamlessly to different screen sizes, improving user experience. Improved SEO Performance: Optimizing image sizes for mobile and desktop views can boost your CLS (Cumulative Layout Shift) and PageSpeed scores, key factors for SEO rankings. Design Flexibility: Customize image dimensions using different units to match your specific design needs. - Next: Navigate to your Funnel or Website Builder in the GHL Customer Care dashboard. Select the page containing the image you wish to edit. Full procedure: 1. Enhanced Responsiveness: Ensure images adapt seamlessly to different screen sizes, improving user experience. 2. Improved SEO Performance: Optimizing image sizes for mobile and desktop views can boost your CLS (Cumulative Layout Shift) and PageSpeed scores, key factors for SEO rankings. 3. Design Flexibility: Customize image dimensions using different units to match your specific design needs. --- # **How to Use Image Dimensions Settings** ### **Step 1:** Open the Funnel or Website Builder - Navigate to your Funnel or Website Builder in the GHL Customer Care dashboard. - Select the page containing the image you wish to edit. ![Step 1: Open the Funnel or Website Builder (image 3 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155036522024/original/_yJSt6r2LbKKBCJItTGRMW7s8xKMvW7xiA.gif) **Step 1: Open the Funnel or Website Builder (image 3 of 5)** This animation appears in the "Step 1: Open the Funnel or Website Builder" section of "Advanced Image Settings for Mobile & Desktop View". The text alongside this image reads: Navigate to your Funnel or Website Builder in the GHL Customer Care dashboard. Select the page containing the image you wish to edit. Immediately after, the guide continues: Click on the image to open its settings panel. Toggle to Mobile View or Desktop View using the preview toggle. - Where to go: Navigate to your Funnel or Website Builder in the GHL Customer Care dashboard. Select the page containing the image you wish to edit. - Next: Click on the image to open its settings panel. Toggle to Mobile View or Desktop View using the preview toggle. Full procedure: 1. Navigate to your Funnel or Website Builder in the GHL Customer Care dashboard. 2. Select the page containing the image you wish to edit. ### **Step 2:** Access Image Settings - Click on the image to open its settings panel. - Toggle to **Mobile View** or **Desktop View** using the preview toggle. ![Step 2: Access Image Settings (image 4 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155036522139/original/ZoCb_dGQ7VfmJj0i79UEL9p8oW-5Z23vqg.gif) **Step 2: Access Image Settings (image 4 of 5)** This animation appears in the "Step 2: Access Image Settings" section of "Advanced Image Settings for Mobile & Desktop View". The text alongside this image reads: Click on the image to open its settings panel. Toggle to Mobile View or Desktop View using the preview toggle. Immediately after, the guide continues: In the image settings panel, locate the Height and Width fields. Enter the desired values for the image dimensions. Select your preferred unit of measurement. - What to choose: Click on the image to open its settings panel. Toggle to Mobile View or Desktop View using the preview toggle. - Controls: Mobile View, Desktop View - Next: In the image settings panel, locate the Height and Width fields. Enter the desired values for the image dimensions. Select your preferred unit of measurement: Full procedure: 1. Click on the image to open its settings panel. 2. Toggle to Mobile View or Desktop View using the preview toggle. ### **Step 3:** Adjust Image Dimensions - In the image settings panel, locate the **Height** and **Width** fields. - Enter the desired values for the image dimensions. - Select your preferred unit of measurement: - **px** for fixed pixel dimensions. - **rem** or **em** for scalable dimensions relative to font size. - **%** for relative dimensions based on container size.   **Note:** To set different image dimensions for mobile and desktop, use the view toggle at the top of the builder to switch between views. Enter height and width values while in each specific view—changes made in mobile view apply only to mobile, and those made in desktop view apply only to desktop. This allows you to optimize image sizing separately for each device. ![Step 3: Adjust Image Dimensions (image 5 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155036522145/original/R6R2YzRqEKgMNZt-wkUrldMY9jiPb1FU4A.png) **Step 3: Adjust Image Dimensions (image 5 of 5)** This screenshot appears in the "Step 3: Adjust Image Dimensions" section of "Advanced Image Settings for Mobile & Desktop View". The text alongside this image reads: Note: To set different image dimensions for mobile and desktop, use the view toggle at the top of the builder to switch between views. Enter height and width values while in each specific view—changes made in mobile view apply only to mobile, and those made in desktop view apply only to desktop…. Immediately after, the guide continues: Save your changes and preview your design in both mobile and desktop views to ensure responsiveness. - What to fill in: Note: To set different image dimensions for mobile and desktop, use the view toggle at the top of the builder to switch between views. Enter height and width values while in each specific view—changes made in mobile view apply only to mobile, and those made in desktop view apply only to desktop. This allows you to optimize image sizing separately for each device. - Controls: Height, Width, px, rem, em, % - Next: Save your changes and preview your design in both mobile and desktop views to ensure responsiveness. Full procedure: 1. In the image settings panel, locate the Height and Width fields. 2. Enter the desired values for the image dimensions. 3. Select your preferred unit of measurement: ### **Step 4:** Save and Preview - Save your changes and preview your design in both mobile and desktop views to ensure responsiveness. --- # **Frequently Asked Questions** **Q: What happens if I don’t set specific dimensions for mobile views?** If you don’t specify mobile dimensions, the image will use the desktop dimensions by default, which may not be optimized for smaller screens. **Q: How do I choose the best unit for image dimensions?** - Use **px** for precise, fixed dimensions. - Use **rem** or **em** for scalable designs relative to text size. - Use **%** for dimensions that scale with the size of the image’s container. **Q: Can I use different units for height and width?** Yes, you can mix and match units for height and width. For example, set the height in **pixels (px)** and the width in **percentages (%)** based on your design needs. **Q: Will this feature affect my existing images?** No, existing images will retain their current dimensions unless you modify them. You can adjust the dimensions for individual images as needed. **Q: Can I test CLS and PageSpeed improvements after making changes?** Yes, tools like **Google PageSpeed Insights** and **Lighthouse** can help you measure CLS and PageSpeed scores to evaluate the impact of your optimizations. **Q: Is this feature available for all GHL Customer Care users?** Yes, this feature is available across all GHL Customer Care accounts with access to the Funnel or Website Builder. --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com