What size should your hero image be

Hey guys, I get two questions quite a bit. Number one, how do I pick the size that my hero image should be? And number two, why are Vlasic kosher dill pickles so doggone crunchy? And in this video, I'm going to answer one of those questions. Before we get started.

My name is Kal, I'm a developer a store and just like you, and I run the E commerce growth community on Facebook. And each week, I post more videos. So if you find this one helpful, subscribe, hit the bell. Alright, so let me share my screen. And let's talk about hero image sizes.

Okay, so I have a plain Jane Cornerstone template here, nothing's been done to it. It's just got some weird stable products in it. And if you guys have watched my other videos, you probably already know I'm not a fan of sliders. There's ample studies out there, proving time and time again, sliders will decrease your revenue, doesn't mean never do it. But I do have my default set to never. So I only do sliders, at least for hero section, if somebody has a really good reason for him.

So let's go ahead and start by taking this turning this off. So I'm going to go to homepage and then unshown the carousel. So now that gives us a very clean view here of basically a menu and featured products right within our hero back in here. So I guess I should have set up front to get to where I'm looking at right now, if this is your first time seeing this, you go into storefront and then themes, click on Customize. And that'll bring you into the customizer, in Bigcommerce.

So what we're going to do next is we are going to drag an HTML widget into one of these widget fields. So that gives us a place where we can just write some code. And I am going to write a little bit of code and but you'll see that it's not very difficult, you can probably just copy exactly what I do or have your developer friend or your neighbor's.

Cousin or somebody do this for you. Right, so here's what I'm gonna do. I'm gonna write bracket, P brackets. So this sets us up with a paragraph, basically. And inside the paragraph, I'm going to right bracket image source equals quotation mark bracket. So this is just the, you know, the very basic tricycle level HTML for an image that's inside a paragraph. Now what I'm going to do is I'm going to use a service called placeholder.com.

I use this all time it's free, it's really cool. Basically, they have set up where you can, you can type whatever, you can type a link like this and pull an image from their site, and it'll dynamically create whatever image size you want. So if we say that the image source is via.placeholder.com/ 150, and actually ends up building a 150 by 150, square, if we say that it's, you know, 48 468 by 60, it'll end up building a rectangle on the site.

So you can use this to just dynamically pretend like you have an image there and just see how the spacing fields, right. So let's go back to our site and say, the image source is HTTPS, colon, slash, slash via.placeholder.com/now. This is where we want to start thinking about what sizes we might want to consider. So I recommend that you consider that most desktop sizes, size monitors are going to be 1920 pixels maximum. Now, technically, there's more and more 4k monitors out there. And I guess you can't see the whole screen there. There you go.

Remember 4k screens out there, there's more more people using a, you know, a large wraparound curved monitor where you know, they have some really insane resolutions. But I wouldn't try designing image heroes or your column or anything to like a 4000 pixel or larger width, because number one, your image size are going to be so massive that your site is going to be super slow down. And number two, it's just not gonna look that great anyway.

So I recommend sticking to like 1920 or 2000 pixels wide as what you consider the maximum width, right. And so we'll play around with the widths and then we'll play around with the heights to kind of figure out what we like. So by putting this into a paragraph tag, and putting this on the page is going to generate an image that's 1920 by 600. So if I go ahead and save that, you can see that it's put it on the page, and it's almost full width.

Now, technically, when you slide a widget onto the page, it's not just the widget, it's the widget inside a column inside a layout. And if you go up a level here to the column, you can see that they apply some default padding here on the left and right so I'm just going to zero Get out and go back into the widget.

So now we see what a 1920 by 600 pixel hero looks like. And we can click publish. Takes just a minute. And we go back to the, to the actual front end of this store, click refresh a timer to there it is. Right.

So there is our our hero that we put in, let's see, did I turn the homepage carousel off, let me just make sure you go. All right. So we have a full width hero. Now, I'll tell you, I'm not the biggest fan of edge to edge, true edge to edge. Anything really. So what I would suggest is let's do another one here, let's just copy this paragraph. So we have everything that we had. But let's change this to be 1800. And let's actually copy this a couple more times.

And let's just do a couple more sizes. While we're at it. So let's do 1600 14 112 100. So now we're putting five paragraphs on the page. Each paragraph consists of a different width image. And let's just go ahead and click publish.

Alright, let's click refresh. And let me actually make this full width. I don't know, I don't know if you can see the full edge to edge on my screen. But you'll notice here that these are not centering. So let's go back. And let's just center all of that stuff. So let's click back into the widget. And we'll just go into each of these and say style equals text align center.

And I think that should do it. Just put that on each of those paragraphs. Click Save. Yeah. All right. So we have everything in those paragraphs centered. And we're going to come back to the front end, and we're going to refresh it. Alright, so now, let's just hit this little toggle up here in the corner to get rid of a little bit commerce menu that kind of messes up your view a little bit. And so now we can kind of see, like, if this was, you know, if this was the header than this is how it would look right underneath it. And I think it looks, you know, super crazy wide.

This is how 1800 By 600 looks, which I liked this quite a bit. So this is usually the maximum width I usually use, because I like a little bit of edges on the side, I will frequently use 1600 by 600. Sometimes I will use 1400 by 612 100 by 600 is a hero size that I use. But I usually use it on like interior pages and things more like blogs and things like that. Now, if I come up here, and let's see, let's see if we can make the header just fixed real quick. So we're gonna go to the header, which I just right clicked and found the header here and I'm going to say splay fixed.

I think that'll do it. Next fingers are not working today does not want to go doesn't want fix it, let's say is this position fixed? Alright, so now that'll let it stay up there. As we scroll down and look at some of these other sizes.

All right, sorry, get a little bit code either took me probably half a minute, but now we can see what it looks like with the header not moving. So if we just scroll down to the next hero size, look at that. It's almost like that first one doesn't exist, right? And this feels a little bit better than the first one.

Again, this is kind of how the first one was. It's kind of cinched up underneath the header right now. So I'm not going to fix that in the video but you can still you know, kind of see the width here that we're talking about. This one feels a little bit better.

But at least what the way that this header is working with everything being centered, it feels a little bit too wide to me, you guys. Now 1600 is starting to feel a little bit better. 1400 is feeling pretty good. So this is kind of what I like to do is just kind of eyeball, eyeball how it feels size wise against the other stuff that's on the page. So you can see like, this feels pretty good.

Feels like we have some decent space over here, it doesn't feel like the menu is like a tiny little strip down the middle. And then it gets super, super wide for no reason.

So if your header was going to be like this, I would I would probably stick with this 1400 wide image, right? Because it doesn't look like it's kind of crazy pouching out if that makes sense. I hope you guys are finding this helpful. This is like just eyeballing 101. Right. So we did this with you can see this one feels maybe a little bit too small, right, at least for your homepage hero. So now, we did the width.

So let's say that we said Yeah, we like which one was it that we liked? Was it the 1400? That felt pretty good, right? So let's just take the 14 101. And let's just delete the rest. And say, Okay, now we know that we want it 1400. Let's also look at a couple different sizes, right? So let's look at 750 for height. And let's look at maybe 400 for high. Alright, so we got a 400 600. And a 757 50 is about the highest I ever go by the way. So I click that, click Save and Publish back to the front end.

Then we can see oh yeah, I refreshed. So it took away the fixed header here. But we can look and see kind of how tall these are. You can see 1400 by 750 is super, super tall, it's always going to be basically stuck.

Finishing under the fold, 14 by 600. Feels pretty good. 600 is a really nice overall, you know, default header and 14 by 1400 by 400. Feels a little bit short. So, you know if it was me, at least with this header, I'd be I'd be thinking, you know, 1400 by 600. No, but I do like sizes up to 1800.

Like I said, I want to show you one more thing. And the reason I want to show you this is because I you know I personally, you know, we've seen rectangular heroes for a long time, it is definitely the standard on everybody's site. But it doesn't look that great on multiple.

Alright, so like if I shrink this down could see that they all get really short, you know, the 1400 by 750, which again was too tall for desktop, really, it feels okay on mobile. But the 1400 by 600 feel is going to feel pretty squatty especially if I get even thinner than what we're looking at here. So let me show you something else that I like, which is instead of doing all this, if you put this on the page right here, so you put a div and I put this stuff in here just to kind of center it and make it kind of just you know, display right? For the for the video.

So this div basically is going to put make the ingredients of the div the stuff inside of it display as a grid, it's going to be you know, maximum 100%. And it's going to put it into a grid type of column right.

And I put three images inside of it. Each image is currently 600 by 800. And I just put a little bit of padding in it so that it would space it out nicely. Save that, publish it and come back in here and refresh it. And you can see that we have a couple of different tall heroes. And I like this this is what I call triple hero.

And I like this because you can show three slides still but without them sliding without them distracting people. And when you go to see this on mobile, you have a couple of different ways that you could see it, you can either stack these up, you could turn them into a slideshow on mobile, or you could just elect to see one of them.

Now, I don't like this being this wide. So let's come back in here and to the code, let's make the max width be 1600 pixels and publish it Okay, come back to the front end. Oops, didn't, didn't center it. Let me just fix that here real quick. Which I can do with margin. Auto, I'm going to just paste that back into my code here, should have that in there automatically. So display is grid max width 1600, grid, auto flow column and margin auto is what's going to center it.

And when we come into the front end, look at how nice that looks right, it's still maybe a little bit wide. So we can come back in here. And let's eyeball it down just a little bit further. And let's turn it into that 1400 that we saw. Oops. 1400, with that worked really well for the heroes, the rectangular heroes.

Okay, give it a refresh. Look at that. So you could end up having three heroes, you can show three different messages, and have this stack or slide or just show one of these on mobile, so that it'll still look really good on mobile, I don't have all that setup.

For the purposes of this demo. This demo is all about trying to figure out really what size you're talking about. But I did want to show you guys, you know what, what I'd like to default to would be something like this, where we can show vertical images that are going to look sexy as hell and mobile, still show multiple images, not be a boring rectangular slider. And, you know, while I did show you, you know, a start to how you would actually code this, we are about to come out with a new widget for the Page Builder widgets app, that'll actually just build the triple hero like this for you.

And, you know, let you either stack or slide or just show one on mobile and just kind of give you guys some options. So hopefully this helped you guys out hopefully, after this video, you can, you know, easily check this out, you know, eyeball this, if you will.

See what you know, see what what's worked for you see what heights worked for you and consider that triple hero it is, you know, a great way to go. Because it's mobile and desktop friendly. I'll have another video about that when it comes out. But I really appreciate you guys be sure to join the community at joining commerce growth.com And if you need developer to help you out, then reach out to me at the claim site.

Thanks so much.