Forum Documentation Showcase Pricing Learn more

Why are JPGs and PNGs blurry in Bubble? SVG file size makes site 7s to download

#1

Why does Bubble force me to use SVGs?

My landing page SVG is 3mb, if I use a PNG/JPG it’s only 3KB but they are blurry.

Why does Bubble force me to use an SVG and make PNGs/JPGs blurry?

I’ve whipped up a quick 1 page ecommerce site but will have to swap to Big Commerce or Shopify if I can’t use PNG/JPG as it takes 7.2 seconds to download the index page due to large image sizes.

Is there some other way around this/a CDN or something for example as otherwise the site is unusable.

Note this is on a personal plan but as described by Bubble staff elsewhere, paying more does not lead to faster speed, only more capacity.

2 Likes

#2

If you have a 3Mb SVG, you’re doing SVG wrong. That’s kind of all.

How did you make your SVG… like a photo trace or something? SVG = Scalable Vector Format. It’s for shapes, not machine-learning interpretations of shapes, ya know?

1 Like

#3

I’m taking the .ai and exporting it to SVG and then compressing it in the image optin compression tool. Is this not going to create a small SVG ever? - if not anything else I can do?

Makes me think there must be something wrong with my image set up if you are getting small svgs and I’m not …

0 Likes

#4

Not sure what you mean by “force” you to use SVG, but it might be related to this…

Because they’re automatically converted to JPG, and there’s apparently no control over the output format or compression level. I’ve noted the issue here…

It’s a pain of a work-around, but you can bypass Imgix and reference the “master” file directly on Amazon S3 by inserting an IMG tag using a Bubble HTML element.

I’ve not yet reported this as a bug, but it probably should be.

0 Likes

#5

Ahhhhh thanks this is really helpful. I’ll play around with this tonight.

Thanks so much for taking the time to give me some tips.

0 Likes

#6

Please post the results if you figure this out?

I’d offer a similar suggestion as @shot (I think I follow his suggestions but my use case is a bit different…):

I’m dealing with several small svg’s, basically icons. I paste the svg’s xml inline using an html element so there is no separate load of the svg image file, it gets loaded (inline) with my app. So I presume your app download size would be 3MB larger (if that’s the actual size of the svg’s xml file) but it may load much faster since it is part of the initial “app bundle” that is downloaded when the page loads?

Not aware of any way to compress an svg, other than using a text editor to remove all unnecessary spaces/line breaks from the xml. I’m pretty sure a tool like this does the same thing. Worth a look.

0 Likes

#7

Yep I think there must be something off about my main landing page SVG, I’ll go back into the .ai and take a look.

I have tried loading the page with a State that is a list of images instead of doing a search on the parent group and then loading parent’s group image but I couldn’t see much of a difference.

I use ImageOptim to remove the SVG metadata but you’re right it hardly removes anything. I might get 2% file size improvement.

I will definitely try your inline xml method, that’s interesting haven’t tried that before. I’m keen to do some GTMetrix page load speed tests trying:

  • Transparent PNG
  • Inline Image HTML
  • Inline SVG XML
  • Page load of State vs page load of parent group search
  • Double-checking how many below-the-fold images I load on page load when I could load them when scroll hits x pixels.

I’m certain I can get a faster page load. GTMetrix was mainly complaining about image compression and unnecessary loading of JavaScript on page load.

0 Likes

#8

FWIW, I’ve learned that not all SVG converters are the same. Some simply “disguise” the original PNG format by base64-encoding the image data and wrapping it in an SVG tag, while others actually attempt a “true” conversion by finding the edges within the image and creating paths.

The real issue, in my mind, is the apparent lack of control over the file format and properties of the image which gets served by Imgix to the browser. For instance, I can create a really well-optimized PNG which gets uploaded to Bubble’s Amazon S3 servers intact; but then Imgix converts it to a JPG before serving it to the browser.

In case you don’t realize it, images used in a Bubble application are not served directly from the Amazon S3 storage. They are automatically processed by Imgix. I might be missing or misunderstanding something about the way Bubble works, but there appears to be no way to alter that behavior.

0 Likes

#9

I’m with @shot on this one. Seems there should be a way to force rendering of a PNG as PNG if desired.

As for the giant SVG file, you can “minify” them, but (like Adobe’s native .ai format) its a vector format used to describe shapes/line art. For such applications it will nearly always be radically smaller than rendering that line art as a bitmap format.

0 Likes

#10

Well, some great results.

First of all I found the original .ai contained an embedded image and therefore it was never going to work as an svg.

I’m now using the png version which is only 169kb :slight_smile:

To use a png so that they are not blurry I followed @shot’s advice by using inline html.

I made the html element the same size as the actual image.

To ensure it was responsive I added the inline style max-width:100% and I also made it responsive in the editor with a minimum width and ticked Keep element proportions when resized.

Height of image when resizing the page was different to that of the SVG so Imgix was doing something there but it looks good after a little change to overall Y positioning.

Page speed is still E 53% and 8 seconds to download on GTMetrix so guess the SVG size didn’t have much to contribute to that. Page size went from 6.22MB to 3.77MB and I think I can get this down further. Subjectively, speed doesn’t seem 8 seconds, more like 4, and I’ll keep chipping away at it.

PS. For me it didn’t matter whether the PNG had a transparent background or white, they were both blurry using the Image element.

1 Like

#11

Maybe you started there, but just to be sure: have you tried to set the output density of images to at least 2?

I had bubble apps with blurry PNG images before too, but not since I set this to 2.

0 Likes