Best Practices for Banners & Images

Helpful hints and guidance for banner and other images on your website.

Image Size and Alt Text Matter

Properly optimizing your images for the web helps with your search engine optimization by increasing page load times and decreasing audience loss.

Appropriate image alt text is essential for providing an accessibile and usable experience for all audience members.

Naming Your Images

  1. Make your image names descriptive and easy to understand.
  2. 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 Omni CMS website. This maximum is set to optimize your page load times and improve your visitors user experience. But less is better! The sweet spot is no more than 425 KB. There are a variety of ways to get an image optimized for the web.

With Photoshop
Use the “Save For Web” feature found under the File tab in Photoshop. Adjust the image to a low file size (usually not over 1600 pixels in width) while keeping an eye out for image quality and required image size.
Photoshop Alternatives
You can easily find a suitable image editing/resizing tools with a quick google search. As always, be safe when you are browsing the web. You can also contact the IT Web Team for help.

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.

Banner Sizes

  • Full width banners are generally 1500-1600 pixels (wide) x no more than 800 pixels (tall)
  • Standard banner sizes are generally 1024 x 210 pixels (ratio)

Reminders

If you are creating images for a hero banner (photo at the top of a webpage that goes full-width), you should avoid embedded 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.