Resources

 

Get Your FREE
SEO
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.