Image not showing

Hi there,

I can’t actually load the site to have a look… it just keeps spinning and making my computer fans go full speed.

Any chance you could provide another link?

The code looks like it should work, so I have a feeling it’s the SVG file itself, but I would have to see the file or the site to be sure. Maybe you could provide the SVG file itself?

Strange

Can you load it now?

https://valuetrendsblog.com/2020/01/how-to-use-the-baltic-dry-index-to-make-money-in-stocks/

Or now. It is the article about the Baltic Dry Index:

https://valuetrendsblog.com/

I can indeed. Thanks for that.

So it looks like they’re displayed properly and you’ve rendered them inline…
https://www.dropbox.com/s/z7zisxjrikev8u3/Screenshot%202020-01-29%2010.25.40.png?dl=0

Is that the ones?

No man ??

Those are not SGV. The only SGV I have is in the article on the Baltic Dry Index. In the middle. It is not showing. Appreciate you are taking the time

Oh yep, I see it.

I dare say it’s because you’re using a 20MB file… You’ll need to reduce that size. I don’t think the actual file is even loading. That explains why my computer is wigging out when trying to load the file/page.

I opened it in affinity designer and even that’s resource intensive just to open and edit the file.

I would do some work on the SVG to bring its size right down, I think your issues will be solved then.

I’m not sure you need SVG for that image… It might be best to export as a jpg to reduce the size. It has a lot of elements.

If you flatten all the elements out in the SVG, that should also bring the file size down, but still allow you to use the SVG so it never blurs.

I’m not sure what the exact goal is, but if I was you, I would try exporting all the options and see which is smallest and best looking for the purpose.

Yeah ok. Well I want to change my images to SVGs so that my file sizes are reduced and my site loads faster.

But maybe that would not be good for the overall design for some images?

Just in some cases?

Ok, I see. So if your main purpose is file size, that would absolutely be better as a flattened JPG. When exporting the JPG, you can pick quality and due to the nature of that design, you’d be able to safely drop down to 70% or even less without noticing it. Making sure the actual pixel size is the exact size it will display in the site will also help with load times.

No matter the format, you should always keep your images as light as possible. 20MB is absolutely massive, I don’t even see photographers going that large for their portfolios. I personally try to keep images within 200KB, but there’s always times that you need higher quality, but I never ever exceed 1MB for an image… and that is in rare cases and would not have any other images on the page to load as well.

To address how my plugin can help, you can use SVG format to save your vector artwork – illustrations, which more often than not will reduce the file size compared to a PNG or JPG. The size of an SVG all depends on how much information is in it. In your case, there is a ton of paths which is why it’s massive. I’ve been trying to open the file to flatten all the paths out and see if we can reduce the size – which it will… but I keep maxing out my CPU trying to even select elements, it’s just too big for my current setup unfortunately.

I hope this helps.

I’ll mark this as resolved for now since it’s clear that the issue is just your image size. But feel free to keep posting, I’m happy to help.

Haha ok interesting. Did not know it was that big since I am quite new to this.

Hmm how do I convert to a flattened JPG and how is that different from a normal jpg?

What I have done so far is to reduce the scale of the images. But that always seem to have bad effects on the resolution and visuals of the picture. So if there is a way to reduce this by losing very little quality I am all ears ??

It’s because you have so many paths in the file. You’ll need to open it in illustrator and merge all the hundreds of thousand of paths to reduce the file size. Exporting (save for web) will allow you to save as a JPG which by default is a flattened raster (pixels) image rather than a vector.

Your image in particular doesn’t need to be a vector due to the nature of the design.

I would simply open it in illustrator, save for web and experiment with the sizes and quality until you get a small enough file size.

I’m curious how you made this Svg actually…
Did you live trace the image inustrator or something?
The reason I ask is because it’s just so massive.

I don’t know man. It took a life of its own ??

There is a program called Gravit. Illustrator is a bit expensive I think. I should be able to create a “save for web” in Gravit too I guess ?

Oh cool, I haven’t heard of gravit. It looks like it does export for web ??
Thanks