JPG vs SVG for Website?

Explorer ,
Dec 04, 2020 Dec 04, 2020

Copy link to clipboard

Copied

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.

 

B

Views

121

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Dec 04, 2020 Dec 04, 2020
'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 als...

Likes

Translate

Translate
LEGEND ,
Dec 04, 2020 Dec 04, 2020

Copy link to clipboard

Copied

'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.

 

Unless you're existing jpgs are poor quality then saving less than 200k for 10hrs work seems pointless to me. A lot of servers are http/2 enabled now which will deliver content faster. Consider this, many, many modern websites depend on frameworks and extensive javascript plugins, full of bloat. If you're worried about less than 200k then you will surely be worried about the excessive weight all these frameworks/plugins carry BUT that doesnt appear to be the case in todays modern development. Is that the correct attitude, NO, but denial is a great thing when it suits and it seems it suits most developers today.

 

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 04, 2020 Dec 04, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 04, 2020 Dec 04, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 04, 2020 Dec 04, 2020

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 04, 2020 Dec 04, 2020

Copy link to clipboard

Copied

LATEST

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.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines