 Grazie, grazie. So we're going to go fast today. My talk is kind of a long one and we have a short time, so I'm going to go quite quickly. As I said, my name is Tofer. I work for Master WP, and I also do hero press. If you never check them out, check out heropress.com and Master WP. We're going to look at, I'm going to talk about three different tools today. Optimizilla.com, the GIMP, which is the GNU image manipulation program, and Photoshop. First, we're going to discuss the concept of lossless versus lossy and what those words mean. Lossless compression means that it uses a method of file size compression that does not remove visual quality from the image. So that you can get a small file size, but it looks exactly the same as it did when you started. Lossy means that the smaller your file size gets, the worse your image looks, and there are advantages to both, and we'll talk about that. Here's an example. This is a PNG. It is 2400 kilobytes, and this is a JPEG that is only 54 kilobytes. However, if you look, does my laser work? Yes. If you look here, they look pretty similar, but if you look over here, I don't know if the screen is going to show it. But the PNG is much clearer than the JPEG because the JPEG loses quality as you lose file size. And so you always have to be thinking as you choose what you're going to do. Do you want smaller file size? Do you want better quality image? So we're going to look at five different image formats. GIF, WebP, PNG, JPEG, SVG, and let me notice this one right here. GIF was created by CompuServe. Anybody remember CompuServe? Yes. The graphics interchange format, they needed an image format. There wasn't one. There wasn't an image format for the network, so they invented this one. And they held the copyright for many, many years, and people were afraid that they would sue the entire internet at one point, and it never happened. So it's the first widely accepted image format on the web. It was GIF 89, or GIF 89. It was their 89th rent addition, is the one we have now. But then GIF 89A came out in the 90s, which included an alpha channel for transparency and animation. And this was revolutionary because you got moving things on the web, and nobody had ever seen that before, as well as transparency. Do you be able to have a little jet plane shoot across your screen? It was great. You cannot have more than 256 colors chosen from a 24-bit color palette. If one of them is transparent, you only get 255. And I remember in the early days on I wanted to make a small image. I would bring up a grid with 256 colors, and I would pick which ones I didn't need one at a time. It was tedious. The compression format is lossless, so you don't lose quality, the smaller your image gets. Lempel-Zeef Welch LZW created this compression format for CompuServe just for GIFs. And that also was revolutionary at the time because it was the first time that you could reasonably get images over a modem. Before that, it was hours to download something enormous. It was horrible. Unique features. You could have animation, you can have transparency, see ping, and small file size. So these are the things you need to be thinking about. Should I use GIF if I need one of these three things? Positives is extremely well supported in editors and renderers. It's everywhere. Very small file size and animated GIFs. Where would we be today without animated GIFs? Negatives. Only 256 colors. That's a pinch. Compressed video can be smaller than a GIF. Not many people know this, but all the GIFs you see on Twitter are actually videos. They convert them on the fly. When they want to show a GIF, they convert the video and send it to you because it's smaller than a GIF. Editor support. Comprehensive for still images. Animated GIFs often require different software. Now, you can make an animated GIF with, again, I've done it. It's horrible. There are good pieces of software which will just make one for you. And it used to be, you would have to make a whole bunch of images and stack them. These days, you just feed it a bit of video and you get a... Yeah, there we go. So when should you use a GIF? When file size is very important. Perhaps most important. Think people on 3G in the Southern Pacific Ocean. I have a coworker that used to work on his 3G phone building websites and file size matters. When you need animation and you don't want to use video, GIFs still pretty much your only option. And when transparency works just as well as a PNG. Transparency in a PNG is better, it's nicer, but much larger file size. So if you can get the effect you need with a GIF, you should use that. We're going to skip questions till the end, so I'm going to move right along. JPG created in 1992 by the joint photograph experts group, JPEG. There was another one that made movies called MPEG. You may remember MPEGs. It quickly became the most popular high-color format on the web. They realized the flaws in the late 90s and started making JPEG 2000 and it never really took off. It's still out there and it still works in browsers, so you can still use it, but nobody really knows what it is. 16-bit color palette, 65,000 colors. This came right after GIF and everybody went, wow, 256 to 65,000. Now I can finally put my photographs on the web and not have them look terrible. The compression format is lossy, which means the smaller your file, the worse it looks. The picture of this cat says the compression is measured 1 to 100. So on the right is 100, which is basically zero compression. On the left is 1. And so you can see when you save a JPEG, there's a little slider and you get to pick. Where do I want it to look? And in real time, it'll show you it's going to look this good or this bad. And so this is a great image showing your options there. WordPress compresses every image you upload to 80. And that's not 80 of the original, it's 80 of what you uploaded. So if you spend an hour very carefully adjusting that slider to get exactly what you want, remember when you upload it, WordPress is going to go. You can turn that off with a one liner and there are plugins to let you do it. So if you're the kind of person who always manages it very carefully, you probably want to turn that off. You can also set it to another value. When I'm manually saving images, I usually do 40. And so I experimented once with setting WordPress to 40 and it was okay. It chewed some up. But keep in mind that you can adjust that unique features. There's really only one extraordinarily high quality for the file size. There's better image formats for quality, but nowhere near the file size. There are better file size ones like Jeff, but nowhere near the quality. So this is the really wide sweet spot. So you remember the first one I showed you the first JPEG. So this one's at 54K. And you can probably see some chewed up stuff here. This is that original one that I showed you. There's that paying at 2400. So here's a JPEG at 144K. And it is on my screen here indistinguishable from that giant PNG. I can't see the screen very well. Can you see a difference over here? Not very well. Okay. On my screen, it's very blocky and bricked right here. Yeah. So the real comparison here is between this one and this one. And on my screen here, there's no difference, but look at that file size. It's just crazy. So positives, extremely well supported to editors, renders, devices everywhere. Best file size for the quality and much better color support than JIF. Negatives at very high compression, it loses quality. It's not really a negative. It's just the way it is. Don't compress it that much if you don't want to lose that quality. It is limited to 65,000 colors, which was amazing when it came out. But now that we can do way better photographers are like, oh, only 65,000 colors. The world has so many more. Better support, comprehensive. Everything supports JPEG. Everything, everything, everything. It's the default format for digital cameras for almost every cell phone. Apple only switched to whatever HEIC or something in the last few editions. But you can switch it back to JPEG, which is what I did. So it's everywhere. If you want support, pick JPEG. Best use case when file size is important, but you still require high quality. And we will also skip these questions. PNG, portable network graphics. They said, what if we can have all the coolness of Jeff and a JPEG in one format? And they started making PNG. It's the newest of the mainstream image formats. And by mainstream, I mean Jeff, JPEG and PNG and PNG. And it is the most recently acquired browser support. I remember when Ping was half supported, you could use it, but no transparency. And there was no reason at all to use it. So when it finally got full support on all browsers, the world rejoiced. It was amazing. Because 32-bit color, 16 million colors, and photographers went bananas because you could just upload anything and it looked good. And all the developers said, but the file size, I said, we don't care. Make it look good. Compression format is lossless. So even though you can compress it a lot, it still looks beautiful because it works similar to zip files. So rather than pulling out image data, it just squishes the file like a zip file does. And so when you hit save, what it's actually doing is zipping up your image. And a PNG is really just a zip file that the computer knows how to render as an image. Unique features, very high quality without unreasonable file size. Reasonable is very dependent on who you ask. Semi-transparency, alpha layer, no other image format. Like, Jif and JPEG don't do that. We'll talk about one in a minute that does, but that one's not nearly as good. If you want semi-transparency, PNG is your option. It can be either 8-bit or 32-bit. I've experimented with both. I don't know why you would ever make an 8-bit PNG because an 8-bit Jif is smaller. And you lose your semi-transparency on a PNG at 8-bit. So I don't know why you would bother. But you can. And as a developer, you should know that you can because someday somebody's going to ask you to. Positives, highest possible quality, standard format, and semi-transparency. Negatives, largest file size of all the standard types by a lot. I showed you that JPEG that looked almost the same as a PNG. And I'm not a photographer, so I don't care. So I'll take a file that's 8 times smaller. What did you do? I'll take a file that's 8 times smaller in exchange for that size. PNG has no animation built in. When they started, they're like, oh yeah, well I have animation like Jif. And it never happened. Some people tried. They made MNG and an APNG. And they still exist and they still work. And there's one or two browsers that support them. But they're never ever going to take over Jif. Editor supports comprehensive, best use case, high quality photography, or semi-transparent design elements. I can't think of any other reasons than these two to use a PNG. If you're making a photography site, you need that high quality image. That's just the way it is. If you want to lay a drop shadow on anything, PNG is your only option. And that's just the way it is. If you want anything else, JPEG or JIF is going to get you much better quality for the file size. No questions. SVG, scalable vector graphics. What's interesting about this one is that SVGs are not images. They look like it, but they're text files. They're XML. They're practically HTML. It's kind of old. It's been around 30 years, but browsers really only started supporting it in the mid-20s. And so what makes it really unique is this difference right here. If you take a regular image, they're called rasterize and make them big, you can see all the pixels get stretched out big. SVGs do not. They stay smooth no matter what size you get. Anybody remember flash animation? Flash is just animated SVGs. That's all it was. And I remember when flash came out and people were just excited beyond words. It came first to the real media player. Anybody remember real media? Real audio? Yeah. Flash came to real media and the artists were like, we finally have animation on the web. All right, moving right along. So color palette, anything with RGB or hex value because it's not an image. You're just putting in numbers. So you can put in any number you want for your colors. Compression format. There is nothing built in. It's just a text file. But because it's just a text file, you can compress it in any way that text files can be compressed. So Gzip, Bzip 2. You may have noticed when you do an inspection on your web page, it says that your HTML was zipped with either BR or Gzip or something like that. You can do the same thing with an SVG and you can save a lot of file size. But that's up to your web server or you want to command line, whatever you want to do. There's nothing built in. Unique features scales infinitely without quality reduction. And I do mean infinitely. So your 54k text file can make an image that is this tall or big enough to cover this entire wall. This is one of the reasons that print shops love SVGs because you can give them a little, little thing and say, I want this, but I want it on the side of my van. Oh, fine. No problem. And no loss of quality. The way it works is the text file says between these four points make this color. If you have a curve that uses weird math to figure out every point on that curve and says inside this, make this color. And so when you load an SVG in your browser, it's just reading the text file and filling in all the colors, which means a simple SVG is going to load very quickly and a complex SVG is going to load slowly. That's something else to think about. Unique features because it's text, it can be scripted. It's just text. You can write it in JavaScript and build an SVG on the fly as the page loads and take input from someone. Has anybody ever seen animated solar system where the stuff moves around and you can rotate it and stuff like that? A lot of that is built in SVG so you can zoom on a planet and it doesn't get all big and blocky as you zoom in. And that's just text and the JavaScript changes it as you go. Other unique feature, the file size doesn't change as image size increases. If you take a JPEG and make it twice as big, the file size is going to grow even if you don't change the quality. It's even going to look uglier. And a 54K SVG is going to be a 54K SVG, no matter if it's 12 feet tall or an inch tall. Positives, infinite scalability, very small file size and scriptable. Negatives. Do you see scriptable is also on the negatives? Because it's scriptable, you can hack it. You can put something in it. It's susceptible. It's not common, it's not easy, but it's possible and it's something you need to think about if you're going to use it on your website. It's not editable in standard photo editors like Photoshop and GIMP. You need a special SVG editor. There's no native WordPress support, which really surprises me because it would be way easier to implement this than the next thing we're going to talk about. That said, there are dozens of plugins that you can get that are very small files that just say, they're literally one-liners include SVG. And then you can use it anywhere. You can put them in the media library just like a regular image. Editor support, special editor. Inkscape is open source and wonderful. Illustrator is from Adobe and not open source. I've never used it. The GIMP, and I'm assuming Photoshop as well, can open them and then save to another format. So when you say open this SVG, it'll say, okay, fine. How big do you want it? You say this big and then it makes a JPEG, which is fine. That works for me. You don't want to reuse it. I mean, you can't reuse it. You're not saving your SVG or anything, but it can be done. Best use case when file sizes are low enough comparatively, you can make an extraordinarily complex SVG. Like if you take a photograph and try to make an SVG out of it, all those colors, basically every pixel is a different color. You're making little text boxes for every pixel. It's outrageous. And that'll be way bigger than a JPEG or a PNG. If you have a logo with four colors and two little swoops at the top of your letter M, it's going to be way smaller than an image. So you have to figure out which way you want to go. When images need to change size in the browser, this is also commonly done with logos, where you might have a logo this tall in the header, but only this tall in the footer. You can use the same image, use HTML to resize it, and it's not going to look weird. Or if you have some kind of UI with JavaScript, and you say, make the planet this big instead of this big, then you can easily change that size. And also when images need to respond to input, this is related to the scriptability. You could let the user type in a hex code and change the color of an element or something. That's where it gets really spooky, because when you start taking input from the end user and dropping it into JavaScript to create an image, that's up to you. Okay, WebP, created by Google in 2010. Most browsers supported it at some level by 2020. WebP 2 started in 2021, and this was intended to replace everything in every way. Animation, transparency, the whole nine yards. 32-bit, 16 million colors. I only have like four minutes left, so I'm going fast. Both lossy and lossless are options. So again, in every way. But the compression format was proprietary, created by Google. Trust them at your risk. Unique features, lossy or lossless can have high color animation. So now we have the animation of a GIF, but the quality of a PNG. Yay. Positives, very flexible, could provide a single standard format for all images. Could replace everything. Negatives. While editor support is comprehensive, it's not 100% anywhere. So no editor has every feature. Anecdotally, and this is my anecdote, it doesn't make smaller images. It's not smaller than JPEG. It's not smaller than PNG. I don't know why. At this point, I don't have a reason to use it. There's no native WordPress support. It's close. There's a big tussle in the, in track about it, but it's not there. All editors claim support. Few, if any, support all features. So maybe you do one feature in Photoshop and another feature in something else. It's, it's a pain. Best use case, if you can get a smaller file size, it might be worth it. I think what we're getting here is that I don't recommend this format. So my summary, 8-bit GIFs are smaller than 8-bit PNGs. So if you're going to do 8-bit, go GIF. GIFs are still best for animation, but maybe video. So think about that. JPEGs are best for regular photos. You're just uploading your family pictures to JPEG. Things are best for high end photography and transparency. Do I have time for Q and A? Okay. Yes. A few minutes. Thank you. Yeah. You already answered in the end. I was curious to know if it's worth it to use WebP, that it goes to the space that we find on the server and consider that you have to keep a JPEG on the server and WebP. Yes. You already answered that. Yeah. There is a, there is a reason to use WebP and that is it will probably work out. And at some point it will probably be the standard. So you have to choose when do you start and that's different for every person. Yes. So just repeating the question. Yeah. I have no idea what WebP2 is about. How can we use SVG image in security? Use without risk. Without risk? Define risk. The way I use SVG without risk is I downloaded a plugin on .org and I put up my SVGs. And I didn't think about it again. I'm not doing any scripting. The SVGs are just coordinates. They're not, there's no code in there. And so from my personal SVGs, I just upload them and forget about it. Once you start scripting them and all of that, then you should have a security-minded person analyzing your code. Okay. Any other ones? Okay. So there are no options for implementing the expect in the SVG images. I didn't get that. They are better for styling with CSS. Not ease of styling with CSS? With the expect. Oh, CSS. Yeah. CSS doesn't really affect any of them. You can use CSS to size any of them. Yes. No. Oh, variable fonts. Yes. Those are SVG as well. Yes. The question, is it good or not? Yes. Yeah. Variable fonts are made with SVG. And the complexity of the script, the font can make them very large. And not worth it. Okay. I'll take one last one here. Two words about evif format and comparative with the web B. Ah. Like which editors are best? So just differences between the format, the evif format and any others. Web B. Yeah. The heavy format, you said? Evif, evif. Oh, evi? Ah. Evi? Yes, evi. Um, I don't know. So you know what to do this evening. That's in the next talk. That's the next guy. All right. Okay. Thank you very much. Yes. Thank you. Thank you.