Big images, slow loading

>> Virgil Carroll: *majestic intro music playing* Some kind of system that gives you those video recordings, you have to notice that people don't sit there and go to your header image, and they look around and they're like, oh, look at that, and look at what they did over here in the cool graphic The only person that did that was the person that actually created the graphic in the first place. *cheerful intro music playing* *witch laughing noise* Welcome back to Discussing Stupid, everyone. as always, I'm your host, Virgil Carroll from. High Monkey And with me today is

>> Chad Heinle: Chad Heinle, also from High Monkey.

>> Cole Schlotthauer: and Cole Schlotthauer, also from High Monkey.

>> Virgil Carroll: Well, we're officially into spoooooooky season, and I see we've got some of our costumes on. We just got two days until Halloween, so I'm quite excited about it. Got the kid ready to go out trick or treating. How about you, Chad?

>> Chad Heinle: we're doing a full family Star Wars themed costume extravaganza,

>> Virgil Carroll: Nice!

>> Chad Heinle: so it's getting pretty wild over here.

>> Virgil Carroll: Sweet. Who are you gonna be?

>> Chad Heinle: Well, I will, of course, be Han Solo, my wife, Princess Leia, and the kids have chosen Darth Vader and a Storm Trooper.

>> Virgil Carroll: Nice, nice.

>> Chad Heinle: So apparently there was a Storm Trooper somewhere in the story.

>> Virgil Carroll: And, Cole, you have to tell us, what is the younger generation doing?

>> Cole Schlotthauer: You know, just trick or treating... No, not really, just.. well, I'll tell you what I'm doing. I'm going to be working on my golf game, if you can guess what my costume is.

>> Virgil Carroll: Uh oh, well, I know you're not Tiger Woods because I've seen you golf.

>> Cole Schlotthauer: That's actually true.

>> Virgil Carroll: *laughs*

>> Virgil Carroll: All right, well, perfect. Well, Cole, why don't you go ahead and let everybody know kind of what our topic is going to be for today.

>> Cole Schlotthauer: Yeah, so today we're going to be talking about page performance and SEO, but more specifically, when it comes to, how using oversized images on your site affects that.

>> Virgil Carroll: Oh, that's a great topic.

>> Cole Schlotthauer: Yeah. So, to kind of tee things off here, no pun intended.

>> Virgil Carroll: Oh god, stop. *chuckles*

>> Cole Schlotthauer: Okay. Can you guys think of any examples of stupid practices you've seen in the past along these lines?

>> Virgil Carroll: Ah well, you know, there actually is one that comes to mind, when I think about it, quite, a few years ago, I mean, you know, image issues have been such a long part of the world of the web. But one thing I think of is, like I said, many years ago, we had a collegiate client, that, had an enrollment page. And that enrollment page is what everybody in the various colleges used to start, their enrollment process each semester, for college, they came to us because there was a problem that that, page, when they first launched it at the beginning of the enrollment period, would constantly crash their entire, website, their content management system, and they could never quite figure out what it was. And when we stepped in and kind of helped look at it a little bit, we found that the biggest issue was they just had their logo, nothing fancy, but it was a high resolution, very large image. I think it was like a five megabyte file. Where on today's high speed that might not be a big deal, for them it was a huge deal because you're not talking about just one person loading up their browser and downloading that five megabyte file, but you're talking about thousands at the same time. And so that was basically crushing their system. So, I mean, that's probably the biggest thing we see out of images a lot, is that most internal organizations don't really understand how to optimize images and how to really deal with that load time. And that not only affects page performance, but for all those SEO people out there, that actually affects your SEO because Google and the other services actually grade where you're going to rank in their search engine results and everything from that.

>> Chad Heinle: And just continuing along those lines. The thing about large images is it's real easy to shrink them using CSS so that it looks smaller. But people don't always understand that's not making the file size smaller. You've still got that large five megabyte, ten megabyte, image, and if lots of people are loading it, you're going to have those problems. So it's real important, and what we teach our clients all the time is to resize them physically, using some software, and then upload them and load them onto the site.

>> Virgil Carroll: Well, and you also have all those, what you see is what you get tools that you kind of just drag and drop. You just drag and then you drag smaller.

>> Chad Heinle: Yep!

>> Virgil Carroll: You're not actually making the image size smaller, you're just making it show up on the screen less

>> Chad Heinle: And right in a bunch of content management systems, it's the same thing. You can type in image dimensions, but you're not actually shrinking an image, you're just resizing the scale. So, we get, you know, large headshots that are 2000, 3000 pixels tall, that end up being 200 pixels on the website, but it's still a giant professional photo that was taken.

>> Virgil Carroll: Yeah. And how many times did we see that in mobile?

>> Chad Heinle: All the time. That sizing down, for mobile, is really where we get a lot of problems and it's a balance. We want to have images on mobile, keep the site engaging. But just shrinking an image, not considering how that will affect mobile performance, is really a hot button topic. And I know that's one that you, Virgil have a lot of opinions about.

>> Chad Heinle: *laughs* Yes, yes.

>> Chad Heinle: So I'll kind of let you go off on that a little bit.

>> Virgil Carroll: We might just have to do a whole episode on that and kind of learning about image sizes and serving up correctly for that. But you know, one of the things that I always kind of laugh at is I think that so many people in the design world and the marketing world kind of get very worked up about the images we use and how many are on the page and everything else like that. When in reality if you actually look at the way people look at your sites, people don't pay that much attention to images. And I know I just stabbed at least 1000 marketers through the heart. And I'm sorry, but the reality is if you've ever loaded a product like Microsoft Clarity or Hotjar or some kind of system that gives you those video recordings, you have to notice that people, people don't sit there and go to your header image and they look around and they're like oh, look at that. And look at what they did over here in the cool graphic and thing. The only person that did that was the person that actually created the graphic in the first place. Everybody else is just like oh, there's a header image, just let me scroll down. So when these have a huge impact in there and people really don't pay attention to them, you're basically creating a lot of effort to add something visually, which is, you know, sometimes a good thing, but at the same time people really don't care about that.

>> Cole Schlotthauer: Yeah, a lot of good discussion there on some really stupid practices, but let's kind of shift the focus here to the good practices in this area. So Virgil, would you mind giving us a better idea of what image optimization really looks like?

>> Virgil Carroll: Sure, Cole, let me go ahead and share my screen and maybe I can give an example to everybody and that'll kind of help.

>> Cole Schlotthauer: Yeah, sounds good.

>> Virgil Carroll: Okay, so let me go ahead and start. one of our favorite tools we like to use is a tool called Riot. it's a free open source tool called Radical Image Optimization Tool it's actually one that they ask to give a donation. But if you use it for commercial use like we do, it does ask you for a massive twelve dollar donation, which we gladly pay because it's such a great tool and the author of it keeps it up to date. But I'm not going to show you a lot about the tool itself, but I just kind of want to use it as a guide to kind of let you be able to look at these kind of things. So the first thing I'm going to do is I'm going to grab our, album cover art and I'm going to go ahead and drag it onto the screen. And one of the first things you're going to see is it's asking me about, it's letting me know that this is a high resolution image, and do I want to resize it? and we'll go ahead and hit yes. and you can see that this image is coming in at about 3000 by 3000, which no one should ever want to put an image on their website, that's 3000 by 3000. if you do this, you and I need to have a conversation because that's just not the way things should work. so I should reduce this down in size Chad, what's usually a good size to do for, a square image on a web page? Like the biggest size?

>> Chad Heinle: Yeah, let's, I mean, let's go with maybe 800 for a content size image.

>> Virgil Carroll: Okay, I'll go ahead and start with 800. Okay, so we'll go ahead and do that. And you can see that I now have my original image here, which is actually sitting at 2.2 megabytes, so quite large for a web file. and then you see that I have my optimized image here, which is just 127 kilobytes so significantly smaller. You, can see that I can select kind of the type of it, we're not going to go into the different types, but one of the things I kind of wanted to show is kind of the difference between these two images. So if you look at the image on your left and you really look at, the quality of the textures and everything and kind of how that works, and then you look at the image on your right. Cole, can you let me know what differences you see there?

>> Cole Schlotthauer: Yeah, I don't see any differences.

>> Virgil Carroll: Yeah, no, I mean, I think that's one of the biggest points we want to make, is that a lot of times people think optimizing, an image is going to greatly reduce the quality. And yes, you can do settings to greatly, greatly reduce the quality of an image. But overall optimization technology that the compression algorithms have gotten so good that now we can make files really, really small compared to their original size, yet keep the overall image quality. If somebody was looking under a microscope or magnifying it by a lot, you might notice some subtle differences. But to the human, to the naked eye, somebody just looking at it, they're never going to really know those differences. And so from there, you have to ask, why do we worry so much about that? Why do we do that stuff when we have the technology now, basically to make these file sizes very small, yet at the same time, especially for a scroller on a mobile phone, they won't really notice any difference between that and the original image. Again, that kind of goes back to the designer.

>> Cole Schlotthauer: Well, thanks, Virgil. that was some good stuff there. but why don't we get into some other good practices around images and page performance?

>> Virgil Carroll: Sure. So like I said, using tools like riot or other tools like that, there's a plethora of tools out there. you, can do a lot in the world of optimization, and riot is something, I mean, you can also use it to do batch processing, but there's also a lot of sites out there that can do those processes automatically for you. There's developers that use APIs to do that process for you and there's a lot of options. But overall, the point is not necessarily what service or tool you use, but it's more around just doing it. another thing that I think of that has kind of, grabbed the web world a little bit more over the last few years, but hasn't necessarily gained the traction that I hoped is kind of the concept of an organization, setting a page budget. So if you're doing a web redesign or you're building a website for a first time, or you're doing some type of internal thing, really kind of understanding what type of people you're serving up, what kind of internet connection they have and all that kind of stuff, and then setting a page budget and basically saying, okay, so let's say that our page budget was 300 kilobytes to load up this page, then you'd have to look at it. So if an image is going to take up 150 kilobytes that you've only got 150 left. So now if you got a bunch of text, that's perfectly fine. But if you have something like you're going to have a, cool animation, you're going to have a video on there and all these other things, you might be going over that. So you kind of are setting a page weight, budget, basically, and then you're trying to get your org to stick with it.

>> Chad Heinle: And, you know, I like to do less work most of the time. So some of my favorite, things to bring up are going to be reducing the number of images on the page in general. Ah, that's less to optimize, that's less to go towards a page budget. If you set that, it's just, it's lighter, it's easier. and it really, gets you focused on putting quality images instead of quantity. hiding images on the mobile.

>> Virgil Carroll: You keep saying these  crazy things, Chad...

>> Chad Heinle: *laughs*

>> Chad Heinle: I know it, hiding images on mobile, you can sometimes even do this programmatically where you don't even load that image, but just reducing that scroll height. You know, if you've got a big page with lots of images, you're going to be scrolling for a while. And, it's not a great experience.

>> Virgil Carroll: Well, and again, if you've ever used any of those visual tools to be able to actually see how users use mobile, people do the thumb, they scroll, they scroll, they scroll. They don't tend to stop at things that they don't care about. And again, I'm still hurting designers' feelings, but that's the reality.

>> Chad Heinle: Yeah, it's very action oriented. Where you're going on your phone, you're trying to get to something. especially if you're on a website. If you're on Facebook, maybe you're just scrolling, but if you're on a site, you're trying to do something, get some information, do some action on there. And really just on the same topic as mobile, finding that balance like we talked about earlier, that mobile desktop balance. So keeping a site engaging, we totally get it. You sometimes need those images, you need those design elements, you need that data on there sometimes. But just keeping a keen eye on what you actually need. How big does it actually need to be, where does it actually need to be placed instead of just going hog wild on it?

>> Virgil Carroll: And honestly, if anybody listened to our first episode, I mean, we kind of talked about it, you know, an image is having a purpose. You're not just being there always for decorative. It's not that decorative is not important, but sometimes you need to look at it from the practicality of what people are trying to do in that. So, that's all great stuff.

>> Cole Schlotthauer: Well, I suppose that about wraps things up, thanks, guys. Had some good discussion here.

>> Virgil Carroll: Yeah, I think that, you know, people are going to probably start noticing a theme with our stuff. And it's not that we're going to talk about images all the time, but it's kind of amazing. How this is one thing that people just tend to mess up a lot and do a lot of bad practices. I'm sorry, let me put that back. Stuuuuupid practices on there. So, yeah, thanks a lot guys. Really appreciate you joining me and I can already feel us starting to move this podcast forward and do it better in that. So, thank you everybody for joining and we'll see you next time.

>> Cole Schlotthauer: Happy Halloween. *witch laughing noise* *cheerful outro music plays*

>> Virgil Carroll: Just a reminder, we'll be dropping new episodes every two weeks. If you enjoyed the discussion today, we would appreciate it if you hit the like button and leave us a review or comment below. And to listen to past episodes or be notified when future episodes are released, visit our website at www.discussingstupid.com and sign up for our email updates. Not only will we share when each new episode drops, but also we'll be including a ton of good content to help you in discussing stupid in your own organization. Of course, you can also follow us on YouTube, Apple Podcasts, Spotify or Soundcloud, or really any of the other favorite podcast platforms you might use. Thanks again for joining and well see you next time. *outro music fades*