NPR

Core Publisher: Image Specs and Best Pratices for the Header

For information on how to create and manage your header, please refer to this article.

Logo Image Best Practices:
  • The optimal logo size is roughly 600x400 pixels, or close to 400x400 if you have a square-shaped logo. However, the header is flexible and can handle various sizes for both the background image and the logo.
  • Ideally, your logo should be a transparent .png or .gif, which will enable you to place it on top of a variety of background images or colors. This may not be an issue right now (say, if your logo sits on top of a white background), but it's a good idea to be flexible enough to handle a variety of possible future conditions.
  • Next, we recommend cropping the logo right up to the edge of the image without any extra margin or padding, which will help it display at a larger, more readable size on small screens. 
  • The logo goes into an area that has a maximum width of 204 pixels and a maximum height of 110 pixels. It will display as large as it can be within those constraints.  
     
Background Image Practices:
  • Enter the header background color as a hex value (like #ffffff for white and #000000 for black). If you are not sure of the hex value for the color that you would like to use, use a free online resources like colorpicker.com
  • Ideally, your background image should be 1600 pixels wide by 155 pixels high, but you may not always have the perfect asset. As an example, let’s imagine you have this picture of a wave, below. It isn't a great size for the header because it's much too tall and it’s only 1024 pixels wide. By default, it will be vertically centered and displayed at it's natural size — not stretched to fill the background area. If you were to set the background color red, it might look like the example below on wide screens. 

    The image on the left isn't wide enough to occupy the optimal 1600 pixel-wide header.
    To handle this, you have several choices. 
If the background color of the image is flat and consistent, as in the illustration below, set the background color to match the illustration's background color. The browser can go as wide aspossible and the header will look good. 
The illustration (top) has a flat background color. Simply set the header background color to match it.

If the background color isn't consistent, try fading out the right and left sides of the image, and set the background color to something compatible. You may need a designer to help you do this well. 
The image above fades out on the right and left. By setting the background color to a compatible blue, the header image looks good even on very wide browsers.
 

In many cases, an even better solution would be to make the image "scale-to-fit," which will cause the image to stretch and fill the entire header area, no matter how wide. The Background Image Size section of this tutorial (a little further below) explains how to do this. 

The narrow wave image from above will fill the entire header if Scale to Fit is selected.
 
  • The Background Image Position setting gives you some control over which part of the background image is displayed in the header. For example, an image that's too tall, like our wave example, will display the middle part by default (see image below). Select top or bottom if you prefer those parts of the image. 
A tall image such as this wave can be positioned to display the top, center, or bottom portions by selecting the top, bottom, or center radio button.


Questions? Having Trouble? Contact Station Relations

Did you find this article helpful?