Vectors or PNGs?

[PenguinManiac]

What image file format is the most convenient between vectors (.svg) and standard images (.png) to design page elements for a website? I know that vector images can be cropped with no quality loss, but they're also harder to create, especially if your icons contain multiple colors or shading. I'm also not sure how well they can work with spritesheets, which I prefer because it's an easy way to cut down on loading times.
I'd expect to see bigger websites with professional designers use more .svg files, but most of them only use PNGs. Are they effectively the most convenient format?

 

[luispas]

I rather the PNG format and it's the one that I use the most, but I have to admit that the SVG of vector is really good because you can expand or reduce the images and it will always have a good quality, it's very flexible and it also allow you to extract the background, in other words, make a render.
It's hard to choose one, I just say what I normally use, and that's PNG.

 

[Marc van Leeuwen]

What image file format is the most convenient between vectors (.svg) and standard images (.png) to design page elements for a website?

I almost used png for my websites because it supported transparent background
I don't know about .svg file and not sure websites can display this type of file or not?

I'd expect to see bigger websites with professional designers use more .svg files, but most of them only use PNGs. Are they effectively the most convenient format?

I see png format works better on websites because it can be used for your logo or where you need a transparent background, but you also should consider using jpg images if you are tending to use them for your websites because jpg can be better than png because its optimized and help you decrease file size pretty much.

 

[PenguinManiac]

PenguinManiac

I only use JPEG for backgrounds, pictures and all those images for which quality loss can be easily overlooked.
SVG does support transparent background, and they can also be manipulated with CSS (you can change their color, for instance, although I'm not sure if there's anything else that can be done). However, I'm coming to the conclusion that PNGs are the way to go, the difference in quality can be quite noticeable.

Oh, and thanks for the replies!

 

[tim_cloudcone]

I usually use PNG in almost all cases except for icons. PNGs have really good quality and the file sizes can be reduced to an acceptable amount with proper compression.

But I use SVG for icons as SVGs are created in XML, which is a markup language and the elements on an SVG can be easily manipulated with CSS. You can do things like changing colors when hovering over it or even using the CSS transform property to scale, rotate or change the position of it. This is so much useful when creating small animations for icons.

I'm not sure about sprite sheet support on SVG though. But a quick Google search showed that it's possible by defining all the SVG illustrations in a single .svg file by using multiple <defs> tags.

Edit: You can't have the SVG in a separate .svg file if you want to add CSS styling to it. You need to have the SVG code embedded into the HTML.

 

[PenguinManiac]

PenguinManiac

That would explain why I always had trouble to manipulate them (I knew you could, but I never used it myself), thanks! I also didn't know they were created in XML, I guess that explains what makes them so powerful compared to other image formats.
Even if you lose those transforming features while using a spritesheet, they could still be useful for logos, icons and whatnot. Still, I don't think .svg files take up so much space to justify the creation of a spritesheet (even though it's still better to avoid sudden loading artifacts).

 

[tim_cloudcone]

tim_cloudcone

True, most svg files won't take that much space unless it's a complex illustration.

But another reason why people use spritesheets is to reduce the number of requests sent to the web server and optimize the loading speed of the page. For an example let's say you have a 100 different svg files for 100 icons on your web page. Then, each time someone visits your web page, their web browser will have to request those 100 files one by one from the web server. If you have a lot of visitors on your website or if your web server is slow, it might take some time for your web page to completely load.

So ultimately, I think the front-end developer will have to make the decision whether to use spritesheets or use individual files. If you're working on a real website and if it has a lot of image files for icons and if you want to optimize it to load faster, go with a spritesheet. If not you can just use individual files.

 

[PenguinManiac]

PenguinManiac

Yup, that's what I was talking about. The only occurrences in which I'd go with individual images over spritesheet is for larger files (e.g. headers) or with images that require complex animations/special effects through image layering. It becomes kind of compilcated to keep track of the background-position values for every image in the long run, especially if you need to move it around for animation purposes. As for smaller icons strewn over the websites, there is no reason not to go with spritesheets.