Hi, all. I'm being asked to redo a series of JPGs I created for our website and convert them to SVGs. The reason given is that the pages will load faster, which they obviously would. There's no more than four of these 800x400px JPGs on one page. The JPGs are about 125K each and the SVG version I did as a test is about 75K.
My question is, will the load times of these pages improve to a degree that would justify the 8-10 hours it'll take to convert these JPGs to SVGs? I ask because it's going to take me quite a while to redraw all of these graphics in Illustrator and I want to be confident there's a payoff for this investment of time. If we're looking at an improvement of less than a second on a 56K modem (our lowest common denominator as a government agency), it would seem not worth it. Really, I'd want to be reasonably confident that we'll shave at least 3-5 seconds before committing to the work. I think I could also optimize these JPGs to make them smaller, but I'm being pressed for SVGs. Any opinions from the wise and powerful Adobe community?
Thanks in advance for any help. Always appreciated.
'My question is, will the load times of these pages improve to a degree that would justify the 8-10 hours it'll take to convert these JPGs to SVGs?'
No. You're saving 200k distributed over the 4 images. If you can reduce the weight of the orginal jpgs down further your saving even less.
SVG format provides exeptional clarity as it can be reduced and enlarged without lose of any resolution. They are definitely the way to go now if you are starting from scratch and producing graphics etc. They also have the adavantage that they can be manipulated with css, easily change their color etc, without having to go back to the source file to do so.
Plus dont forget SVG format is for graphics only NOT photographic content.
Personally I would try and reduce the jgs down without losing further definition and leave it at that.
Edited: 56k Modem that's like making sure your wesbite is compatible with IE5.
I think you're a little confused as to how fast a 56k modem is.
On average, a 56kbps modem (kilobits per second), will only download at about 3-4 kb (kilobytes) per second. You might see 6kb per second under perfect conditions, but 3-4 is the real world speed from those relics.
If you can shave 200 kb off of images on any given page, that's not 3-5 seconds on a 56k modem, it's around a minute of waiting removed, per page.
I don't design anything for 56k anymore, but if I had to, I'd be very happy with 200kb per page reduction.
Thanks, guys. I appreciate the advice. After playing with the export settings, I've managed to get the JPGs down to about 25K each awith neglible deterioration. Optimizing the SVGs has got them down to about 65K. I assume with better optimization software I might be able to squish them a little more, but I'm hardly an expert at optiomizing vector graphics for the web. Is it possible that a JPG of a detailed graphic could be smaller than an SVG version of same? Or do I just suck at optimizing the SVG? I recerated it in Illustrator by hand (not image trace), so it's pretty clean.
You can use online SVG compression tools to make them significantly smaller in many cases. Adobe programs aren't known for their lean and clean code production.
It all depends on what you have though. Sometimes image files just don't need to be very large and converting them to pages of code (what an SVG is) doesn't make much of a difference.
Have a look at this answer: https://stackoverflow.com/questions/9855545/http-requests-vs-file-size and as a follow up: https://developers.google.com/web/fundamentals/performance/http2
As osgood_ has hinted, serving the site using HTTP/2 is far more beneficial.