PNG vs SVG vs PDF

I have a question when it comes to compatibility. I’ve just finished my first Tumult Hype site for my group Sirqus Alfon. Wohoo! (Still not optimized to iPhones or iPads but anyway)

Im using SVGs to make all my graphic elements as tiny as possible and also look good if scaled up. But when I exported the site it says that a lot of devices can’t handle SVG’s

Whats your take on the matter. Would you use PNG’s or PDF’s. Or do you think SVG’s does the job for most of the cases?

check and see if it works for you guys…

www.sirqusalfon.com

I think you should be fine.

The warning is for older browsers:

You can see support for the SVG element here: https://caniuse.com/#search=svg

Site looks great :slight_smile:

1 Like

SVG is a great format for vector graphics on the web. However, watch out for IE 11. Sometimes, in that browser, the image doesn't stay inside the expected size area.

Also...

...that site might be helpful. SVG images, in general, can be much quicker to load than a PNG – especially for illustrations.

1 Like

Notes:

  • PDFs are not a “web” format and basically require a plugin to view. This means they are extremely slow and probably won’t display how you really want. They also aren’t particularly optimized for file size.
  • SVG can sometimes have compatibility and render performance issues depending on how it is used. My recommendation is to not use them if they are animating in size. Also watch out for “fake” SVGs - apps like photoshop will sometimes export an SVG but just include bitmap data inside!
  • PNGs can of course be large, so I’d recommend always using ImageOptim on them (even after Hype’s export, since it may optimize and make a new one!)

I guess those were mostly the downsides to each :slight_smile:.

1 Like

I have used ImageOptim, but really prefer https://tinypng.com. or tinyjpg.com. You can open either one, upload your image whether jpg or png to either one and it will make the conversions. Smaller than imagOptim.
Jpgs tend to run about 10% smaller than png’s, but if you want transparency, go with png.

Conversions often run as high as 85% reduction with no noticeable visual degradation.

I do a lot of my initial work with images at 300dpi, you can do more image enhancement than you can if you start at 72dpi, then tinyjpg or tinypng does the final conversion to 72 dpi, but with a lot of the benefits of 300 dpi quality. This is assuming that the initial image is high quality enough to benefit from 300dpi. Some may disagree but I have been working with Photoshop/now Pixelmator since 1993. Your results may vary :slight_smile:

2 Likes

Thanks for some great input on the topic! I think I’ll go with SVG and compress them with:
http://www.svgminify.com

It seems to do the job quite well :ok_hand:

Best. Erik

1 Like