Catalog V2 Header Image



Overview

The header image has a minimum height of 300px. The image header height will grow to fit the header title and header subtitle, but after initially having its height set, the height remains unchanged regardless of the size of the window. In other words, if the subtitle has paragraphs of text, the header image container will grow to ensure no text is cut off. In most cases, you can assume that the header image container will be 300px in height.


As the window grows and shrinks, the header image’s height will not change, but we will stretch the image to ensure it covers the header without repeating. This means that portions of the top and bottom of the image will be cropped to ensure the image fits.

Recommendations

Resolution

Since it’s difficult to know what the user’s browser window will be sized to, it’s best to assume that some portions of the top and bottom of the image will be cropped and plan for that. However, assuming that the most common screen is 1920 x 1080 as of this writing, creating an image that’s 1900 x 300 pixels will probably lead to the least amount of cropping.

Size

Since the smaller an image is, the quicker it will appear on the user’s screen, the goal should be to create an image as small as possible while also retaining the level of quality you desire. There is no hard-and-fast rule here as everyone will have different standards for what quality level is acceptable. Just keep in mind that the smaller the image size is, the better the user experience will be.


File Type

Use jpg as the file type. Other image types have their own trade offs, but for the purpose of a header image, jpg is the safest and generally most efficient image format.