Why are two images in my Webflow portfolio-grid page displaying with different heights in Safari compared to Chrome and Firefox? The images were uploaded to the CMS as 800x600 pixels and I created responsive images using the CMD + SHIFT + I command. Other images have their responsive images included in the markup, but these two do not. Disabling custom scripts did not solve the problem.

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.