Two specific images in your Webflow portfolio-grid page display different heights in Safari because Safari likely isn’t receiving their responsive image variants, causing inconsistent rendering.
1. Understand How Webflow Handles Responsive Images
- Webflow generates responsive image variants (
srcset
) automatically for images added through the Image element, Rich Text, or Lightbox components. - It does not generate responsive images (
<img srcset>
) for background images or images inserted via custom code. - CMD + SHIFT + I only regenerates responsive image variants in the Designer for supported image elements.
2. Identify Why srcset
Is Missing from the Two Images
- Since the two problematic images lack responsive variants but others in the same grid have them, they likely:
- Were placed using a different method (e.g., background image via CSS or custom embed).
- Were added dynamically via CMS but not through a standard Image element.
- Webflow does not generate responsive variants if the image is inserted using custom code or set as a background image via a CMS collection list setting.
3. Check How the Images Are Implemented
- Inspect the Portfolio Grid in the Webflow Designer.
- Make sure these two images are added via a regular Image element, not as:
- Background images on divs.
- CMS-bound background-image style.
- Custom HTML Embed.
- Check if the CMS field linked to these images is a proper Image field, not a File or URL field.
4. Safari Renders Without Resized Variants
- Without
srcset
, Safari may render the original 800x600 image at full size or differently scale it compared to Chrome/Firefox. - This can lead to visual misalignment in height/width, especially in a responsive layout like a grid.
5. Fix the Problem
- Use a regular Image element from the Add panel inside your CMS Collection List.
- Bind the Image element to the CMS image field for those two portfolio pieces.
- Regenerate responsive images using CMD + SHIFT + I after fixing the element type.
- Re-publish the site and test again in Safari.
Summary
The images display with different heights in Safari because they're missing responsive image variants (srcset
)—likely due to being used as background images or inserted via an unsupported method. Replace them with CMS-linked Image elements, and Webflow will generate the necessary responsive variants.