How to Set Mobile and Desktop Image Dimensions in Sparkforge
Use the view toggle in the Funnel or Website Builder to set independent image dimensions for mobile and desktop. Mix px, rem, em, or % to keep CLS low and PageSpeed high.
Set image height and width independently for mobile and desktop views inside the Sparkforge Funnel or Website Builder. Independent sizing keeps images sharp on every device and improves Core Web Vitals like CLS.
Why Independent Image Dimensions Matter
- Responsive layouts: Images scale correctly on phones, tablets, and desktops.
- Better SEO scores: Right-sized images cut Cumulative Layout Shift and improve PageSpeed.
- Design flexibility: Mix px, rem, em, and % across height and width to fit any layout.
How to Set Image Dimensions
Step 1: Open the builder
- Go to your Funnel or Website Builder in the Sparkforge dashboard.
- Open the page that contains the image you want to edit.
Step 2: Open image settings
- Click the image to expose its settings panel.
- Use the preview toggle at the top to switch between Mobile View and Desktop View.
Step 3: Adjust height and width
- In the settings panel, find the Height and Width fields.
- Enter your values.
- Pick a unit:
- px for fixed pixels.
- rem or em for sizes scaled to font size.
- % for sizes relative to the container.
Values entered in Mobile View apply only to mobile. Values entered in Desktop View apply only to desktop. Switch the view toggle before each edit.
Step 4: Save and preview
Save the page, then preview both views to confirm the layout holds up.
Frequently Asked Questions
See FAQ block below for unit choices, mixing units, and PageSpeed testing tips.
Frequently Asked Questions
What happens if I do not set mobile dimensions?
The image falls back to the desktop dimensions, which may not look right on smaller screens.
Which unit should I use?
Use px for fixed precision, rem or em for sizes that scale with text, and % for sizes that scale with the container.
Can I mix units between height and width?
Yes. For example, set height in px and width in % to lock height while letting width breathe.
Will this change my existing images?
No. Existing images keep their dimensions until you edit them.
How do I test PageSpeed and CLS after changes?
Run the page through Google PageSpeed Insights or Lighthouse to compare scores before and after your edits.
Was this article helpful?
Thanks for the feedback.