BRISBANE WEBSITE DESIGN | WEBSITE HOSTING | DOMAINS | SCRIPTS | FORUMS | CONTENT MANAGEMENT SYSTEMS
Brisbane Website Design Queensland Australia
Home   l   FAQ   l   Help   l   About Us   l   Contact
Using Images on your website, optimising and manipulating
Please allow time for page to LOAD.
When we create a website, it is nice to add images. It adds to a users experience, and the old adage , " A picture paints a thousand words " rings true, but should we now use the saying " A picture paints a thousand pixels? " a GIF or JPG or PNG or BMP

Below are some Image samples, that we have optimised with Adobe Photoshop

Sample 1
This image is a BMP and is over 225 KB. Right click and select properties, to see.
WHAT'S IN AN IMAGE ?

The image to the left is a BMP and is actually sized at 320 x 240 pixels. We have it displayed at 160 x 120 pixels. The size of this image is huge, at a whopping 225 kb

Image size 225 kb
Sample 2
This image is a BMP and is over 56 KB. Right click and select properties, to see.
WHAT'S IN AN IMAGE ?

The image to the left is the same BMP image and has been resized at 160 x 120 pixels.  The size of this image is now far less but is still a huge 56.3 kb

Image size 56.3 kb
Sample 3
This image is a PNG and is over 36 KB. Right click and select properties, to see.
WHAT'S IN AN IMAGE ?

The image to the left has been re saved as a PNG-24 image and has been sized at 160 x 120 pixels.  The size of this image is now far less but is still a huge 36.8 kb

Image size 36.8 kb
Sample 4
This image is a GIF and is just 8 KB. Right click and select properties, to see.
WHAT'S IN AN IMAGE ?

The image to the left has been re saved as a GIF image and has been sized at 160 x 120 pixels.  The size of this image is now far less and comes in at a measly 8.0 kb

Image size 8 kb
Sample 5
This image is a JPG and is over 3.34 KB. Right click and select properties, to see.
WHAT'S IN AN IMAGE ?

The image to the left has been re saved as a JPG image and has been sized at 160 x 120 pixels.  The size of this image is now far less and comes in at a miniscule 3.44 kb

Image size 3 kb
Information on optimising your websites images

Factors to Consider !

Factors that Affect the Download Time of Your Site
1. Optimizing Images - this refers to the process of striking a balance between file size and image quality. Your images should not be too large or have too many on your web site. This will cause your pages too long to come up in the users browser and they'll lose their patience.

Of course, if you images are too poor (too small, or with too low of a resolution), your site will be unattractive and it won't matter how quickly the site loads. You need to seek the perfect balance between size and quality.

2. File Formats - There are two main types of images on the Web:
GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group) files. Each format compresses files differently and each exhibits different strengths and weaknesses.

The GIF standard works better for images with large areas of similar, flat colours, such as logos, drawings and diagrams.

JPEG is better at compressing photos and images with complex and widely variable colourings. Within each standard, you can adjust quality settings. Those adjustments will affect file size and image appearance.

The key to optimization is to try out all the different options to achieve the smallest possible file size while maintaining an acceptable level of quality.

3. Reuse Your Images - increase the efficiency of your site by making intelligent use of the fact that browsers usually cache (save for later use on the user's hard drive) downloaded files, including Web site images. Therefore, when a page calls for an
image that's already been used, it loads and displays much more quickly on subsequent page views because it is coming from a local hard drive rather than the Internet.

Therefore, one of the wisest things you can do is to reuse images; whenever possible, use the same logo on multiple pages, the same graphic buttons and the same graphic dividers. After the first time a user loads these elements, they'll pop up very quickly on subsequent pages

 
Page contents: Examples of Image compression, and space saving ideas and tips to optimize your websites images.
Page URL: http://www.30.com.au/easyweb/images.php

Please feel free to link to this page. We would appreciate you making a note that you found this "hint" on Brisbane Website Design

 

 


Cool People: GoogleIdols | MySpace Layouts | Forum Tickers | Gazzump | Banner Graphics | Filofacts
Brisbane Website Design is a wholly owned Australian Company. Family run, serving the Australian Community
Brisbane Website Design   Brisbane Website Design and Hosting    Contact Us
Copyright © 2006 30.com.au
Page took 0.122997 seconds to load.