Skip to main content

Advanced Image Settings for Mobile & Desktop View

Optimize your website and funnel images with Stack's advanced image settings, ensuring they look great on both mobile and desktop. This not only enhances user experience but also boosts your SEO performance.

Table of Contents​

What Are Image Dimensions Settings?​

Image dimension settings in Stack allow you to independently adjust image sizes for mobile and desktop views. You can specify the height and width, ensuring your visuals remain sharp and consistent across all devices. Choose from a variety of measurement units, including:

  • Pixels (px)
  • Relative units (rem, em)
  • Percentages (%)

This flexibility helps you tailor your designs to meet specific needs.

Why Are Image Dimension Settings Important?​

  • Enhanced Responsiveness: Ensure your images adapt smoothly to various screen sizes, improving the overall user experience.
  • Improved SEO Performance: Optimizing image sizes can enhance your Cumulative Layout Shift (CLS) and PageSpeed scores, crucial for better SEO rankings.
  • Design Flexibility: Customize dimensions using different units to fit your unique design requirements.

How to Use Image Dimensions Settings​

  1. Open the Funnel or Website Builder

    • Navigate to your Funnel or Website Builder in the Stack dashboard.
    • Select the page containing the image you want to edit.

  2. Access Image Settings

    • Click on the image to open its settings panel.
    • Use the preview toggle to switch between Mobile View and Desktop View.

  3. Adjust Image Dimensions

    • In the settings panel, find the Height and Width fields.
    • Enter your desired values for image dimensions.
    • Select your preferred unit of measurement:
      • px for fixed pixel dimensions.
      • rem or em for scalable dimensions relative to font size.
      • % for dimensions relative to the container size.

  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?
A: If you don't specify mobile dimensions, the image will default to desktop dimensions, which might not be optimized for smaller screens.

Q: How do I choose the best unit for image dimensions?
A: Use px for precise, fixed dimensions. Choose rem or em for scalable designs relative to text size. Opt for % for dimensions that scale with the container size.

Q: Can I use different units for height and width?
A: Yes, you can mix and match units. 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?
A: No, existing images will keep their current dimensions unless you change them. You can adjust dimensions for individual images as needed.

Q: Can I test CLS and PageSpeed improvements after making changes?
A: Yes, use tools like Google PageSpeed Insights and Lighthouse to measure CLS and PageSpeed scores and evaluate your optimizations.