Best Practices for Banners & Images
Helpful hints and guidance for banner and other images on your website.
Naming Your Images
- Make your image names descriptive and easy to understand.
- Don't use spaces or capital letters in your file names; under scores and dashes are great space holders (e.g. dog-barking.jpg or cat_purring.jpg)
Reducing Your File Size
You have a maximum of 1 MB for image uploads on your website. This maximum is set to optimize your page load times and improve your visitors user experience. There are a variety of ways to get an image optimized for the web.
Choosing the Right File Type
Generally, you will want to use either a .jpeg, .jpg, or a .png. The most important difference is that a .png allows for transparent backgrounds, while .jpeg and .jpg do not. Additionally, photographs should usually be saved as .jpegs, or .jpgs, while graphics (especially those with large areas of flat color or a transparent background) should be saved as a .png.
- Full width banners are generally 1600 (wide) x 1067 (tall) pixels
- Standard banner sizes are generally 1024 x 210 pixels (ratio)
If you are creating images for a hero banner (photo at the top of a webpage that goes full-width), you should avoid text and should carefully consider the use of people. As the banner resizes on mobile or alternative screen sizes, heads can be cut of and text made unreadable. We strongly recommend using the hero banner text overlay which is more responsive and accessible, where embedded text is not.