We all know that the biggest killer of bandwidth on our websites is the use of images, but how do we go about reducing this. What tricks can we use to create the same effect but without the expensive bandwidth totaling up rapidly on us. In this tutorial we will look at a number of methods available to us to reduce our bandwidth whilst maintaining the look and feel of our site.
1. Reducing our File Sizes
Yes this one is the most obvious choice so we will look at it first. Questions we need to ask ourselves.
Are we resizing our images through the use of CSS or HTML?
If we are doing this we need to look at re-saving all our images at the smaller size. If we need to present the larger file size link to the larger image from our thumbnails. This way we are not wasting bandwidth loading a full sized image when we are only using small images for the majority of our pictures.
Are our Images optimised for use on the Web?
Are our images saved as 72ppi? If not why not? Average camera takes photos at 144ppi or higher, by reducing them to 72ppi we are already saving half our file size without even resizing the image.
Is the image saved in the best format? With a program like Photoshop or Fireworks before we save our images for the web compare the size of the file if you were to save it as a JPEG, a GIF and a PNG and pick the smallest file size to save your images in.
Do we need to save them at 100% quality when using JPEG’s? The majority of JPEG images on the web are saved at 80% quality and this is considered standard. This saves on file size too.
2. Background Images
Do we really need to have one great big background image through our site?
Can the image be broken up into smaller components and then put into our website more efficiently? Background images can become quite large if not examine in depth. Say you have an image up top going full width of the screen changing to a color at the bottom of the page. Why save this all as one image?
We could break the image up into its components. The part of the image sticking out on the left, the part of the image stick out on the right and the gradient. But instead we have an image being used that is wider than the screen. A 1 pixel wide image repeated across the x-axis could take care of the gradient. We could then create the image as it sticks out the left side of our websites background half the width of our website and another for the right side. Because this method is probably going to leave us with a gradient image 1px by 400 or 500px and two images roughly 500px by 400 or 500px high rather than an image that is 3000px by 400 or 500px high we could easily be saving 33% of the bandwidth on a background image. For more information on how to do this take a look at this tutorial on how the use multiple background images in a background.
Are all our repeated backgrounds used for color or a gradient 1px high or wide?
If you are using images to put a background down a column for example that is only being used to create a color are our pictures only 1px high? If we are using a larger image for a texture fair enough, but when we are only adding a color or a gradient any image that is higher or wider than 1px high (depending on which way the image is being repeated) is a waste. By changing that 5px by 300px gradient image to 1px by 300px we would be saving 80%.
3.Is the Image Necessary?
Are we using an image for text?
If we are using an image for text we are adding a picture that in most cases isn’t even needed. So the text needs to be tilted, can we use CSS3 in effectively to do the same thing? We need to use a font that isn’t available on most computers, Can we use @font-face kits to save bandwidth? And remember this one will need you to look at it closely. a Font-face kit can consume bandwidth so if its one or two uses of the font you probably could use the images but if its all through the page then font-faces are for you.
Does the image add to the page?
If it doesn’t add to the page or makes the page look more cramped Then you are probably better off not even having it. Don’t add images just for the sake of adding them. You may make your layout less effective than it could be. People need white space to rest their eyes, adding images into every white space may make your website a pain to visit rather than a pleasure.
Are you using Images for corners and shadows?
If you are using images to create rounded borders for examples look at CSS3. Use CSS for drop shadows and text shadows. A lot of programs that design layouts for you use images for even a simple 1px border, get rid of them. You are using heaps of HTTP calls you don’t need to as well bandwidth.
Hope this has helped to create a lighter faster loading page. I will add to this page in the future as I come across more tips and techniques to help save you.