Unable to turn off image responsiveness in symbols

Design help General
1

Hi all! I recently was having some issues with images appearing fine in the editor but blurry when published. After reading some forum posts, I learned about turning off responsiveness on images, which has been working great for me. However, I can’t find the option to turn off the responsiveness of images that are part of symbols.

Anyone know if there is an option for this, or how to work around it? Thanks!

Image settings for regular image:
Screen Shot 2020-09-15 at 11.50.14 AM

Image settings for image within a symbol:
Screen Shot 2020-09-15 at 11.50.27 AM

3 Likes
2

I’m also having this issue and it’s quite annoying. The only solution I could find was this:

  1. detach the instance from the symbol
  2. turn off “responsive image” in the image settings
  3. create a new symbol

the new symbol should have “responsive image” turned off by default.

This is still a bug and I hope the team will fix it soon

3 Likes
3

Oh!
I wish I know this some hours ago. I just made +500 symbols with images and now I need to re-do it. What a nightmare.
So, there is no way to edit that function inside the symbol, right?

1 Like
4

This worked for me. Thanks for sharing.

1 Like
5

I came up with a sort of “lazy load” approach to this using javascript, that removes the “srcset” and “sizes” attribute from the images in the symbol after the page is finished loading. Inside your symbol, wrap your images in a div with a class you can target and then add the following code to your “before closing body” custom code in project settings:

$(window).on('load', function(){
    $('.YOUR-WRAPPER-CLASS img').each(function(){
        $(this).removeAttr('sizes');
        $(this).removeAttr('srcset');
    });
});
1 Like