#45: The DUX Guide to Images, Formats, and Optimization

Well, hello and good evening and good morning and happy days and getting ready for my guess it’s October So what? Soon to be Halloween? The pre Is this a pre Halloween episode?

that that’s fair. That’s a fair thing. Yes. I’ve been in Big Lots recently and between skeletons and Christmas trees. I guess that’s what you get. Hey, everybody, you’re listening to the drunken UX podcast. I’m your host, Michael Fienen. I rather host Aaron Hill. How you doing? Michael? I’m doing all right, folks. If you are enjoying the show, be sure to run by our fantastic sponsors over at pork bun.com. If you go check them out, and you’re looking for a dot design domain name, use the coupon code drunken UX, when you check out you’re going to get a free year of that of your DNS for that domain, which is kind of awesome. What’s actually

I mean, I do everything all Fienen at this point, because it’s always available,

I’ve got I’ve got Fienen Dev, I’ve got fienen.com I don’t have fienen.net. But

You need to put some put some googly eyes on the back side of your of your mic. I will I will do that. Let’s see what else I am drinking this evening. I’m classy. I’m a classy gentleman as the fine folks around town call me. So I went to KFC I got myself a big old cup of sweet tea, and I just keep pouring vodka in it. Classy gentlemen,

lemonade with seltzer. I think I mean, the half and half I use is not that I can tell you that much ice

We’ll see about that. Well, if you think I mean you’re three in you’ll be another free and by the time the show’s done, let’s see how dangerous it is. I like I to enjoy Living Dangerously. This week we’re gonna be talking about or this this bye week. Semi bi weekly is a month. Yeah, semi monthly and bi weekly both mean the same thing. They don’t like they don’t know semi annually and by annually mean anything. The

I know it was every other year. Sometimes it is. Sometimes it’s twice a year. It’s like hands on who’s saying it?

Flammable.

This week, what however you want to phrase it, we are talking about a bunch of stuff about images. We talked a lot about development, things like that we haven’t dipped into the design side of this world nearly enough recently. So we wanted to sit down and kind of go over from a very basic level up to you know, what some of the different things you can do with some of these formats and the tools and why why you should care about a lot of these things. Because there are a lot of tools out there that let you forget about images, you know, you just put your image in and it takes care of it. But if you don’t know what it’s doing, then you don’t know if it’s doing it. Well.

I wanted to share a resource that I found here the other day, it’s over at free, front end calm, and we’ll have a link to it in the show notes. It’s basically just a list of HTML and CSS style guides. Okay, we’ve talked about solid guides before many times, yeah. And you know, how they apply to design patterns and reusable components and things like that. This is like that. But it’s more about coding styles than it is visual styles or visual patterns, right. And so if you’re working on a project, especially something that you’re sharing, so like thinking about your diaper base air, you know, when people are writing and committing code, you know, you want that code to meet a certain spec. So that, yeah, when you look at your project, and you’re looking at two different modules side by side, they don’t look, you know, like they’ve been obviously written by two different people,

if you’re interested in something like that, and you’re wanting to organize things, or you’ve got a team of people that you’re trying to get on the same page, this can be a really useful source to go in and just look at how other companies are doing it. So we’re talking, Google’s got one in here, the CSS guidelines are in there. Airbnb has one in here, there’s a bunch of different folks. And a lot of them are just sort of on GitHub, and are very straightforward. Some of them are very nice. Like, you’ve got the html5 style guide up is up there. But it gives you those patterns and ideas like so if you’re trying to write your own what to model it on, you know, what, should I put x in there? You know, does it make sense for me to explain how Ben works for our CSS, go look at Airbnb ease, and see how they explain how BAM works in their CSS and copy them.

It makes you realize, right? When you have to work with other people, you all can’t be code Cowboys, you all can’t be doing your own things and doing things, you know the way you want to do it. But nobody else is following like you, you have to have standards, when you’re part of a larger project or part of a team. And so that idea of yet, I agree, they are very opinionated because that company or that project is likely to outlast you.

And I think what people will find is that, when you get something in the one of these, that starts to work for you, that the style guide exists to explain why Yeah, so if you’re Yeah, if you’re gonna do soft tabs, you know, or something like that, or, you know, if you’re using Ben markup, and you’re explaining the nomenclature you use to define that. There, the documentation in the style guide is there to give you background. And what all this starts feeding into, as you learn more about it is, you know, if you’re using an ID or something like that, that supports check style, and a lot of what is defined in the style guide will end up in your check style, so that the tool you’re developing, and we’ll start enforcing some of those things, you’ll see that a lot when it comes to things like tabs and spacing, new lines. So that, you know, when you’re at this organization that’s at 20 developers, you know, they you need all that code to look the same, you need it to test the same, you need it to, you know, output things in a way that makes sense and is consistent when the next intern comes in, or you know, when the next person retires or moves on to another company. So

I want to look into more check style stuff, too, because I’m currently playing with I’ve used Adam for years now. Adam has been my main code writing tool of choice. But this last week, I started playing with VS code. Everybody’s hot on VS code right now, I hadn’t used it yet. So I thought, you know what I had, I had an excuse to try something different. So I was like, I’ll go get it and play with it like it perfectly fine so far. But it also is making me think about, you know, what other things should I be rolling into this, that, you know, now that I’m thinking about switching and getting something like codes, dials and stuff mixed in there for some of the work I’m doing would probably be both beneficial to me and sanity saving for my QA people in code reviewers. So if you want to check that out, go to it’s at free front end.com. If you swing by our show notes at drunken UX com, look up Episode 45. And we’ll have a link to it down in the resources section of that as well go check it out. And if you have a favorite, let us know. Or if you have written one, you know, send this link, we’d love to share it with everybody. So

Yeah. Aaron? Yes, question. Yeah. How do you feel about Photoshop or Illustrator? Oh, man,

Since you’re using GIMP Have you played with escape at all?

So the reason I kind of lead with these questions because I’m very much the same way. I remember learning Photoshop in high school, you know, back God in the dark ages, basically on on the old candy IMAX with the hockey pucks, right my see, you know, like, yeah, yeah, in fact, fun fact, I still have I think all of my homework files from that shit. Wow, I’m pretty sure because I’ve been good at backups over the years. And I’m a about 90% sure that there is still a folder in my backups on my external drive that that has just come along. Every You know, every time I move data around the top, it’s picked up and hold with it. editing, right, I agree with you. I’m very much a raster guy. They don’t do much vector. And the reality is I’m not a designer, and I want to lead with that before we even get into any of the this talk. And I think Aaron, you probably agree with me on that. My art is my code. My art is not art.

I can, I can edit in Photoshop I can give me like if I’m doing photography, you know, I can go in and clean up pictures or do it in light room usually, but that’s fine. And I can merge stuff and manipulate it and I’m I’m okay, I’m functional Photoshop. I’m not good at creating stuff in it.

I actually have a welcome as well. And I’m going to tell all of the developers out there listening to this that honestly, even if you don’t do graphic design, at a digital tablet is still well worth having. Even if it’s only for the purposes of taking some strain off your wrist and Jesus Christ Aaron. It’s like a $4,000 tablet. It’s

a foot and a half by

my workspace tucked away but I swap in and out with it. I’ll use my mouse for a while but then I’ll switch over to the Wacom because they does it relieves strain on my wrist. It’s very nice. And it works just as good once you’ve gotten the hang of it. So

Yeah, it’s really not a sponsor of the drunken, you

So the thing is, like with images, not everything is about photographs. And we tend to think that way a lot. And we’re going to talk that way a lot tonight, quite frankly. But there’s a lot of stuff that goes into web design that is visual, but isn’t necessarily image based. And so it’s good to learn as a developer, how to start thinking about images and how they fit into your project and why it matters. And like things that we used to do with images. And I say used to going back a decade or more on some of this. But like, when you have an actual image on the page, a lot of websites liked having a drop shadow under them, or border, or border. We didn’t have that when we had CSS border for the most part, but not for complicated borders certainly are graphical borders. You know, we didn’t have CSS shadow at that point in time or anything.

There’s also stuff like arrows, you know, we don’t think about some of this stuff very much. But now with a lot of advanced CSS geometry support, there are a lot of basic shapes, circles, triangles, arrows, things you can create as a consequence of that available geometry that doesn’t require you to make a separate SVG is everything or separate images for everything shuts it. Yeah. And it’s hard in some cases and take some work. But it’s, it’s the kind of thing that, as a developer, it’s good to know. Because, you know, if you have a graphic designer on staff, the odds of them knowing how to write the CSS to make that happen is possibly very small, like, they may come to you and say, Hey, we need this to be made. And, you know, we know it can be done in CSS or whatever. Or you may say, Oh, I see you made this in here, I can make that with CSS instead. And save, you know, an extra image on the page. So that’s, that’s part of why this is an important topic for developers, a lot of

I’m all for cross training for what it’s worth. Yeah, I think everybody should learn a little CSS, a little JavaScript. That’s what your main job is or not because it is it’s it’s useful to know what you’re creating, and how somebody else is going to be asked to interpret it. Because it can impact the things you make. drop shadows are a good example, because you can create drop shadows in Photoshop that can’t be recreated and CSS.

Hello, drop shadow is Italy, possibility. And CSS you can do a drop shadow, but it may not be hella, and that that matters. There are two main types of images. And I know this is like graphic design one on one, but I’m presuming nothing at this point. There are two types of images raster vector, that’s all you need to remember, raster is what most images are. It’s a picture. Yeah, a photo, anything detailed anything with, you know, undefined damage edges in the image, it has

So yeah, to that example, the difference if it matters to you, whereas a vector defines lines and shapes and things. raster is basically saying what every single pixel looks like, right? You know, we use compression, and we use algorithms to determine that and to save it and to make it smaller. But at the end of the day, raster is raster rising the image. And so every single pixel, you know, has a color value at the, you know,

Yeah, so whereas a raster defines the color of every pixel, vectors are defining everything with math. Yeah. vectors, vector graphics are just really, really complicated math problems.

Yeah. And so as a consequence, these have very different applications. raster is very good for anything that’s like, say, a photo. If you zoom them, mm, you’re going to make them blurry. Yeah. Because as you get bigger with it, you know, it can’t add data, it can’t, you know, there are there are certainly tools that will try to interpolate data. So if you make it bigger, it’ll try to make it look better. But it still will make it fuzzier because it’s still making up image data at that point, vector is you can blow up because it’s math, the equation just scales. And so your smooth line at one resolution is still a smooth line at a huge resolution or a small resolution. So why does this matter? It’s a very simple concept. And it’s something that you’ll hear repeated ad nauseum at every conference and every day for its that milliseconds matter. There’s a piece of research Google put out a was 2017 was, I think, the most recent one, I’ve got a link to it in the show notes. If your page load time goes from one second to five seconds, the probability that the user will bounce will increase 90%. Unknown Speaker Wow.

Yeah. So as you add up images, and the reason this matters for images, what we’ll talk about here in a second, with performance images are a huge chunk of your site. They make up one of the largest chunks of payload for most websites. So if your site is otherwise fast, you may be taking a super fast website and bringing it to a screeching halt. Because you put a lot of big images on it.

So from a performance standpoint, to put this in context, so you kind of understand where we’re coming from I went looked up a few sites just did this for fun. I did some research. Got it’s been probably eight years ago, since I did it more, I looked at 100 websites, 100 higher ed websites and weighed the performance of their homepage is including a breakdown of their image payload. So this is felt very familiar to me. base camps website was 428 kilobytes, and 189 of that was the images. So for the math nerds out there, that was a 43% ratio, 43% scent of their entire website was images. Okay. for Apple, it drops apples, just under four Meg’s and just under one Meg of images. So 25% give or take.

Okay. NBC News, just under nine megs, huge and keep my news website. They’re loading all kinds of JavaScript, all kinds of tracking stuff and everything. Yeah, image wise, they were incredibly good. The nbc news site only had 603 kilobytes of images, which is a 7% ratio.

etsy has a healthy balance. etsy had 5.8 megs. 2.7 was images. So that’s 46%. They’re kind of on the base camp level. It’s worth pointing out to like, at base camps level, their whole site was 428 kilobytes on load. Yeah. That’s incredibly good.

wouldn’t go to them and say, You ought to do something about your images. Because the overall I mean, even if they could, and they may be I didn’t look in to see whether you know, that stuff was optimized well, but at that overall size, they’re still about 25%, of what the average is, the average is around two games, or two Meg’s per page. So they’re under a quarter of that overall. So like their site is incredibly performant. No matter how you slice it, right? Just for fun, I looked at the drunken UX website. And as a caveat, before I say this, we are running WordPress, I am running just a canned theme on it. You know, I didn’t I didn’t build it myself. I didn’t have time. The you know, what is it the the cobblers kids have no shoes. Kind of? Very, very can. We came in at 2.57 megs. So a little above average there. But only 346 kilobytes of images. 14% ratio.

So JavaScript made up three times what are you know, shit. And that’s part of the WordPress problem. All of this stuff getting loaded by plugins by you know, jQuery by the theme, all of this stuff to support all of these things that you probably don’t need. And I’ve never done an optimization pass. I, I am confident I could get our size down under a meg.

which I’m going to stick a pin in this. And before we started rolling tape, Aaron and I were talking about the end of the year and C three and all this a fun topic. It would be overall optimizing website. And I think we should use the drunken UX website as Oh, yes. Yeah, that’d be cool. And should do it before and after. Yeah. So keep me honest on that. listeners, make sure we come back and do that for you at some point. Uh, let’s see. So I had mentioned in the average, if you go over to http archive.org, they have a page weight report. So as they as the HTTP Archive goes through and crawls pages, they store all the information about them. And you can go in and query that and get information. The average ratio, I mentioned, the average page page size was two Meg’s the average ratio is 51%. Okay, so for any given page, you’re generally and if you look at what, you know, what I found, none of the sites actually got over 50%. But you had two in the 40s, one in the high 40s. You know, the other three were 25. And under, so, you know, average it out to say 32%, somewhere in there for an average. So my highly unscientific sample of five didn’t make the 51%. But

Yeah. And this is part of the argument right behind lazy loading. And this is something isn’t was it Chrome, I think is the one who is currently experimenting with like native, lazy loading support, like, like, they are going to take Oh, right loading pages, which I think is neat.

yeah, it’s something I don’t know if it’s something the page authorized to do it for. It’s a setting in the browser. I honestly haven’t just looked into it yet. There are tools that help a candle is one, I’ll throw a link to that in the show notes. They do accessible, lazy loading. So just for our listeners, what is lazy voting? So yeah, lazy loading is when, if I’ve got 10 pictures on a page, and they’re big, let’s say, like, let’s say, literally, I can see one image and you’re meant, you know, it’s a photography gallery, and you went to scroll down, and each image takes up the whole page. The other nine images won’t load until I’ve scrolled them into view. And then it’ll make the request to go get that image and show it so that if I only look at the top of the page, I’m not being burdened with the extra payload of the nine images that never even came into my viewport.

So non lazy loaded would be the same website, and all those images load. And so if each image is a meg, and there are 10 of them, then you’ve downloaded 10 megs of the data to only consume one. Right? That’s how browsers have worked for years. So another reason, another way things used to work was to save on HTTP requests. So let’s say you’re going to a photo gallery, there’s 100 images, right? Every one of those is an HTTP request, not a big deal. I mean, the average number of HTTP requests for a web page is like 118, or something like that right now. And that’s, that’s every request for every JavaScript file, every tracking pixel, every image, the HTML document, everything included in that all the tracking modules and everything, like every time, the browser calls the server, it’s a request. And they happen very quickly. They’re extremely efficient. But they do add up. Yeah. And so again, when you’re talking about milliseconds, yeah, it may take, you know, 75 milliseconds to get through all those requests. But if you can cut it in half, then you’ve cut it in half, and you’re 36 milliseconds.

Or a lot of files that request other files are interacting with API’s or doing anything asynchronously. Like those all Yeah, slow stuff down. And, and if its job where you get into trouble JavaScript, and this is what you were kind of talking about with images. You know, if it’s, if it’s blocking JavaScript, if you aren’t deferring it, or must need asynchronously, it will hold up everything else that’s happening until that’s done. I was gonna say, I’m pretty sure images are non blocking at least now. Okay. Yeah, they may, they may have been the certainly,

So the solution to the HTTP request thing, though, it talking about old stuff. Do you remember sprite sheets?

we would generate one file with like, all the icons, all the hover states, and we would have right one image, so that instead of requesting 20 different images in our style sheet, we request the one. And based on what you were showing, you would position that as a background. So you would say he likes that, you know, this is, you know, a an icon or a div or whatever, that’s 48 by 48 pixels, and the background is positioned, you know, 20, top and 60, left, right, then I hover, you would change it to, to 68. down and whatever. Right. That’s how you handled your so you were talking earlier about when you did hover states we do with JavaScript on mouse over on all that. So that evolved in CSS, and we just use the hover state, the hover pseudo selector and CSS and had a sprite sheet that moving around.

Yeah, yeah, you would put a script block in your head. Yeah. And reference all those images to force the HTTP or was because remember, we were saying about Yeah, JavaScript, especially before we had different a sink and all that JavaScript used to be a blocking action. So right would go through, and it would fetch all those images. And it would hold up the whole page, just so you didn’t have to wait on a hover state talking about robbing Peter to pay Paul.

yeah, it made a lot more of a difference than it makes now. But that’s no reason not to be efficient. And we’ve seen this fight. And we’ve argued about it in web development, in particular, for ages. It used to be a computing problem, like when back in the days of, you know, 386 is for at sixes are Apple to ease even you know, back when people were first getting started at their first computer, and they’re wanting to write a program, but you only had eight kilobytes of memory, you know, a kilobyte of l one cache and you’re trying to figure out how do I store all this and keep it running? You know, it forced you to optimize and be efficient. We’ve kind of got a curse of riches with all the computing power we have. Yeah, there’s not a lot of consequence to writing bad JavaScript or loading big images. I’ve got a fiber connection in my house now I’ve got a gigabit connection.

I don’t wait on images ever for the most part, Kansas what the fight Yeah, I know, right?

It’s cheaper than my cable was.

Join the list. So let’s talk about all the different types of images now kind of roll through what these are and where they’re useful. The the big sort of OG file format is as Aaron would say, the wife the wife that OJ if I have to have to use like a

eight bit true eight bit 256 color palette can be any 256 colors that are, you know, hex represent or represent double basically. So think about like Nintendo, basically. Right, it has the Nintendo palette. Yeah. But the other big thing. And the thing that I have never fully understood about gifts is that they, and if you tell me It’s Jeff, I will fight you. If you tell me it’s jive. I’m going to laugh and call you Aaron. that it supports animations. Yeah. And it’s one of the oldest image formats that’s still in use today outside of bit maps. And we’re not going to talk about bit maps, don’t worry about them.

making up names right now.

At any rate, this is still widely used format for the most part. Not good for photos, obviously, because of that limited color palette, but great for icons. Great if you need transparency, but don’t need a true alpha. Which means like it, it lets you have no pixels basically. So thing Yeah, happened behind it or anything up. But it doesn’t support like fading those right? It’s either it’s either on or off black or or not black.

I do remember Wolfenstein? So the third

Yeah. Which unfortunately, hurts the gift usability, you know, as a transparency tool, because it makes it feel very icky. Unless the thing you’re showing actually does have a very hard edge like an icon. You know, if you’re trying to do something that, like, let’s say, it’s a picture of the sun, you could make a picture of the Sun pretty nice and a gift because it’s yellows, reds, oranges, and you can have 256 grades of those colors that look relatively good. But at the end judges, it’s going to look very bad. Because if you think about how the edge of the Sun looks, the fuzzy, you know, burning of hydrogen, the occasional solar flare, whatever, like it gives it that little bit of not normal edge, that’s not going to show well with with it. Yeah, so but still useful small file size, is this, the big reason that it works really well, the the compression on it is incredibly good. And, and I mean, arguably, there are better, you know, there’s better compression out there. But it’s still very good for what it is and still very useful.

So we mentioned that that the the next big evolution of of image formats came in 1992. When JPG was released. jpg was a huge leap ahead because it was an eight bit image format. Yeah, now I say that. And I said, give his eight bit. And if you’re listening to us, and you’re thinking I’m crazy, you are correct, but I’m not wrong. So JPG is actually 24 bit. People will refer to it both ways. And the reason that is gift is a true eight bit file format. It supports up to 256 or 255 and an alpha. And that’s it for the whole power of the whole image. Right. The reason that gets confused in JPEG is because it’s it’s eight bit per pixel, right for its RGB value. So it’s, it’s eight bit nominal per channel, but it’s 24 bit as a consequence, because it’s eight times RGB. Right? That’s super weird. I know, don’t get too hung up on it. There’s also if you really want to get confused, technically there is a update to the JPEG algorithms that supports 12 bit per channel. But that’s I don’t even know what support is like for that in browsers if it is or not, or if it converts it both GIFs and JPG or lossy, you’ll hear that word thrown around a lot. There’s last lyst and lossy bit maps I mentioned earlier bit maps are lossless right. tiffs are lossless, you’ll see TIFF sometimes like in your operating system, you won’t see them on websites because of that they’re lossless, which means a big image is a huge file size. Right? No compression, every single pixels color is defined in its full value. And that’s it.

yet, you don’t want to manipulate and interpreted file. Right? That’s why you have photographers will talk a lot about shooting in raw and editing and raw and then you output that because if I edit a JPEG file, it’s like mp3 is right. Yeah, and mp3 is a lossy audio format, as opposed to flak flak is a lossless audio format. So mp3 starts looking at the frequency response of the file and says, oh, there’s all these frequencies, the human ear really can’t hear anything. So we’re going to throw all those out and make it around these ones off to roughly this right. And by and large, that’s fine like that, you can get away with that for most things. But if I’m the editor, if I’m the source, I may want to take those really low values and boost them or something like that, and bring them into the range. If I edit the mp3, that stuff’s already gone, and bring it back. You can’t really remaster

So in in the world of images like JPEG pings, gifs anything that’s that’s a lossy format, especially when you get into blacks and whites is where you really see this, blacks and whites can have a high dynamic range. But after you’ve saved that file, that’s where you’re going to see a lot of compression, and you’re going to lose that color.

just by the slightest bit, you’ll notice it.

Yeah. So JPEG eight, it’s roughly a 10 to one compression ratio, give or take. So if you were comparing a JPEG to a bitmap of the same image, it’s basically 10 kilobytes versus 100 kilobytes, give org, right? There’s a lot of things that influenced that number. The other thing to think about is, anytime you’re working, and this is with pigs, it’s true with JP eggs anywhere, you’ve got lossy compression, but JPG is in particular, because they are a big fan of like the quality level as a means of limiting how aggressively it compresses it. If you work in Photoshop, or something like that, you’ll usually get asked that question when you’re saving it. Well, what quality level do you want? Now I think Photoshop abstracts that out to like a 12, step like quality one through 12. But really, it’s like a zero to 100 kind of situation. And so it can be interesting balancing, because what you’ll find is the human eye is very forgiving. It’s like the human error with industries, you actually can compress these things way down, and usually still have it look okay,

is my default, I started 75 and go from there for everything for

that’s probably true. A scene on the beach with people running around. And I’m sure colorful umbrellas like this. Again, it’s all about data. It’s a data compression thing. If most of your color is blacks and graves, it’s going to be able to compress it much more efficiently than an image a ton of detail and colors and everything. So if you had like,

So we move into pings. Now pings are a newer invention. Don’t I didn’t look up when they released. But I know it’s been in what probably the last 10 years.

Yeah, there we go. Yeah, so yeah, that’s 16 years ago. Ping supports multiple bit depth to their pink eight, there’s pink 24, which is basically a JPEG there’s pink 32, pink 48. And general like you they most people find that a pink eight of the same image that you have of a GIF is usually going to give you like 10 to 30% size savings. Yeah, now this becomes less true as you go up in quality. Again, like if you go to pink 32. That image, if you compare it to a JPEG will always be bigger because you’re storing more data. And so it’s a little bit more needy, I guess in terms of understanding how to tweak it and how to get the best performance out of it, it is better in most cases, it’s usually up to 30% smaller, in truly optimized situations, it’s generally viewed as better for anything that’s photo related that just the general compression is better. So you won’t see as many artifacts, you won’t see like any, like weird fragments of stuff around the edges of colors and things and like chromatic aberrations and stuff like that.

Yeah. And so transparency is an absolute must have if you want to go with something complex, and something has fuzzy edges. But alpha is only supported in the 32 bit format of the pain. So as a consequence, you are already saving that image in a standard higher than JPEG. So right now, and if you’ve ever looked at it, like transparent PNG, these are huge, like the file size, Autumn is enormous. And so you want to use them very sparingly. Like you need to make sure that you’re using it for the right use case and paying attention because it will trap you very quickly, especially from the standpoint of automated systems. And we’re going to talk about this in a minute. The when you get into tools that like save additional versions of an image for you like resized, if whatever you’re using, or whatever that tool is using to resize and optimize that image, there are many times where it’s a it creates a smaller file that is bigger and file size because it doesn’t know and it can’t make an intelligent decision about how to adjust right and and ping is particularly bad about that I found. Yeah, there are two more formats. One is SVG. svg is the vector. So up until now gifs, jpg, or PNG, those are all raster formats. They’re all designed for imagery for photos for art, right for things that are representative of a true creation. So the G’s are designed to be small, they’re designed to be very crisp all the way around. They scale perfectly, regardless of the size. And they are entirely built with math. Yeah, they are they are a mathematical representation of imagery, as opposed to a pixel representation of imagery.

an SVG for that very reason. If you’ve got your business logo, like I’ve got the the drunken UX, little emblem. And if I want to put that on a sticker that’s three inches by three inches, and then put it on a shirt that’s 12 inches by 12 inches, if I stretch that up in raster from the three inch is going to be all blurry and ugly and nasty looking. But with with raster graphics, I just grabbed the corner, stretch it up or tell illustrator I need this to come out 12 inches, and it looks perfect. Because it just scales the math up. Now, in my opinion, and somebody may disagree with me on this, and then you’re perfectly Welcome to I don’t find vector easy to work in. But I’m also not a designer, and I’m just bad at art in general, I can use Photoshop, like I get Photoshop, you know, it’s very fuzzy feeling like it’s it. It’s more of a, I guess, forgiving medium. When you’re working in Illustrator or escape I mentioned earlier, Escape is an open source vector software that you can use, you know, you’re having to define those lines and shapes and all of that. And it it gets very funky, especially when you’re overlaying stuff or stretching things. It’s very good for so much stuff, you know, making text flow around the funky shape or something like that, like that’s fantastic tools for all of it. I just find it very difficult to use because my brain doesn’t operate in that space. Right? It’s very, if you look at an SVG, it’s also very different when you look if you try to open up a JPEG in a text editor, it just looks like garbage. Right? Open up SVG in a text editor. It looks like code. Yes. Yeah, yeah. SVGSR, just an XML document Exactly. Like HTML is an XML document. Right? So it is editable by a human. I don’t know of anybody who actually writes SVG from code, but I’m sure somebody does.

core. Yeah, that’s a good way to think about it. Though place where this comes in. Well, obviously, we’ve mentioned logos, things like that. And get out of the idea of thing shirts and stickers, think about it your mobile device, versus a retina display, MacBook versus a two K monitor. css pixels is a thing versus physical pixels, because with like a retina displays these high density displays, they started using Oh, right virtual pixel size, because you want to load higher resolution imagery, even though it’s physically shown at the same size, because they can make it clear, right? SVG has just always solved that problem, because it just scale it scales perfectly regardless. And so it takes some of that work out as well, if you’re if you’re thinking about that, but if you are doing things in JPEG, and you’re designing for, you know, an iPhone or a Mac Book, something where there’s high resolution, you’ll see this like two X, you’ll see that a lot as a suffix on images to x as a means of defining those images. And they’re exactly they’re twice the size. Exactly right. Now, the reason this is good, though, then the reason this is beneficial to web developers is usually SP G’s are incredibly tiny. Yes, they they be gifts, they beat PNG at across the board for simple imagery, they make great logos, because again, that means they scale perfectly everywhere. And they’re also great for if you’re doing any kind of build process. So let’s say you’re building web components or style components, or if you’re doing something CSS and JS, or you’re just doing plain CSS, you can get your SV GS built into that build process, so that you don’t have a folder with 300 j pegs in it. Right, they can just be compiled into the JavaScript or into the CSS as data strings.

kinda like a sprite sheet. but different. Yeah, but the idea is somewhat similar. Unknown Speaker Yeah, more like an

accordion index almost.

And this is also because they are what we call data Ura. friendly. So if you’ve ever seen and CSS usually, like a background image, rather than using a URL reference, they’ll use a data UI reference. And it’s,

Yeah, they code base 64, which usually for SVG, makes that string very short, technically, jpg, gifs, PNG, they can all do that, too. But the problem is, those files are usually so big, that even base 64 encoding them and cramming them into CSS makes the CSS a whole lot bigger. Whereas the SVG genuinely gets smaller doing that, it’s Now the one thing that you want to make sure you do, if you use SVG is make sure you’re optimizing them and not just pulling them straight out illustrator escape, because as an XML document, they tend to have a lot of metadata stored in them, they tend to have a lot of extra information from the editor stored in them. And there’s some good tools SVGOSVG optimize is a good build chain tool that can go through and it strips all that out, it optimizes the the path, math and all this and make some smaller, and some things like if you’re doing something like style components, or, you know, if you’re working in react with Gutenberg and WordPress, you have to have your SVG formatted a certain way. So you do have to be aware of some of that SVG is kind of the way all that’s going anything icon based or anything, because again, in this idea of reducing the number of HTTP requests, if your website or web app has 100 icons in it, and you can just dump those in your CSS file as upgrading them each individual files, then it’s one request for the CSS file, as opposed to one request for the CSS file and 100 requests for all these SVG files.

yeah, but still also benefits from Jesus and all of that. The last image format I’m going to talk about very briefly, just to make you aware of it is web P. Now web p truly is the new guy on the block. It came out in 2010. It was the format that Google came out and was pushing really hard. Isn’t this a video format? web M is the video version. Okay, yeah, right. Now, web m, I think has found a little bit better adoption. As a video format, though. It’s still spotty. From a support standpoint. Yeah, web P is arguably better than all the other image formats in its class as like raster. So not talking about SVGS. But all the other ones. They claim 25 to 34% savings and five size, image quality at that same price point, so to speak, is better. But the problem is no, I 11 support, because it’s I 11. And it’s not going to go back and add support. Safari doesn’t support it. Hmm. And so you end up what you have

Yeah. The solution A lot of people have found is to use a, a picture element within source elements inside it. And they’ll define a web p image if that’s what your browser supports, otherwise, it will fail to a JPEG.

The thing is, that’s a lot of extra implementation work, if you want to do that, and you’re now having to save that image twice in two different formats. If you’re willing to do that work, to get that support, that’s fantastic. And you can reap the benefits, you still don’t get I 11 support regardless, it’s just it is a matter of extra work. If you’re interested in it, I’m going to link an article up from Free Code Camp that explains how you can implement web P and some of this stuff, like using the picture source combination. Nice. I don’t recommend it only because I, I it makes me think of Mean Girls. It’s fetch.

Google it’s just not Unknown Speaker it’s not gonna happen.

Okay, let’s talk about resources, and then tools and get the hell out of here. Resource wise, if you need images for your website, because we all run across, especially if you do any blog writing or anything like that, or you’re, you know, you’re doing a image show or a feature showcase. And you want happy looking smiling people. Do me a favor, and please don’t go steal pictures. Yes. Don’t do that. That makes you an asshole. Unknown Speaker Yes.

There are a lot of really good resources to get really good photography, and it’s free. And you are allowed to use it. So go use those. One of my favorites is and splash on the splash calm. If you have been following the drunken UX podcast, most of our cover art comes from and splash. Cool, the image quality Wow, is incredible. You had download stuff in like, you know 12 megapixel sighs it’s you know, you can get fully uncompressed imagery. It’s all public domain open licensed. Somewhere, I may get that wrong. And I apologize if I get the actual wording wrong. It’s open licensed for sure. I think it’s all public domain, meaning you don’t have to credit the people. I will however, say it is very nice if you do that. And it is a appreciate it. If you do that we make sure on like on on the imagery I when I load it into WordPress, I make sure to include a little byline on it. But splash is fantastic. They’ve got a great search, it’s usually very accurate. The quality is very good. And I’ll tell you right now, even if you don’t know what the splash is, I guarantee 100% you’ve seen images from their website somewhere.

And people donate them for you. So go go check them out, go check out flicker Commons. There’s a site it’s it’s flickr.com slash Commons. Or you can go to Flickr and go to the search. And you can change the license type to Creative Commons and find images that you may have to give attribution. That may not be available for commercial use, but you can filter you can say I need images for commercial use. Usually, it’ll be like a, if you aren’t familiar with Creative Commons, it’s basically a extension of copyright that lets you to fine. I let people use my stuff or I let people use my stuff when they have to attribute me or they let people use my stuff to make money. Whatever.

canned, you know, versions of that license that you can pick from, but you can go there, look up the images. Worst case scenario, you end up having to make sure you have a credit for it. But let’s face it, that’s the least you can do. You talked about this a while ago, right? Different licensing schemes. Oh, yeah. With? Yeah. With the open source stuff.

Wikimedia Commons is another resource. It’s very similar in nature. I think most everything there is a public domain or open licensed Magdalen. Magdalene was a new one to me, I haven’t used it before, but it’s it’s Magdalen co will have a link to it as well, another photo service. And worst case scenario, go to the federal government go to federal government websites, because most all of the imagery they put up is all public domain. Like if you go to that and go to the photo archives, NASA, everything they put up is public domain, because it’s the federal government, it’s all you’ve already paid for it basically.

and a lot of that, especially the NASA stuff, like I’m a big fan of the NASA stuff, and I like making like space wallpapers and stuff. So being able to go get humble stuff is fantastic. Just make sure wherever you go, always try to give credit, even if you don’t have to, it is nice to give credit. When when you’re using somebody stuff. always double check licensing, this is an important one too. And that’s why I said earlier, like, if I’m confusing public domain and open license, there, they function very similar, but they aren’t the same.

public domain way people truly free. Yeah, free beer and speech.

Yet, notice that I did not say use Google image search as resources. That is not one of the tools you use.

you. Just because something is copyrighted doesn’t mean you get to use it and say it’s copyrighted by the person, you can’t do that.

owner in writing verse, ideally, yes,

And Creative Commons is great. But there are a lot of combinations of those attributes by NZSA, all those things. So make sure if you’re looking at using a creative commons ish image, what the license is that it’s released under? Especially the NC version, no commercial.

yeah, no derivative is another important one,

Yeah, that’s, that is another important one. It’s take the time and and look, it really, this isn’t legal ease, it doesn’t take a lawyer, it just takes you spending 15 seconds to make sure that what you’re using is right. The thing about copyright is shit rolls downhill. So in a similar way, like royalty free is not the same as unlicensed, right? You’ll see a lot of stuff. And you see this a lot in the audio space. If you look up royalty free music, and you’ll see the songs and the song says yeah, for the buy it for $9. And then you’re like, But wait, it says royalty free? Why do I have to pay for it? royalty free and unlicensed art the same thing? royalties are just what you have to play every time it’s you. Right, right. And if you pay for it, then you have unlimited use of it in most cases. But like it, what happens is, let’s say a sound effects library has 100. Or let’s let’s use an appropriate deal. I’m buying a photo library of wildlife, right, let’s say, and everything in that album is $100. But once I have it, I can use all of it or none of it as much as I want. I don’t have to worry about all, you know, individual attribution or anything at that point. I don’t have to put a byline on it. I don’t have to do anything, buy stuff to pay for it. Because I still have to have that license to use it right? If I go toward that photo album, and then proceed to use it on my website. And a photo owner says, Hey, I saw you’re using my photo. Which site did you end up buying it off of? And you can’t answer that question. Right, you can be held liable for copyright infringement, because what has happened is the company that puts those libraries together, paid the copyright holder for their license, to in turn, sell it quote unquote, royalty free, that does not mean it is now public domain. Right. That’s where this gets a little hairy. But that’s why I say it’s important. I say shit rolls downhill. If, if you use let’s say a company a hires you to build a website. So you go out and you find some images to put in that are placeholders, they aren’t meant to stay there. And you just get placeholders and put them in. If they decided to launch that site, and they don’t bother replacing those images, and you didn’t have permission to use them to begin with. You didn’t care because you’re like, well, nobody’s done. I’m just it’s clearly it’s just demonstrative, I’m going to take them out whatever, you know, the harm to the content author at that point is, you know, nothing. Though, technically still copyright infringement. The owner of those images may see that, and they get to sue the business, because the businesses displaying the business is the terminal point for the copyright infringement. But that business can then turn around and sue you as the person they hired, they can sue you for the damages that they incurred. And then if you hired somebody to get you those images, it’d be your job to go Sue that person. For their damages, it rolls downhill. And I say this as somebody who has been in this fight with an organization that stole my pictures, displayed them in their business, but they had hired another company to procure images for them, I don’t like it’s not my job, go after the chain and figure out where the buck stops, I get right to the first person, but then that those folks can then go on now, there’s a whole bunch of contracts yet that gets involved liability statements, and all of this that come into play. But that’s the basic premise. So I say this, just to make sure people understand. Don’t assume that you are insulated from copyright infringement, because it’s not your site.

and keep a record of it. I know, it’s a lot of extra work and a lot of hassle, especially if you go through a lot of imagery, but keep a record of it. That’s why I go back to what I say when I upload photos from and splash into WordPress, I make sure in in the office text area, the description area, one of those, that I include the byline and everything in it. So I always have that reference point. So if somebody comes back and says, Hey, that that image was stolen from me, I can say, Yeah, but here’s where I got it from. Here’s the attribution. Here’s, you know, when I got it, and at that point, and to like, I’m not going to use that as a defense. If that’s the case, I’m going to take it down and whatever, if they want to sue me. Oh, right. That’s fine. We’ll have that fight. But at that point, I at least have a defense where I can say, Look, I’m getting it from

Yeah, I was acting in good faith. I was getting it from what I thought was a reputable source. You know, if the if that user at that point was copying something or whatever, it’s it is hard to know. And it doesn’t happen often. That’s, you know, it is fairly rare. But the way the best way around this guys is and gals is to use placeholders and like genuine placeholders and I’ve got to write favorites. My all time favorite is Phil Murray.

Yeah, it’s it’s just random pictures of Bill Murray.

After everything we just talked about now I have to question whether or not I can use Fillmore.

I’m going to presume that Bill Murray doesn’t care enough to come after folks for this. Right? Here’s the thing, here’s the nice thing about if you’re using it for development environments, sort of show something to a client, they’re not going to launch the site with Bill Murray’s face all over. I would also encourages them to remove those images and put their actual stuff in the place. And all you have to do is just use put in the URL Phil murray.com, slash IK image 200 slash 300. And you get a 200. By 300. Bill Murray image. Yeah, place kit is very similar. Place kitten just does the same thing with kitten images. And there is another one, I don’t know it off top of my head that will do placeholder images that just put a gray box with a number

com literally placeholder.com. Okay.

and usually text overlays to it. Yeah, and so you can have like, this is the feature product image or the feature blog head or whatever, like, you can put little notations on that also say what that image should be of which can be used for content people. From a tool standpoint, at the end of the day, what do you do with all this information? Because obviously, author and what you want to author is it Photoshop is an escape whatever, you use what feels good to use the tools, you want to use a Wacom, you want to use a iPad Pro? Do you want to use just your mouse, whatever. But to make sure you’re doing well. And keep in mind, from an optimization standpoint, there’s gonna be a lot of stuff we haven’t referenced in this episode. But there are a bunch of links to some optimization articles in the show notes at Duncan UX. com. So go check those out, those will be very helpful. But Chrome and Firefox, and yes, ie, but who cares? Chrome and Firefox have a great network Inspector, if you go in there, right click Inspect Element, and then click the Network tab. You can see everything loading on a page. And you can filter that down to just images and see how much you know is the payload of your site. Belt, my whole site is a megabyte and images are 238 kilobytes of that. And then it’s up to you to decide. Can I optimize that? Is it worth itemizing? If I can get that 238, down to 20? Hell yeah, that’s worth optimizing. If I can get that 238, down the 200. And my sites only Amai. Yeah, maybe not the highest priority, right. But those are great tools. It gives you a good idea of what’s loading, it lets you compare yourself to other sites real easily. Go load any cycle load, CNN, go load Fox News, go load, eBay, whatever. And compare, you know, to see how they go. There are a ton of like performance checking sites, Google Page Speed is the obvious one. But there are a bunch of others, whether that’s paying them, whether that’s optimize, optimize, Lee, whatever it is. But they all do basically the same thing. You give them your URL, they’ll go check your site and tell you the same thing. Network inspector is basically telling you, usually some of them like Page Speed, and some of these in paying them, they will also give you advice, or they will point out like specific like problem images sometimes like they, they see like a bit depth on and the image doesn’t look like it needs it. Middle, say something like you could save Oh, nice, you could save 20 kilobytes, compressing this image, which is kind of cool. That’s really cool. If you just Google like page optimization scanner, or Page Speed scanner, checker or whatever, you’re going to get a dozen of these tools. And they’re all pretty much the same. They’re pretty good. They use very similar algorithms to check stuff will link the Page Speed scanner? Let’s see what else if you’re an SVG person, and you want to get all your SVG is in one place, there are a few packages. One of the better ones is Gulp SVG, CSS.

So it You pointed in your Gulp config, if you’re using Gulp as a build pipeline tool, you set it up to utilize this in your pipe, you pipe your you’re directory into it, you say here’s my my SVG directory, and it’ll pull everything in. It’ll, in theory, it, it does some optimization, it’s a it’s sort of some light hand optimization, there’s another SSVGO package that you can use as well that does some heavier optimization. Little riskier, because, you know, it may take something out you need always check this stuff afterwards, obviously, but it’ll it reads in a directory of SV, geez, and then compresses them into one CSS file you can reference. So that’s good, you know, for if you do any kind of build, you know, JavaScript applications or anything like that, you want to get all those SP G’s in one place, one reference point, utilize classes and go like that’s the best way.

If you want to do it just from an application side, PNG crush is one that most people have ran into at some point. It’s command line tool. There’s also a website that I think is just PNG, crush calm. And I think it’ll actually do JPG eggs and anything else as well. But it’ll do things like one of my favorite deals with it is, like, if you’ve got a png 32 it can crush and convert it into a PNGH. If it thinks that it can do that and still maintain quality levels and stuff. It’s really good at finding all of that extra space, right?

if you’re a Windows user, I don’t know if this actually I’m I use Windows I develop in Linux, but most of this stuff is my only have Photoshop. So I do that in Windows. I’ve used a tool called IR fan view. It’s an image viewer, but it’s really high powered, and it has some really great bulk conversion resources in it. So you can point it out a directory and say, Hey, you know, here’s this folder of JPEG eggs, I want you to rename them, resize them, scale them down to 70%. Quality and you know, there’s there are a ton like it’s actually a very cool tool when you dig into it. Very good though. Photoshop people, you literally have a tool in Photoshop called safer web. I know Photoshop labels it as a legacy feature now, but it’s still there. And the reason I really like it is that if you go into it, if you go to save an image for web, it gives you a you can do it too. We’re a four up view. Yeah, so it’s handy. Yeah, as we’re talking about all this stuff, and about optimization and compression and lossy algorithms and all of this. I said early on that one of JPEG problems is finding that sweet spot. And that sweet spot ranges, it’s not like just set it to 75 and forget it 75% quality for one image may be great. But another image, you may be able to go down to 20%. And it still would look fine, right? So the two up view in Photoshop lets you say hey, I’m saving this for web, here’s the you know the settings I want at 50% quality, show me the two of you and you can see the before and after and make a decision right there before you’ve saved it as to whether or not you need to scale it up or down or turn the quality up or down or whatever. That’s great. All these other tools PNG crush our fan view image Optum any of these, you have to run everything through the process, then go look at them and pull them up side by side, right annually everything so Photoshop kind of helps with that.

down, the very last tool that I’ll mention is not an image tool at all. Get yourself a CDN. If you can’t make your images smaller, or you’re not comfortable making them smaller, at least you can make them faster. Yeah, get them closer to the user. If you can’t get them smaller bye using a CDN, you get the images cached on fast machines at nodes all over the world. So that, you know if it’s a user in Russia, and you’re in Seattle, you know, in theory, maybe that is coming from a server closer to them. So at least the transfer speed is quicker, if not the actual image being smaller. When you get when you when milliseconds matter. And you’re dealing with like hundreds of miles or even thousands of miles, it makes a difference.

you know what I’m looking at this now as you’re talking about it, we used to use a service very, very similar to this, and I can’t think of the name now. They served as a CDN, they also have something we haven’t talked about at all was responsive imagery, which is a whole other, you know, whole other ballgame. But they handled that. So you would use the image references and put a little piece of JavaScript on the page. And with that, it would then reference the right image size for the device you were on, which was kind of cool, right? So it’s, you know, not lazy loading necessarily, but a similar concept geared towards giving mobile devices, smaller data packages. And that’s like, that’s another one that some of the articles that will have in the show notes, we’ll get into a little bit of that like serving up different images to mobile devices and stuff. And you know, treating that as more scarce resource. So, right. All the more reasons go visit the website. Folks, I hope that this was useful. I know that there are millions you out there that this is rudimentary elementary stuff, but not all of you are like that many of you are learning many of you are developers, but not designers or designers, but not developers. So I hope that you found this helpful. Give us your tips, let us know what you do to optimize your images, or what you found useful, what tools you use, especially if you’ve got a tool or a process that you find really helpful for getting really well optimized images, I would love to hear about them, let us know, we’re going to take a quick break and be right back in just a few seconds. This episode of the drunken UX podcast is brought to you buy something really cool. It’s an alternative to.com. It’s the dot design domain name. I’m a big fan of interesting unique website names. So if you’re a designer, and you thought of the perfect name for your website, and it isn’t available under.com check out dot design, chances are the domain name you want is waiting for you and the Port been.com and use the coupon code drunken UX on the checkout page to get our free designed domain name for your website. Face it, there are no good coms left years down the road, we’re going to care about cool, nice URLs that are relevant to the website you’re going to. And the fact that there’s so many to these to choose from, you really can get a domain name that’s right for you, and right for your business. dot design is a great one, visit Portland. com now and use the coupon code drunken UX at checkout and literally get a year of a dot design domain name for free. It’s bundled with free email hosting who is privacy and SSL service. That’s a lot for nothing. forget.com design is widely used. There’s Airbnb design, Facebook dot design, Uber design, Adobe design, and so many more. Google doesn’t care. It functions the same way as a.com or.org. It’s just more interesting. It’s better branding. It looks great on resumes or business cards, and it looks awesome on email addresses. Design reflects what you do as a designer. Did we mention it’s free and includes a year of email hosting, who has privacy, and SSL certs and all of that stuff. Just go to pork bun.com and use coupon code drunken UX at checkout.

that their logo is actually very satisfying. Then if you go check it out. Oh, really? I mean, it’s a portable, right? It means there’s really great things inside.

Right, the logo is just the button. Just don’t. Don’t tell that cute little pig that I have half a hog down in my freezer down in the basement right now. Pig serial killer.

Did I want to go watch that video you mentioned now of oh my gosh,

So cool. Everybody, we appreciate you stopping by, let us know. Give us your resources, your tools, your advice, your criticisms, complaints, or anything about the show. If you want to tell something nice, that’s also great. Go click the like button, subscribe button and whatever app that you’re listening to us and leave us a rating or review. That’s always appreciated. I know that it takes a second of your day. But it makes a huge difference to us that that that happens. And otherwise you can find us on twitter or facebook at slash drunken UX or Instagram slash drunken UX podcast. Otherwise, you know, as you’re sitting there tomorrow and and you’re thinking about images, and you’re thinking about what you can do to make your website better or faster or more responsive, whether they’re on mobile devices or gigabit fiber, or that old school teleprompter style, whatever it is Aaron has at 100 megabits a second My God. Dark Ages is what that is. I’m trying to think about what would be the best thing to leave you with and the only thing I can tell you is to keep your personas close and your users closer, folks on a CDN on a CDN. Bye bye