Skip to main content
C
Civil Service Cog
Participating Frequently
December 4, 2020
Answered

JPG vs SVG for Website?

  • December 4, 2020
  • 2 replies
  • 537 views

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

    This topic has been closed for replies.
    Correct answer osgood_

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

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    December 4, 2020

    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.

    C
    Civil Service CogAuthor
    Participating Frequently
    December 4, 2020

    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.

      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert
      Community Expert
      December 4, 2020

      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.

       

        O
        osgood_Correct answer
        Legend
        December 4, 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 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.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices