PNG, JPG or GIF Which Should You Be Using On Your Clients Websites | EP 490

PNG, JPG or GIF Which Should You Be Using On Your Clients Websites

1. Difference between png, jpg, svg and gif images00:47
2. PNG01:06
3. JPG01:52
4. SVG02:21
5. GIF03:16
6. Best Image Formats for Websites Compared! PNG, JPG, GIF, and WebP03:40
7. What is WebP and How to Use WebP Images in WordPress 03:50
8. How to pronounce GIF?04:00

Read the full episode transcript below:

00:22 David Blackmon: Everybody welcome to another episode of WP The Podcast, brought to you by WP here.

00:26 Tim Strifler: I’m Tim Strifler.

00:28 David Blackmon: Today, we’re gonna discuss PNGs, JPEGSs, or GIFs, which you should be using on your client websites. This is not an overly complex topic, we’re not gonna spend a ton of time, but we wanted to give you an overview of what is the best use cases for each one of these image types.

00:47 David Blackmon: In this day and age, there’s a lot more image types that have come on the scene. WebP. SVGs. We’re not diving off into that. We will link off to an article that tells you the difference between these images, but we wanted to discuss the most common types that people use on their websites.

01:06 David Blackmon: We’re gonna get this thing started off with PNGs. Anytime you use, or need, a transparent image on your website, with a transparent background, you’re gonna need to save it as a PNG. If you have a white background and you have an image with a bunch of different things in the background where you don’t want that showing up on your website, you’re gonna need to use a PNG. Anytime you’re gonna use transparent, make sure you use PNG.

01:37 David Blackmon: It’s a larger file type, so you want to be really, really careful when you use PNGs, because they tend to be larger in size, which could slow your website down and stuff. Tim, you want to talk about JPEGs?

01:52 Tim Strifler: JPEG is definitely, I would say, the best all around choice for images, because, as David mentioned, it is a smaller file size than a PNG. If you don’t need that transparency with the PNG, then the JPEG is definitely the way to go.

02:14 Tim Strifler: I guess I’ll go ahead and jump in and talk a little bit about SVG, and then, David, I’ll let you talk about GIF.

02:21 Tim Strifler: SVG is great for logos, or icons, I was blanking there for a second. SVG stands for Scalable Vector Graphic, and so, essentially it uses math calculations and everything, to automatically scale as needed. It can be really small because it’s not an image, per se, it’s more of a math problem within your browser of what it should look like, and what the dimensions are, and stuff. And then in real time, it’s basically creating it.

02:57 Tim Strifler: I’m sure there’s definitely a way better explanation of SVG and how they work, but SVG can be really good for logos, or for icons, or maybe some simple graphic type of images that are made in a tool like Adobe Illustrator. But, yeah, that’s SVG.

03:16 David Blackmon: GIFs we’re gonna talk about briefly. A GIF is just an animation. If you’re on social media, GIFs are all the rage, man. You may have seen a funny GIF in a comment and stuff. If you’re gonna have any type of animated needs on an image, you’re gonna need to go ahead and use the GIF format.

03:36 David Blackmon: Tim, do we want to talk about WebP at all?

03:40 Tim Strifler: We have an episode coming up about WebP, so we can talk about it more then. But we do have some links here. One article from WPMU DEV that does talk about it, and then an arrive from David’s company, Aspen Grove Studios that talks about WebP, so we’ll link to that in the show notes. WebP is super modern and a new format.

04:00 Tim Strifler: One thing I do want to say, we talked about on yesterday’s episode, is it GIF, or is it GIF? I think most people say GIF. David and I both agreed that we say GIF. I don’t think there’s necessarily a wrong one, however, GIF stands fro Graphic Interchange Format. So, the G, graphic, that would imply that it should be pronounced GIF. But really it’s up to you. It’s like the niche, niche debate. They’re both right. What do you think it is, kind of thing.

04:35 David Blackmon: Absolutely.

04:37 David Blackmon: Tomorrow, we’ve got a fantastic topic that I am really looking forward to. We’re gonna discuss our five best productivity apps for 2019. Tim, until tomorrow, we’ll see you then.

04:53 Tim Strifler: Take care. Bye bye.