If you’ve ever been confused about which image format is the right tool for a given job, hopefully we can help clear the air. Not only will you learn the difference between a JPG and an SVG, you’ll get to hear us mispronounce “GIF” while sharing tools and tips to help you optimize images for your site, and include them in your build process.

Followup Resources

Transcript

The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

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?

Is that from the store decorations? pre Christmas, I think right? That’s

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

what else? What’s your design gonna be?

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

is it

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

you should check us out on yield Twitter, and your good friend Facebook both.com, slash Trek and UX. And on that Instagram where you cannot find Fienen under the username Fienen. But you will find us as drunken UX podcast. And then also connect with us on slack at drinking ux.com slash slack and come and tell us how great we are or how awesome we are to everyone you’re feeling. Right now my camera image looks like my face is totally eclipsed by the microphone and all you see is like my forehead and hair. On top of the microphone.

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,

I’ve got I’ve got something similar. I’ve got vodka. I’ve been pre gaming. So I’m like three drinks and I’ve got vodka with you know the stuff from polar. It’s called half and half. It’s like grapefruit and

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

cream based thing if you go to the grocery store. That’s from the public filter company. Anyways, it mixed with vodka is tasty.

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

Yes. The weather today. I thought

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?

It’s like inflammable and

Flammable.

Yeah, yeah. inflammable and what’s the other one? But oh, just just flammable. Yeah, yeah.

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.

It’s It’s funny how I mean images have been a kind of an integral part of like a website experience for a long time, like mid 90s onwards. And it’s funny how much like stuff has kind of been brought into current times, but was like, from the limitations of what we had back in the 90s.

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,

right. So

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.

These all seem to be very opinionated. And I mean that I’m totally not in a bad way. But like having, having an opinionated framework is nice, because it’s decisions are already made for you. And so you can focus more on the creating the content itself. And I’m looking at code guide co right now. And they have it has a listing of like, you know, the syntax and language attribute and character encoding. And then it has things like, declaration order, don’t use import, media query placement. It’s all stuff like, since kind of like micromanaging your stuff. But that’s sort of what it’s for.

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.

So here’s here’s a good example, the HTML syntax node for code guide co has don’t capitalize tags, including the doc type. You soft tabs have two spaces, the only way to guarantee code renders the same in any environment. nested elements should be indebted once parentheses, two spaces, always use double quotes, never single quotes on attributes. Don’t include a trailing slash and self closing elements, the html5 specs as are optional. Don’t omit closing tags, Eg slash Li, body. So these are all like, it’s just kind of like rules to follow. And I don’t think I’m sure a lot of these converge on similar rules, but I don’t think any one of them is necessarily like, the right way. Overall, it’s just you pick one that works for you, and then you use it.

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

my last job we used Robocop, which is a Ruby gem that is very opinionated about Ruby code style issues, and it covers some other things too. But mainly, it’s like, you forgot to put a space here, or you forgot to use double quotes or you forgot to indent this properly. It’s really picky. But at the same time when you run it, it ensures that everyone’s code looks more or less similar, or more or less the same. Yeah, it’s pretty nice.

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

if you have a a way of doing code style enforcement, that you or your team uses, like like, Robocop I’m sure there are others. Kind of like winning, but for code style. I’d like to know more about those.

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

I go, I, I used to use, I go way back, I used all this photo styler, and how this page maker and then I used Photoshop 3.0. And then up until I think six or seven, or CS to whatever that was. And then I switched to GIMP shortly after that, or it’s called something else. Now I got forked, but it’s the new it’s the open source Photoshop. So very familiar with them. Love them.

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

I have a little bit. I don’t do a lot with vector art. I mean, I’ve done a little bit with it, but I tend to stick with raster images.

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.

Yeah, I can I can feel that.

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.

Yeah, there’s i. So I do a little bit of like recreational art and stuff. physical media. Generally. I do have a Wacom tablet. And that’s fun to play with sometimes Oh, yeah. I like watching time lapses of people doing spit speed paints. So like, or spit painting. Sometimes it’s called there was a Facebook group I used to be in. And they’d put three or four topics each day. And you could you pick one or more of them a you take 30 minutes to draw it. And 30 minutes seems like, you know, not even any time, but the stuff some of these people could do in 30 minutes, let’s just fucking amazing. And they would do time they put time lapse videos, or it would compress it down to like a five minute video. And you just watch them. And when you watch it happen, it makes total sense. They just don’t make any mistakes. That’s what it is they like they draw the lines. And it just comes to life on the thing where when I do it, I’m like, oh, I’ll try this. And it’s like, no, that’s not right.

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

it’s the old style. Old Style Wacom that was handed down to me from an artist friend, the one the one that actually uses a more sane eight by 16 into us, I think it’s like

a foot and a half by

the other one. I don’t use it because I don’t have the desk space for that. But

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

the thing I really love about it is the stylist has those buttons on it. And so like, and you can map them to whatever you want. So like I’ll have the one that’s white by my pointer finger. So if I, if it’s a rocker and have a rocket forwards, it switches to the grab, grab command, so I can rock forwards and then pull, and then we’ll move around the image. And if I rock backwards, I can make it switch to the color picker. And then I can use the reverse of it for the eraser, and it’s switched to the razor tool. And then I have like buttons on the tablet itself map to different, like brush size and other stuff.

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

know, but if I mean, like, yeah, they’re great products.

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.

Yeah. Wait, wait, wait, wait. So for the younger listeners are those who are newer to develop web development, what we had to do in the 90s and the early 2000s. If you wanted to have a rollover thing where you hover over a button and it changes colors, something not only did you have to have two images, for like the on state and off state, the idea is JavaScript to do it with on mouse over. Yeah, cuz like even though we had some ss, at some point, it didn’t have the hover pseudo class.

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

the newer graphic designers are having that kind of stuff incorporated into their education. And so like the, the new school graphic designers, not literally the new school, like art school. But modern graphic designers do things like SVG, and vector art and other stuff and they know some CSS to add the CSS animation.

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.

Yeah, some hella drop shadow even.

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

pixels, each pixel has a color. And it looks like something when you zoom out far enough.

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,

restaurants images are generally look more photorealistic. And they are better with complex gradients. vectors can do gradients if they’re simple. But those are better for like, I call them like art images, like logos and things with like more clear cut edges and simple designs.

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.

Oh, you know, what a good comparison is a raster images like a photograph. And a vector art is like a very complicated screen print. Like you, you have to have defined the shapes, each one can color, but you can layer them, you can create a complicated looking image. But it’s not quite the same as what a photo like you can’t make a photograph using screen printing.

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.

I site that I was just working on the other day, had a video, like on the on the homepage, and the video was just an mp4. Maybe like a 32nd loop. And but it was 22 megabytes. Yeah, 2022 megs. Um, it didn’t. Great, we impact load time, but there was just a little bit of stuttering in the beginning, we optimized it and got it down to six megabytes. And the crazy thing about that was 22 megabytes is roughly the size of the doom to game files. And six megabytes is roughly the size of the doom one game files.

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.

So wait, in this case, actually, due to the next one first.

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.

So So in all three of these cases, no, the first one at base camp, you could argue that remaining 200 something kilobytes, probably a mixture of like CSS, JavaScript, and HTML and 100%. Yeah, yeah.

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.

Yeah. Oh, yeah. That’s super small. Like I

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.

Okay, what’s the remainder, then? What’s the 86%? Because we’re not putting video in there.

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.

Yeah. I mean, sure. But Wow, what Holy crap,

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

it’s probably a safe bet, having having a percentage around 50%. It’s probably a good thing. Like, I mean, if you want to have some images, because they are, say like having, like 500 kilobytes and images, maybe say 10 images, 50 kilobytes each, would be better than having 5010 kilobyte JavaScript files, because it’s like each one of those as a separate request.

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.

It’s like an HTML attribute or something like you can say, like lazy load or something. And then it will,

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 what would that be? What would be non ways he voted in that case? Well, how would that behave?

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.

So it becomes it becomes a lot more important when you’re dealing with a lot of smaller files, because the overhead is going to be pretty much the same on each request. The regardless of the payload size. So if you’re requesting one or two kilobyte files, combining them into a single request is going to save you a lot if you have enough files. But if it’s like 100 kilobyte image, it doesn’t really matter.

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,

you know what, they’re, they’re not blocking because websites, that really annoying thing where you’re about to click on something, and then the image finishes loading. And the thing about to click on gets pumped over by pixels. Facebook.

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

That was Yeah, that’s like a video game thing, right? Well, yeah, the images onto one file,

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. Oh, man. Oh, and we also, we also had to do when we used to do that, because you didn’t want to have where you would hover over something. And then they had to wait for the new image to load for the hover state. There was what was the trick? You had to like, be to preload the images? But you did that by like, putting the images, the JavaScript variables? Yeah, thing?

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, we just would do that to cash them. And then that way, the page would be more responsive. But I mean, at the same time, though, like, I mean, pages loaded. So slowly back then that,

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 should dude

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

I’ve got 100 megabit I’m not complaining, but dude.

It’s cheaper than my cable was.

Oh, my God, I hate you.

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

VG that’s like a mirage. Like the Unknown Speaker squishy G. Yeah, yeah.

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.

I’m going to I’m going to put a link in the show. She says loud, put a link in the show notes for this talk from the GTC by Mark Ferrari. And if you don’t know him by name, I’m sure you’ve seen his art. If you’ve ever played any of the early computer like Lucasfilm games, or Lucas Arts games, like loom or Secret of Monkey Island, or was the other one Oh, Zach McCracken. I think

making up names right now.

All the old like scum games like the point and click, you know, talk to this guy. Grab this item, Kings quest, that kind of thing. I don’t think he worked in King’s Quest. But he, Larry. Yeah, like that kind of game. Unknown Speaker Yeah. I mean, what he

so he, he but he like he created this digital art form. And he was an artist by trade that learned how to do it on computers and the stuff he does with like shapes, especially animated GIFs is phenomenal. I mean, he’s working with a very limited palette. I think he was the one that invented the dithering technique with images. Oh, yeah. It’s amazing. It’s amazing. The talk is like, it’s it looks like it’s an hour and a half long. so worth it. It’s, it’ll be in the show notes. Check it out. Unknown Speaker I will do these things you ask.

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.

Do you remember Wolfenstein 3d?

I do remember Wolfenstein? So the third

I had, I had an editor for that where you could edit the game art files. And I learned that that’s where I learned about transparency. Because the all the sprites for the game. All had it was like a bright magenta color. That was the transparent q Yeah. Unknown Speaker But the files and the lead is the key. Yeah,

yeah, it was it. Yeah, the chroma key, that’s actually a great, that’s a great comparison. But yeah, it was just every pixel, like there was no gradients, no fading or anything. No ghostly transparencies, it was either like on the screen or not.

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.

If you think about what it is you have a table of 256 colors up to that defined for a file. And then you map each one of those colors to one value. And then you just have a grid. And the grid just says each of these, you know, each of these pixels is this color from the solicitor for the six colors.

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.

They’re great for when you have like a, like a raw file, like you took a photo of something and you want to have the original source file before you edit 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

an mp3.

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.

So when you when on the web, when we used to want to do like maybe you wouldn’t have whatever you want to have like a billiard ball on your website. And so you want to have like just a sweet looking eight ball in the middle of your page for whatever reason. If you did it as a shave, then it’s it’s going to have kind of a blocky looking exterior, you might be able to do some like little bit of like dithering or anti aliasing on the edges if you have enough colors available. But it’s it’s going to look a little rough. A JPEG might look fine. But you might still have that hit halo effect. Remember, those were like the if you don’t, if you put the image over top of something, it doesn’t have exactly the same background color as whatever your background color used for the JPEG. It’s going to look, it’s going to look off

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

Yeah, yeah. But with ping, ping has an alpha channel. And so now you can have that ball. And then the ball can have its own, like the edges of the ball can enter into an alpha channel, and you can put it over top of anything. And it’ll look like it’s just floating there.

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,

take it down to about 60 or 70%. And you probably will notice a difference. 75

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

the most part. And the the file size savings on that is huge. Like it’ll go from 300 kilobytes down to like 80 kilobytes. it’ll drop fast and won’t even notice any difference depending on the image the eight ball Yeah,

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,

like a high res photo of like a bubble where it has the iridescent, like lots of rainbow colors and things. You might notice it with that.

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.

or longer than that took us Henry, it became an international standard. Doesn’t three

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.

So if you if you need transparency, you must use it.

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.

You can you can get a surprising level of detail and even complexity with SVG, I’ve seen some really impressive ones that, you know, they’ve looked, Oh, absolutely. I mean, going back to the screen printing analogy, you know, a lot of T shirts are screen printed. But I mean, you know, it’s, you know, if it’s three colors, there’s three different screens. It’s the same thing with SVG, like you know, you have a bunch of pen pads that are kind of defining the shape of something. But you can still get a lot of depth into

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.

The actual code that’s defining the SVG, it might be good to think about that as being kind of like, the code is defining a connect the dots picture, right? And then the browser then connects the dots

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.

Put, I think I remember seeing this before I think you define multiple SVG is in a single file, yes. And then reference yet the different named VG, because I remember, at a previous job, we had a whole bunch of logos and things to find in a single SVG file. And it which was great, because then it’s just one thing you load, and you have access to a whole bunch of different art art files,

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

accordion index almost.

Yeah.

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,

or there’s like a 64 encoding.

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.

Right. So

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

a doesn’t Twitter use this format? or Twitter did remember seeing like when you would embed an image on Twitter, it would convert a download? Yeah, it would be like a web P. That’s possible.

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.

Right?

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.

It’s fetch. That’s when I’ll try to make web p happen. Stop trying to make

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.

Oh, these are amazing. Yeah, these are really good images.

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.

Right? It’s a few

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.

Yeah. Yeah.

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 you know, X dollars at work,

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.

So there’s there’s the other week, Wikimedia Commons has either GFDL, which is the new free document license. And there’s also public domain. And any images uploaded to the Wikimedia Commons has to be one of those two, and the public domain is just like, like now images. Yeah, you can use them. They’re just there for you to use whatever

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

It’s the way that people usually use Google Images. But you’re actually allowed to use it in that way.

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

GFTL is the default for Wikimedia Commons. And that one is basically like public domain except you have to attribute the source Unknown Speaker Yeah. copyrighted you can’t use. Right?

Well, you can you have to contact the content creator, right? And get permission, but nobody does that terms. Yeah. Right. Nobody, like

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.

Don’t do that. No, you, you actually have to get permission from the copyright

owner in writing verse, ideally, yes,

and the NBA. And they can set the terms which may require compensation. It might require you, you know, attribute them a certain way or certain ways, but they have they control the rights of how that’s used.

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.

Also, the ND one no derivative? Oh,

yeah, no derivative is another important one,

which means you can use it but you can’t modify can’t change it.

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.

I think just the general rule would be if the image doesn’t, if you don’t see somewhere, that’s the image explicitly says, yes, you can use this on these terms. Or Yes, you can use this openly or publicly. If you don’t see that affirmatively stated somewhere, assume you can’t use it

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

a side I think good fit.

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.

I’ve never seen Phil Murray before. But I’ve just a book that I love it.

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

And these are all like, like open license like you can just use them. That’s an excellent question gets.

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

I mean, if you just need like a, like images for a development or testing environment or something like yeah, sure it works fine.

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

that’s placeholder

com literally placeholder.com. Okay.

It was formerly called placeholder it, that it that no longer works, but it’s called placeholder calm. Yeah. And it shows the one thing I do like about this one, because I used it on a previous project is it. I mean, it’s a banal image, and also encourages the site owner to actually replace it and you but it shows the dimensions

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.

Does that turn this with us into CSS? Yeah.

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.

Nice.

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?

Oh, cool. Oh, the panda crush. The source forge page actually mentions another tool that I found. Image Optum. It’s a spell just like it sounds, image oapoptim.com, which is a tool that just it optimizes images for you. So you give it an image, and then it will, I believe it determines the format and the settings based on the profile of the image. But it uses PNG crush though. Yeah, it

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.

I have used that before. And it’s really good. Yeah, there I use anymore. Because I use Linux for everything. I use the GIMP program a lot. And it has a like when you’re saving, it has preview. And if you have preview enabled it just like check a box, when you’re doing this quality slider, it will update the image on the screen, per what it will look like at that quality. So you can sort of tell, you know, if it’s going to have any artifacts or anything coming

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.

There’s a service that we used on a site I’ve worked on, it’s called image XIMGIX. It’s an image optimizer CDN. So like you, you give them the high res versions. And then when you reference, like when you reference the image from your account with them, it will give down the resized versions of it. Yeah,

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.

It’s so great. I always imagined like a cute, like, pig. But like in a I guess on a bun. But like a cartoon,

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.

You can’t go wrong. Thanks for listening everyone. We are, like I said, that’s pretty much exactly what I imagined it would be like, awesome.

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.

Well, thanks for listening again. And hope you found this handy and useful, etc.

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

it’s so good. I really like if you if you do any retro gaming like 90s it’s gonna be like, amazing.

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


This episode of The Drunken UX Podcast brought to you by Porkbun. Head to porkbun.com and use coupon code DRUNKENUX at the checkout page to get literally a year free of your .design domain name.

Porkbun.com logo