SVG images in websites

HubSpot is a helpful website/ service for marketing & sales. I visited to update myself on marketing, since I was updating my marketing planning efforts, and I found a link to https://website.grader.com, which is rather cool. Within the report on my website, I received the attached report suggesting that I should convert all of my images to .svg. I nearly always use .png for compote size compared to .jpeg.

I converted several of my images to svg using online service to convert from png to svg and then placed them in my website and none of the svg images worked, i.e., when I looked at my site online they were not there.

Any thoughts about the quality of this advice, i,.e., is it really necessary, and if so, what am I doing wrong. My website link is below, but I took all of the svg images off, so as maintain my quality. Actually, I tested them in a copy and then just deleted the copy.

https://DeltaChase.com

Thanks to any and all, who respond.

Neil

First, my guess is you are misreading the report. I don’t read this as suggesting SVGs should be used all the time. If that’s what they really mean then it seems stunningly crazy. I think what they really mean is use “responsive images” or “SVGs”

So let’s look at what most likely triggered this message:

  1. On one or more pages the total “weight” of your images was very high. I would investigate what’s the current size of your images individually, and what’s the collective size on image heavy pages. As a very loose guideline … if the total weight is 1 Mb or larger then it’s likely too large and especially difficult for phone users (who are paying for the data to download your large images). On an individual level I’d check to see if you have images 300k or larger.
  2. Optimize images. There are many ways to do this, but for simplicity I’m going to suggest the web service called Squoosh where you can both optimize and resize images: https://squoosh.app
  3. After optimizing images, upload them to your server (either through direct upload or if they are added as RW resources).
  4. Send the website pages through your reporting website again.

BTW, these are just general suggestions. I did a partial check of your DeltaChase home page and I wasn’t finding any overly large images … but I only checked about 5. Maybe there’s a huge image here and there. The images all seemed responsive so that doesn’t seem to be a problem. Is the Home page the specific page with a heavy load? If so, there’s a chance this report is just way off base. Or it was referring to other pages on your website.

1 Like

Hey Mitch. Excellent guidance. All doable by me. I will check it out using this info.

Thanks.