Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Vector Images (Svg) Versus Raster Images (Jpg, Png)? Rate Topic   - - - - -

 
  • Olof
  • Senior Member
  • Members
  • Join Date: 25-Jun 11
  • 209 posts

Posted 29 December 2016 - 10:39 AM #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.g...ge-optimization

 

and

 

http://lifehacker.co...phic-1669336151



 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2317 posts

Posted 29 December 2016 - 03:44 PM #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.


When life hands you lemons, bring on the Tequila baby!


 
  • Olof
  • Senior Member
  • Members
  • Join Date: 25-Jun 11
  • 209 posts

Posted 30 December 2016 - 07:52 AM #3

Hi Flow,

 

Thanks for taking the time to reply. And helpful!