# Image Size

**URL:** <https://community.hubspot.com/t/image-size/103663>\
**Category:** CMS Development\
**Tags:** starter\
**Created:** [March 28, 2024, 2:09pm UTC](https://community.hubspot.com/t/image-size/103663 "2024-03-28T14:09:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SKitchen7](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@SKitchen7](https://community.hubspot.com/u/SKitchen7)\
**Post date:** [March 28, 2024, 2:09pm UTC](https://community.hubspot.com/t/image-size/103663/1 "2024-03-28T14:09:39Z")

</div>

I am building a landing page in HubSpot. Can someone please tell me the what size the header image should be be at the top of a landing page? Width in pixels? Thanks 🙂

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 28, 2024, 4:26pm UTC](https://community.hubspot.com/t/image-size/103663/2 "2024-03-28T16:26:39Z")

</div>

Hi @SKitchen7,

short answer: It depends on your layout. For most usecases an image width between 1440px and 1920px is good

long answer:

You can go with the size between 1440px and 1920px but it should be also optimized for performance. A good rule of thumb is any image above the fold shouldn’t be bigger than 200kb in size. Also upscaling the image might lead to quality loss.

If you want to use a “real” image/photography/stock image you should resize it to the currently most common screen size. Most desktop screens still have a FullHD resolution(1920px x 1080px). UHD(2560px x 1440px) and 4K(3840px x 2160px) are used aswell but you should def. check your (Google) Analytics for screen resolutions of your visitors(I’d assume it’s gonna be FullHD for desktop) and optimze the width of the image to the most used desktop resolution.

The second thing you have to think about is the height. Unless you want a fullscreen image you have to cut the height.

A good rule of thumb for this is this math equation:

_Desktop-height \* desired image space on the screen = image height_

Example 1: 1080 \* ⅓ = 360px | Final image size: 1920px x 360px

Example 2: 1080 \* 0.5 = 540px | Final image size: 1920px x 540px

Note that depending on the placed information into the header(headline-text) and also paddings(top&bottom) it can vary.

As for performance: As mentioned before an image should be bigger than 200kb. Use PNGs, WebPs or SVGs as format and use an image-optimization tool like tinypng, [kraken.io](http://kraken.io) or similiar to optimize your image(s) for web before uploading to HubSpot.

A pro tipp: In most cases the upscaling from 1680px(width) won’t be noticeable to the human eye. So create an image with your desired size(e.g. 1920px x 360px) and resize it with Photoshop, Photopea, Gimp or similar to the corresponding width of 1680px. You’ll should save a lot of kbs 😁

---

Going deeper:

If you’re familiar with custom module development you should create your own header module and also include a seperate image option for mobile and tablet usage.

A potential code example:

```lia-code-sample
{% require_css %}
<style>
{% scope_css %}
.image-header{
background-image: url('{{ module.mobile_image.src }}');
background-size: cover;
background-position:center center;
width:100%;
height: 30vh {# this will make the image take 30% of the screen #};
padding:3rem; {# this will put a padding/inner spacing on your header #}
}

@media screen and (min-width:768px){
 .image-header{
 background-image: url('{{ module.tablet_image.src }}');
 }
}

@media screen and (min-width:1200px){
 .image-header{
 background-image: url('{{ module.desktop_image.src }}');
 }
}
{% end_scope_css %}
</style>
{% end_require_css %}

<div class="image-header">
 {# place your other functions like headlines, columns, buttons etc. here #}
</div>

```

best,

Anton

---

<div class="post-metadata">

**Author:** ![SKitchen7](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@SKitchen7](https://community.hubspot.com/u/SKitchen7)\
**Post date:** [March 28, 2024, 5:27pm UTC](https://community.hubspot.com/t/image-size/103663/3 "2024-03-28T17:27:18Z")

</div>

WOW! That you for your detailed response and time. I appreciate your sharing your expertise.