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.

The issue is likely due to Webflow not generating responsive image variants for the two specific CMS images, which can cause inconsistent rendering across browsers like Safari, especially with image aspect ratios and loading behavior.

1. Understand How Webflow Generates Responsive Images

• For CMS images, Webflow generates responsive <img> variants only when they are placed through Image elements (not background images).
• Additionally, Webflow must be able to determine the original image size and aspect ratio to generate appropriate srcset markup.
• If for some reason Webflow cannot identify image dimensions at the time of upload or rendering (e.g., due to CDN caching issues), it may skip generating responsive variants.

2. Confirm Problematic Images Are Using <img> Elements

• Verify that these two images are inserted using Image elements bound to the CMS image field, not as background images via CSS or inline styles.
• Background images do not get responsive image variants and can behave differently across browsers.

3. Check Image Markup in Safari and Chrome

• Inspect the elements using browser dev tools (right-click → Inspect).
• Look at whether the problematic images have a full srcset and sizes attribute like other images.
• If not present, this confirms Webflow didn’t generate responsive variants.

4. Re-Upload or Replace the CMS Images

• Go to your CMS Collection and delete and re-upload the two images using the same dimensions (800x600).
• This may trigger Webflow to re-process them and generate responsive versions.
• Use a different image while re-uploading (then revert back) if Webflow caching prevents reprocessing.

5. Reinsert the Image Element

• In your portfolio-grid template, delete the Image element tied to the CMS field and re-add it using the Image component, then reconnect it to the CMS field.
• This forces Webflow to reprocess the image and markup.

6. Publish the Site Again

• After any of the above changes, republish your site to both staging and custom domains to ensure Webflow processes the latest image assets.

Summary

Safari renders the two problem images differently because Webflow failed to generate responsive image variants, which affects layout and scaling in certain browsers. To fix it, re-upload or rebind the image fields using proper Image elements, ensure Webflow processes them correctly, and republish your site.