Get Your FREE
Beginner Guide

Get Your Free PDF!

From SEOMoz


Get A FREE Trial to
Test Your SEO

Hubspot link image





Header Image Aspect Ratio


     This page has an explanation of how to provide a good the 'Header' image, one that is of proper proportions.


     If you have an image that is what you want to see on the site, and that is already in a 6-1 aspect ratio that's great. If not some adjustments are in order.


     The image must fit inside a space that has a 6 to 1 ratio. In other words,

6 times as wide as it is high.


     If your image does not meet this criteria we may be able to slice a portion out of your image to make it work, but only if there is enough usable area in the photo to slice out and end up with what you want.


     Here is a box to illustrate the principle (not to scale):


               aspect ratio box


     Here is a slice of a photo to fit into this box:


               Lone Peak slice


     The slice came from this photo:


               Lone Paek


     Here is another example. Someone wants to use this photo in the header

image. How can we do that?


               bison grazing


     We can take a slice out of it like this:


              Grazing bison


     You can see from the examples of "Lone Peak" and the "Grazing Bison" above

that if you have a picture you would like to use and take a slice out of it, there must be a considerable amount of 'waste' or unimportant area, top and bottom that won't be missed after the slice is taken out.


     But what if he wanted to use this photo?


              grazing bison


     If we slice it we might get something like this (which doesn't look good):




     There isn't an area to slice from this photo that will produce an acceptable image, just because of the type of photo it is. Everything in it is a meaningful part of the whole. So ...


     What else could we do? It doesn't appear that a slice from anywhere in this photo would work very well. If we try to fit the photo into the box we get something like this:


              header with bison


     What if we try to fit the photo into the whole box? What happens?

Something like this (likely you agree the distortion is unacceptable):


              stretched bison


     So now what can we do with the empty blue space above?

Maybe something like this:


              header with bison and shop


     OR this:


              fargo shopheadr image


     There are many alternatives, but it can be difficult sometimes to make a silk purse from a sow's ear, so to speak. Please tell us what you think you would like to see and we will try to produce it for you. Within the limitations of the content you provide of course.


     Please, if you have questions or need further clarification, do not hesitate to let us know. The only dumb question is the one that doesn't get asked.