ProActive HowTo :: Tips & Tricks - Working with Images

PLEASE WAIT TILL ALL IMAGES ARE DOWNLOADED

IMAGES

Images can be uploaded via the Editor - for bulk image uploads please contact us.

Get the best out of your images.

Images used in web pages, you should use either JPEG (.jpg) files, GIF (.gif) files or PNG (.png) files.

When an image is created for use on a web page it is strongly recommended that the image is optimised for web and unless there are special circumstances the image should be displayed at it full size.

The reason for this is to reduce the download for your visitors.

Good: This image is displayed at its full size of 450 pixels wide by 678 pixels deep - the electronic file size is zz kilobytes.

Not Good: This image is displayed at 450 pixels wide by 678 pixels deep - the electronic file size is 918 kilobytes. The original image dimensions are 1168 pixels wide and 1760 pixels deep - the visitor only gets to see the image as 450 pixels wide by 678 pixels deep. There is very little quality improvement in employing this method. In most instances a .jpg is the best format to use for full color images, in this case if the user is presented with a larger than display image the user would have downloaded an additional 174 kilobytes for no purpose and would undoubtedly develop a negative attitude towards your site due to the lengthy download time for the image.

JPEG image - original size 450 pixels wide by 678 pixels deep. 48KB


PNG image - original size 450 pixels wide by 678 pixels deep. 408KB


GIF image - original size 450 pixels wide by 678 pixels deep. 150KB


JPEG image - original size 1168 pixels wide by 1760 pixels deep. 222KB


PNG image - original size 1168 pixels wide by 1760 pixels deep. 2000KB


GIF image - original size 1168 pixels wide by 1760 pixels deep. 913KB


These images above can be displayed at any size simply by adjusting the image height and width attributes.

Here is a 2 megabyte image displayed as 20 pixels wide by 20 pixels deep - a waste of about 1.9 megabytes in download times.PNG image - original size 1168 pixels wide by 1760 pixels deep. 2000KB