One of the hardest things to do when working with web graphic formats is choosing the correct one, depending on the graphic you are trying to optimize. In this video, you’ll explore each of the main web formats: JPEG, GIF, PNG, and SVG, and gain an understanding of what situation requires which format.
- View Offline
- [Voiceover] So let's talk about the right image for the right situation. First of all, what does that mean? Well, that actually means that we're going in and we're saying, what's the best format for the job? I have a particular image or graphic. What do I save it as? Unfortunately, there are no straight answers, I can't say, "for this image, you are going to use this file format." First of all, we have several that can do a similar job, so I can only really give you guidelines. But here goes. For JPEG, we're usually going to use photos.
Photos are going to become JPEGs. Something with lots of colors, gradations, things like that. Lots of gradient, lots of shading. Be careful of text in JPEG because it can look pretty bad. The edges of it can look really bad with what's called artifacting. With PNG we're gonna use for logos, page elements, backgrounds. Graphics with transparencies, so something we need to have transparent. Even photos with text in them when file size isn't as important. For GIF, we're gonna use it for animation, otherwise, honestly, I use PNG.
I'm gonna use PNG-8 in place of GIF, PNG-24 if I need something with special transparency or maybe a photo. And SVG, we're gonna use for logos, page elements, backgrounds. Typically, the way I think of it, if it started as vector, I want to keep it as vector if you can help it. We also use SVG when vector is a must, and what I mean by "think retina" is if we have a retina display or if we have mobile devices, instead of using six different sizes for an image or a graphic, we're gonna go with one as SVG.
Because it's vector, it's gonna be scalable and awesome. So my favorites are JPEG, PNG, and SVG. I don't use a lot of GIF except for animation.
These tutorials use programs like Photoshop, Illustrator, and Sketch, but the tips apply equally well to any other graphics software.