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 owner 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 and hit the bell. Alright, so let me share new hero image dimensions of 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 are ample studies out there proving time and time again that sliders will decrease your revenue, but that doesn't mean you should never do it. But I do have my default set to never. So I only do sliders, at least for the hero section, if somebody has a really good reason for it.

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

So what we're going to do next is 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, 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 going to do. I'm going to write brackets, P brackets. So this sets us up with a paragraph, basically. And the foreground image inside the paragraph, I'm going to right bracket image source equals quotation mark bracket. So this is just, you know, the very basic tricycle-level HTML for an image that's inside a paragraph. Now what I'm going to do is use a service called placeholder.com.

I use this all the time; it's free, and it's really cool. Basically, they have set up a system where 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 it actually ends up building a 150 by 150 square, image optimization or, 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 look, right? So let's go back to our site and say that the image source is HTTPS, colon, slash, slash via.placeholder.com/now. This is where we want to start thinking about file size and what multiple screen sizes we might want to consider. So I recommend that you consider that most desktop monitors will have a maximum resolution of 1920 pixels. Now, technically, there are more and more 4K monitors out there. And I guess you can't see the whole screen there. There you go.

Remember the 4K screens out there? There's 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 image width, because number one, your image size is going to be so massive that your site is going to be super slow down. And number two, it's just not going to look that great anyway.

So I recommend sticking to something 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 aspect ratios and the heights to kind of figure out what we like. So putting an image compression 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 full page image here, and it's almost full width.

Now, technically, when you slide an image export 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. It takes just a minute. And we go back to the actual front end of this store, click refresh one time, and there it is. Right.

So there is our full screen hero image 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 the full screen images and everything that we had. But let's change this to 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, let's do 1600, 1400, and 1200. So now we're putting five paragraphs on the web page. Each paragraph consists of a different size screen full-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 centered. 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 in 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 of 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, then 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 quite a bit. So this is usually the maximum width I use. Because I like a little bit of edge on full page background size image on both the jpg and side, I will frequently use 1600 by 600. Sometimes I will use 1400 by 600, which is a hero size that I use. But I usually use it on things like interior pages, 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 going to go to the header, which I just right clicked and found here, and I'm going to say splay fixed.

I think that'll do it. The next fingers are not working today; they do not want to go and don't want to fix it. Let's say this position is 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, getting a little bit of code 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 new image 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 the way that this header is working with everything being centered, it feels a little bit larger screens 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: just kind of eyeball how it feels size-wise against the other stuff that's on the page. So, as you can see, this feels pretty good.

It 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 image was going to be featured image like this, 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, and as you can see, this one feels maybe a little bit too small, at least for optimal size for your homepage hero. So now we have the width.

So let's say that we said Yeah, we like it. Which one was it that we liked? Was it 1400? That felt pretty good, right? So let's just take the 1400 one. And let's just delete the rest. And say, Okay, now we know that we want it at 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 400,600, and a 750 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 that 1400 by 750 is super, super tall; it's always going to be basically stuck properly size.

Finishing under the fold, 1400 by 600 It feels pretty good. 600 is a really nice overall, you know, default header, and 14 by 1400 by 400. It feels a little bit short. So, you know, if it were me, at least with this header, 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, 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 screens.

Alright, so if I shrink this down, I 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 that instead of doing all this, if you put this on the page right here, you put a div, and I put this stuff in here just to kind of center it and make it kind of, you know, display right? for the video.

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

And I put three header images in 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 background images of different tall heroes. And I like this; this single image is what I call a triple hero.

And I like this because you can show three slides still, but without them sliding or 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 go to the code. Let's make the maximum width 1600 pixels and publish it. Okay, come back to the front end. Oops, I 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; I should have that in there automatically. So the display is grid max width 1600, grid, auto flow column, and margin auto, which is what's going to center it.

And when we come to the front end, look at how nice that looks; 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 the 1400 that we saw. Oops. 1400, and 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 smaller screens; 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 to load time and all that setup.

For the purposes of this demo, this demo is all about trying to figure out what size mobile image 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 responsive images, and 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's worked for you, see what heights worked for you, and consider that a triple hero 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 joinecommercegrowth.com. And if you need a developer to help you out, then reach out to me at the claim site.

Thanks so much.