Vector Images (Svg) Versus Raster Images (Jpg, Png)?

General General Questions
1

I have been updating myself on 'best practices' with regards to online image formats.

Love to hear if I'm understanding the current trends correctly.

Is it correct that 'best practice' for online use is to:

1. To use vector file formats (SVG) for everything which is not a photo? And not to use raster image / bitmap like PNG? So use SVG for logo's, drawings, icons, etc.. Basically anything with simple geometrical shapes.

Reason: because SVG images can scale up without loss of image quality. Can be rendered at any resolution with sharp results. With bitmaps you have to choose upfront the pixel size of the image. That size then renders sharp only at 1 resolution.

2. That photographs are best shown using a raster file / bitmap file? And the preferred type is still JPEG rather than PNG?

Reason: JPEG is preferred over PNG-24 because JPEG gives a smaller file size then PNG-24 at a given resolution. Even though JPEG is a lossy compression and PNG-24 lossless. PNG-8 has 'only' 256 colors so probably not used much for photographs.

3. Is it correct to assume that WebP image format will probably replace JPEG in the near future as most used format? Because WebP gives the same image quality as JPEG but with much smaller file size.

But... we have to wait until Safari, IE, Edge and Firefox also start supporting WebP format.

Are my above assumptions correct?

Where did I get my understanding:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

and

http://lifehacker.com/learn-when-to-use-jpeg-gif-or-png-with-this-graphic-1669336151

2

I think you're pretty correct. WebP does not give the same image quality though, but for most people it's very hard to see the difference. You can also use other optimizers like Shortpixel already - these create jpg compatible files and sizes comparable to WebP and can also optimize PNG's. (Cart Power has a nice plugin using Shortpixel for cs-cart!)

As for JPG vs PNG. Sometimes, if an image contains both text and a photo, PNG24 is better because it keeps the text razorsharp and the filesize difference is negligible. I guess it's a matter of trying.

3

Hi Flow,

Thanks for taking the time to reply. And helpful!