The thing about large backgrounds

When you are setting up a website often we go for visual impact. This can be in the form of an illustration or an image or video. If you use them as a background image you can create a website which does look great but at the same time can cause you loading problems. While bandwidth has become cheaper over the years this is been implemented more and more.

Here are some of great looking websites with large backgrounds, have a look.

 

 

 

Armaniexchange

Werkstette

Zara

Blogbier

Massimo Dutti

Tomford

Valentino

There are many screen resolutions in use across the net as well as browsers. I know I personally seldom use my browser at full screen width. Mostly, because I have numerous applications running at the same time and to switch between them is far easier when I can just flick over. How you set your background image  is extremely important.

While we want to keep the image symmetrical on the site you can get the wrong impression if the website is centered and the screen isn’t maximized.

The way to avoid this from happening, is by using the most common screen size and then use the blend method on the corners of the image. This will mean that the image fades into the background and doesn’t stand out with the screen size is changed. The result is that this change in size of image won’t stand out showing the sharp edges and thus be noticeable.

Background images can be very tricky to use as, if the sizing isn’t correct, you will end up with photos repeating themselves or tiling.  You need to make sure you set the screen size as fixed as well as making sure the actual picture is the correct size. If the screen is set to stretch really gruesome things can happen. Use CSS to do your image back ground if you want it to tile. This means the same image will repeat both across the page and down the page. Personally, I find this both distracting and ungainly but the only way you learn is by trying things. You do need to make sure that your sizing, and your blending is correct if you want to use tiling as a background.

There are three formats images are usually used in backgrounds. Your glossy image being a jpeg, a Gif file which is used more for graphics, or more recently the .png. Each of these formats has their own use. If you are using very simple things like circles or various shapes you can use a Gif file. This is very small in size, but it isn’t suitable for photographs or heavy duty graphics.

GIF, image size: 3,3KB

Jpeg, image size: 13,5KB


When you are using photos the main format used is Jpeg. This can be made web ready without losing too much data and this means the amount of pixels is reduced making loading time faster. Do not make the mistake of resizing in your html as this doesn’t reduce the pixels only the actual size. You need to adjust the pixels and size using a photographic program.

Always keep the original separate and do the adjustments on a copy. This way any mistakes can be rectified. Once adjusted you can’t adjust bigger again, too late.

The more pixels the photo has the slower the load time. This can make a major impact on your visitors load times and can cause you to loose visitors if it takes too long.

You can check your download usage of bandwidth by using the Firefox plug-in Fire Bug.

One of the modern day considerations is to think of how a mobile phone is going to both view your pictures and also the amount of time it will take them to load it. The use of large picture backgrounds and mobiles don’t blend too well. Of course you can set up a special site for mobiles and by using a code snippet from Java you can select the service the device will see.  To see how this works there are several phone emulators which you can download to view how your site will be viewed. Firefox had an ‘add on’ for this as well. In the older days designers used to use spirits to get around the bandwidth download and this is coming back into service especially for mobiles. Background photos will load faster if you make them into a spirit. Blend your color of photo with the background color. This means the photo will show up seamlessly with the background.

Overall while it can be effective in use, it doesn’t matter how you look at it, you are going to increase your load time with large pictures.
...

 

5 comments

  1. Allison conners /

    Nice collection of websites, great post.

  2. Hi! I’ve just stopped by to say thanks for this awesome post. Take care!

  3. Hello mate! I quite agree with your opinion.

  4. eric /

    Thanks for publishing this article. It is really helpful for me.

  5. Donnie Vollmer /

    Hello.This article was really motivating, especially since I was looking for thoughts on this topic last couple of days.

Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes