Acronym Soup Episode 06: JPEG, PNG, WebP, and SVG

Jacob: Hey, Jeff, welcome to season two, episode two of the Human Friend Digital podcast.

Jeff: And it’s another Acronym Soup, and today we’re talking about image file formats, which I know literally nothing about, so this will be educational for me.

Jacob: Yeah. So one thing that people don’t think about with websites is how much images affect page load speed. Basically, the larger the file, the slower the speed; it’s more resources that have to get downloaded. So how do you overcome that? How do you do that without losing image quality, which is the biggest problem? Most people would love to have the biggest file they can put up there so it looks absolutely crisp. Photographers really want to give you the biggest files to work with. Sometimes you have to figure out how to format them for your website, not only for when the page loads but also for your server space because a lot of hosting platforms have a limited amount of server space. If you don’t optimize your images, you’ll be eating up all that allotment.

Jeff: Sure. And then that’ll cost you more, I’m guessing?

Jacob: Yes. So, read off the file formats we’re going to cover today.

Jeff: There’s a bunch of image formats. We’re covering four that Jacob thinks are the most useful for website development, I guess. So we have JPEG, PNG, WebP, and SVG.

Jacob: Those are the four.

Jeff: Can you break down what those even stand for? Do you know?

Jacob: I know a little bit of them. I did have to look them up for the call, and I had to do a little extra research for JPEG because I didn’t remember what that one was. I knew SVG; that was the one I definitely knew—Scalable Vector Graphics, because that’s one of my favorites. But the rest of them… JPEG stands for Joint Photographic Experts Group, which is an organization that made that format in 1992, so that goes back a while. PNG, Portable Network Graphic. WebP is a newer one, much newer, made in the last five years, I think, and so helpful for website speed. And then SVG, as I said, Scalable Vector Graphics. That’s a vector format. Each of them has different strengths and weaknesses that they bring to the table.

Jeff: Okay. So let’s start with JPEG because I think everybody knows what a JPEG is.

Jacob: Yeah, JPEG’s the most common one because, one, it’s really good at compression. So, when you take a digital photo, right? From a camera. Let’s say you take a nice professional photo. That’s going to be captured in camera .raw, usually a raw format of some sort, or maybe even .TIFF from the camera, depending on your camera.

Jeff: Totally know what those mean, but go continue.

Jacob: Well, anyways, there are other file formats, but they’re really big. I mean, super big. Some people like to say a TIFF is like having a three-layered chocolate cake, like…

Jeff: Okay.

Jacob: All of it. And a JPEG would be like if it was flattened and just a nice little thin slice of it worth of information. It’s really optimized down. So, you might be able to compress something that was a 40-megabyte TIFF file down to, you know, a one-megabyte JPEG. Or even if you change the file size a little bit and shrink it down and then use the image optimization tools, which we can talk about, you can get that down to like 500 kilobytes, 300, 100 kilobytes. You can take really big things and make them very small file size footprints.

Jeff: So that’s the positive. What is the negative of JPEG?

Jacob: So, as you compress JPEG, artifacts happen a lot. You get little pixely things that’ll look kind of grainy. Not grainy—wrong word. It’ll look a little pixelated, just slightly. The other thing is it doesn’t support transparency. So, like, if you had a picture and you cut it out, like a ball, and you wanted to put it on different backgrounds on your website, but the background changes, you wouldn’t want something that doesn’t have a transparent background. That is what PNG comes with, but PNG has its own problems. The biggest problems with JPEG are that it can get grainy looking if you over-optimize it. Also, there is a diminishing point of return for compression with JPEGs. You can’t get them much smaller than what they can actually get feasibly for quality. It just kind of hits a wall at some point where you basically…

Jeff: Yeah, there’s a lower limit.

Jacob: Yeah, you have to basically make your image look like crap.

Jeff: Right. Okay.

Jacob: But people have been dealing with that for a while.

Jeff: Okay. So PNG.

Jacob: PNG is also an old one. I should look up the year for that one, but it is also an old format. The best strength for this one is it is really crisp. If you have a PNG image, they just consistently look really crisp, but at the same time, they have extremely limited compression capabilities. It’s really hard to shrink a PNG down, but you get transparency for that case.

Jeff: So that’s sort of the opposite tradeoff with the JPEG.

Jacob: Yes. So, really you should only want to use PNGs for… Back in the day, you know, this was before people were using SVGs. SVGs weren’t as supported on the web even like 10 years ago. I mean, I remember having to get WordPress plugins so it would support SVG, which we’ll get to. But if you wanted a transparent background graphic, PNGs were the way to go. You could do people and other real pictures and cut them out too, but if you wanted a transparent background graphic, the PNG was the way to go. That’s how a lot of logos were usually done on websites.

Jeff: Um, so PNG, I just looked it up, was 1996.

Jacob: Okay, so 1996.

Jeff: The next one… er, go ahead.

Jacob: While I’m going through these, look up the dates as we go along. So JPEG’s 1992—that’s what everyone was using in the beginning. PNG’s 1996. I think in the order you asked earlier was WebP, but let’s switch it real quick and go to SVG.

Jeff: I was just going to say…

Jacob: SVG is Scalable Vector Graphics. So SVG was… Was SVG 1996 as well?

Jeff: As well, yeah.

Jacob: Wow. Well, the web support for that was really lagging behind. It took a long time for…

Jeff: Well, I’m relying on AI. No, 1999. Never mind.

Jacob: Okay. Thank you.

Jeff: The AI lied to me.

Jacob: But still, it took a long time for SVG to come around and be well-supported on websites alone. But SVG is like one of my favorite ones now. If you’re familiar with Illustrator or basically any design program or even fonts, they’re not rastered images. Do you know what I mean by “rastered”?

Jeff: I do not.

Jacob: So, a rastered image is a flattened slice of something more like a photograph that you would hold in your hand. A vector image is made with mathematics. So, the arc that will make a shape is written in mathematics.

Jeff: Right, like in a quadratic equation or…

Jacob: Yeah, basically there’s an equation, and if you open up an SVG file, you’ll see all the coordinates for all the points the curve is making along the way. So, it’s a scalable vector, right? You can stretch it, you can make it as big as the Empire State Building, you can get it as tiny as you want, but it will always be crisp because it’s made with mathematics, not with a photo.

Jeff: So this would be stuff that’s like a logo, not a picture of a person.

Jacob: Right. This replaces PNGs for logos, icons. Before SVG was really supported, everybody did PNGs, but PNGs were like photographs. They were rastered images. That became a problem too, so if you wanted to scale up your icon because it didn’t fit in this design space, you wanted it bigger, well, it started looking grainier because you just started stretching it out. SVG—scalable is right in the name—and you can stretch it up. So it’s really nice. So anytime you use like a background graphic… The best thing about it being made out of math is that it is extremely tiny. A logo that might have been 20, 40, 50 kilobytes on a PNG might be 1 on an SVG. Massive savings. So anytime you see a graphic element on your website, you should try to do it with an SVG format instead of a PNG. Because it can be… It’s all math-driven. Websites themselves— you can take the SVG code. Like, if you open up an SVG file, someone gives it to you, like logo.svg, and you put it in your web browser and inspect the element, you can read the code of it. You can copy that code. Adobe allows on export that you can copy the code, but you can copy the HTML code that generates that and paste it right into your website editor. It will render it right there. You don’t need to upload a file for SVG if you don’t want to. You can put it in as an HTML element because it’s rendered mathematically, not like a photo. So it’s pretty neat.

Jeff: Okay. And so that’s really good for speed and whatever. Yeah.

Jacob: As small as it can be.

Jeff: And then finally WebP, which was 2010.

Jacob: Right, WebP, late to the game as an invention. It was really coming out of this push for speed and the need for speed on the internet. As websites started getting more advanced, people wanted better graphics, more imagery, videos, and GIFs on their sites. WebP can replace everything besides an SVG. It can do transparency, it can do JPEG, but its compression rate is unbelievably better. Something that might be a one-megabyte JPEG and that’s the best you can compress… You can compress to 500-kilobyte, you can get that WebP to 50, 60 kilobytes. I mean it is big.

Jeff: That’s actually insane. I don’t know how you can fit all of that into that size of a file.

Jacob: It’s magical too. But in addition to all of that awesome stuff I just said, WebP can also do animations like a GIF. And that’s really big. So you can actually use that as… to replace GIF animated graphics as well. So it’s kind of like a silver bullet for web optimization.

Jeff: Yeah, it fills all the benefits of all the other ones except for maybe SVG.

Jacob: Right. It’s like…

Jeff: …in WebP.

Jacob: Yeah, WebP is the perfect compression for rastered images—things that are like photos. I’m so happy with it. The more it gets supported, the better.

Because what it allows for is… because I, I worked with photographers, as you know. And you know what a photographer hates? Is to watch their image quality get killed when you put it on a website. They hate it. You know? I mean, they’re working on pictures that are…

Jeff: It’s their baby.

Jacob: I know! They’re huge pictures too, with great depth, great quality, all this stuff. The last thing you want to do is, like, you’re putting it into a virtual presentation, and you get to watch it get butchered by compression.

So they would always want to put in the biggest file format, which basically is like: don’t do that. WebP is the amazing workaround now.

Now, if you’re using WebP, you can show really, really high-quality stuff. And, you know, you can double the size of your JPEG and then still be way less than your compressed JPEG with a WebP format. You know what I mean? You can double the size of your images, and you can still get it, like, super great…

So, a lot of times, I’m telling people now, because WebP is so supportive, that most images you upload to your website—2560 pixels wide—full-screen monitor, crisp quality—WebP is going to compress that thing to the best of its ability.

Jeff: So is there any reason people should still use JPEG and PNG?

Jacob: Not really, no. But the problem is export support, file format support—even on even on Apple: You can see it on that. But even until quite recently, some of these, like, programs, they just don’t like them. Like, you can’t open a WebP file in, uh, Photoshop without a plugin. Like, they’re just not supported very well everywhere.

Jeff: As things go on, they probably will get more and more supported.

Jacob: Yes.

Jeff: Yeah, but right now there are still gaps, whereas everyone supports a JPEG. Like, that’s why we all know what it is.

Jacob: Yeah. And Apple tried to even throw its hat in the ring with its High-Efficiency Image Compression format—HEIC. You might see that file format show up once in a while.

So people have been trying to make this answer, but WebP—nothing has beaten it in my view. It’s great. I mean, essentially, I would ask every single graphic design company, Adobe, can you please just make WebP your standard? Like, you should have TIFF for, like, the big stuff or, like, RAW—you can, you can do the camera RAW. You can do the PDFs. You can still keep that stuff. But for export, just get rid of JPEG, PNG, and GIF.

Just forget about it. Everybody should be on this, and it should be a big, big thing. It’s a big push that everything becomes compatible for WebP because, uh, it would just make the internet a smaller footprint of a place to interact with, and that’s what we need.

Jeff: So this is a good segue into tools. So, you mentioned Illustrator and Photoshop. What are we trying to accomplish with them? Let’s use the example of a local car dealership that just hired a photography company to do new photos for their website.

Jacob: Right. And then you get—what do you get back? A commercial photographer will probably ask what kind of file formats you want, and you can tell them to help with this export. Sometimes they’ll just give you really big stuff.

Typically, after they’ve done their color processing, you’ll get a TIFF. That’s the full, all-the-information-you-could-possibly-want format.

Jeff: Full resolution.

Jacob: A full resolution TIFF is pretty common. But those things are huge. Sometimes 60 MB, sometimes 100 MB.

Jeff: But yeah, you don’t want them on your website.

Jacob: You can’t have them on your website: That’s bigger than your entire website— ten of those files could be bigger than all the files on your website. So, you get down to JPEGs. Then they’ll give you full-resolution JPEGs, but your website isn’t going to want that either because those will be 10 MB or 5 MB…

Jeff: Not as big as the TIFFs, but still too big for your site.

Jacob: Right.

Jeff: So how do you get them to size?

Jacob: Let’s talk about what you can do in Photoshop and Bridge first, then cover free alternatives. If you have Photoshop, it makes this step easier because you can do image processing.

You can open each file, export them using “Save for Web” or “Export for Screens,” or these different export options. For websites, if it’s going to be a big image, like a banner, you’ll probably want to export it at 2560 pixels wide. That’s about the size of a full MacBook Pro or iMac screen, desktop screen, so it’ll look crisp.

Then, you’ll have a quality slider. You’re going to want to use JPEG for most things from a photographer because we’re talking about rastered, flat images—photos.

You slide the quality bar up and down to compress the image. Photoshop doesn’t export as WebP. They don’t have that yet.

Jeff: Right, yeah. You said you need a plugin or whatever to do that

Jacob: Yeah, so that’s kind of a pain. But you can do JPEG still. And we’ll talk about what to do after it’s on your website when we get there. But you can slide it down and try to compress it.

Now, if it’s not going to be on your banners, maybe pick a smaller in-between thing like maybe 2000 pixels wide, 1400 pixels wide—whatever you feel looks comfortable for your designs on your website.

But you’re going to want to size it down and then use the little quality slider. And if you notice, if you go all the way down to zero or one on the quality scale, you can see all the JPEG artifacts we talked about. So you slide it until you feel comfortable with it, and then you’re going to upload it.

And you can do this for PNGs or anything. If you have Photoshop and Bridge, if you’re pretty good with Bridge, and you can look up tutorials on this, you can batch do it. So you can do like a hundred photos, put them in a queue, and hit run. And the queue will be every time an image goes through, it resizes it to this size and does this, and then puts it in this folder for you, web ready.

The whole goal is really to try to get most files—most big files that are supposed to look big and pretty—below 500 KB. That’s pretty reasonable, because you won’t have a ton of banner images on a site.

Alright, let’s say you don’t have Photoshop, you don’t have the Adobe Suite at your disposal— and you’ll notice I haven’t said WebP yet in this mix, which is really annoying because there programs don’t do WebP export on their own— the best thing for Mac users is a tool called ImageOptim. This will help with all your compressions.

You can use any tool you want to resize your images. Sometimes, I think in Apple, the preview tool lets you preview it. You can edit it and actually change the image size right from the preview tool, and you can get it, you can change the pixel size and width of an image and then save it separately.

Then, for the optimization step, you use a tool called ImageOptim, which is a French little plugin you can get for your computer. I keep it on my desktop, and basically, you just drag and drop images in there, and they will compress them really well without losing quality.

That’s the biggest thing about them—it’s not losing quality. But that is essentially what you’ll have to do without Photoshop. You have to find your own path to get there.

Alternatively, if you do have a professional photographer or a family member in your life that’s a professional photographer that has Adobe, they can help you with this step.

You can also ask them to export all your images from your shoot in your set file sizes and say that’s part of the shoot’s requirement. As the deliverable, you want TIFFs, you want full-res JPEGs, and then you want web-size JPEGs at this pixel width, or length, or you know, etc.

We will, at the end of the episode description, do a little research and find the best path for Windows. I’m not a Windows user, Jeff?

Jeff: I refuse to use Apple. So, I am a Windows user.

Jacob: But Jeff is not a photographer.

Jeff: No, I’m not. I don’t have to do these things.

Jacob: We will go back and get a good answer for you because a lot of the photographers that I know are Mac users as well.

Jeff: Better setup for things like that. I did learn how to use Illustrator, though, because one of the restaurants I was working at when I was the manager, they wanted the menus done in Illustrator.

And I was just like, this is so unnecessarily complicated of a tool to write a menu. Like, I do not need this much functionality.

And it was just frustrating trying to learn it because, I mean, you can do so much on Illustrator, and it’s like, I’m just trying to write a menu. Like, I can do this in PowerPoint. I know how to use PowerPoint.

Jacob: Yeah, and there is a give-and-take with some of these design tools. Like, can I do it in PowerPoint? Canva is really good for the middle-ground user.

Jeff: Yeah, Canva is nice.

Jacob: But Canva will also be a little difficult. You can maybe even use Canva for some of this image export. They have some tools that will help with it, but it’s not really the same.

So, we will link to a path for Windows users for an optimization tool that doesn’t include Adobe.

Now, SVG, that can be done if you have an Adobe program, and you have a logo from a client that comes in like a PDF format or something like that, you can use Adobe to again export an SVG.

Now, WebP though isn’t really well supported. You can use tools online that will convert things for you to WebP. You can use desktop apps of different kinds. I don’t think that is really fluid for a lot of people still. They don’t make it really easy. I mean, I don’t know why Photoshop doesn’t let you do that because it would just take forever. They should just switch to that format, and PNG should go in the trash.

So, what you have to do for this, for website users, is server setup and CDN setup will handle this for you depending on your setup. I use WP Engine, and they have a tool called NitroPack or something like that. But essentially, they contract with, I think, a service called Cloudflare to do this as well.

So, what they do is they’ll take your JPEG-optimized website—you give it the best that you can do—and then when it gets copied to the CDN, when it gets analyzed and placed on the CDN, all your images, server-side, are magically turned into WebP format.

Jeff: Oh, interesting.

Jacob: So when people go to that site, they’ve done all the hard work for you.

Jeff: So the files that you load into your website will be WebP images, but you gave WP Engine JEPG’s.

Jacob: Right. I gave my website JEPG’s or PNG’s but when they got compressed and put into the Content Distribution Network, they are now turned into WebP format images… 

Jeff: Oh, well that’s nice.

Jacob: Automatically. So, it is more money to do that for your host, but it does save you a lot of time. And it also comes with a lot of other things that help you optimize for your page speed.

Until WebP becomes the primary image format for computers, Adobe, and everything on the internet, until it becomes the number one image format, we’re kind of stuck trying to figure out workarounds constantly.

So, that’s my favorite one because it takes the headache out of it, and you can still do it the old way, and then it cleans it up.

The other way is if you have more control over your development environment and you know what you’re doing—or you have a developer. If your content distribution network—content delivery network—doesn’t do that for you, you can set up automatic server-side processing that will do that.

So, when you upload an image to your server, the server will then make a copy in JPEG, make a copy in WebP, and then do some magic. So, based on your browser, which image do you get?

Jeff: Oh, okay. Because…

Jacob: Not every single…

Jeff: Chrome supports it because WebP is a Google product. So, if you save an image from—I was just reading this because I don’t know these things—but I was reading that if you save an image on Chrome, like right-click, save image, whatever, it will save it as a WebP image unless you tell it otherwise.

But you’re saying other browsers might not?

Jacob: Right. It’s not—you know, it’s really supported now. A handful of years ago, it wasn’t perfectly supported across browsers. Even Safari was a little late to the game. But they all support it now. So, Safari, Firefox, Chrome, and any Chromium-based browser, Edge, etc. But Internet Explorer was really lagging behind before Edge came out.

And this is the problem with any of these image formats—they’re only as useful as the programs allow you to use them. Even though I would think everybody should be on WebP, Adobe’s not on that bandwagon yet.

Why they get their stick up, a stick up their butt because Google made it or whoever else made it and they didn’t make it, is a little beside the point.

Jeff: I am shocked, Jacob. Shocked that Safari supports WebP because it’s not an Apple product, and that’s why I hate Apple. But apparently, they do.

Jacob: Well, it’s an image. It’s not really a proprietary thing. It’s—you know, it’s like, what would be a good example? It’d be like if a new form of gasoline that worked in your car was the better gasoline for all the cars, but some car manufacturers refused to support it because you had to use the old gas.

Jeff: Well, no, that’s like electric cars. Or like the plugs on your phones. Like, why can’t we all just use USB-C? And now we’re going to, but it’s like, it took you long enough.

It’s a plug. Who cares? Or like Tesla charging stations—if you drive a Chevy Volt or whatever they’re called, you have to get an adapter to use a Tesla charging station. It’s just like…

Jacob: Yeah.

Jeff: Stop.

Jacob: These companies all want to be the railroad barons of the old days.

Jeff: Yeah, or like the coal mining, where it’s like, you live in a company house, you buy your food at a company store, they pay you in specific company money that you can only use at the company store.

It’s that mentality, and that is insane to me.

Jacob: Especially when one thing that’s weird about it is—it’s an image. Why even…

Jeff: It’s innocuous.

Jacob: It’s so abstract to the everyday user that it just makes it easy. But, you know, props to WebP. It’s the best one.

So, that essentially wraps this up.

Jeff: Any final thoughts on image formats?

Jacob: If you don’t know all the stuff we talked about and you’re like, “Oh my God, I don’t want to deal with this ever,” whenever you hire a graphic designer and whenever you hire a photographer, make them do all the hard work for you with the processing.

They’ve got the tools. So at that time, when they ask, “What do you want as a deliverable?” you tell them, “I need this in JPEG format, I need it sized this pixel size, this pixel size, and this pixel size.”

They will make copies of every single image, as many as you want. And if you have a graphic designer, tell them, “I want it in a PDF format,” just in general, as a deliverable. But also an SVG format for all of your stuff, so that you can use it on your website.

Just do the due diligence of making the design people do the hard work for the export. That’s really the best thing for you to do.

Jeff: And if you’re doing it yourself, we gave you the info. Some info.

Jacob: We gave you some limited information, which we will then have to link to in the episode description.

Jeff: Yeah, we’ll put links to all the tools that we mentioned.

Jacob: Adobe, please. Please. Tell everybody it’s only WebP from here on out, guys, until someone invents something better.

Jeff: Well, that wraps up our Season 2, Episode 2 Acronym Soup.

Reminder that we’re going to a biweekly format. So, this probably won’t come out until after Christmas, but we’ll see you in the new year.

Jacob: See you in the new year.