Use of images on a website

[paul_r]

Images used in a website need to be formatted correctly otherwise you will slow your site down dramatically. Pictures from a digital camera for example will have a HUGE file size and if you copy that image straight into your site you'll have real problems:


You will eat up your available webspace in no time.
Your site will be a drag (literally) for users because it will take ages to display each picture.Fortunately this is easy to fix. Typically camera images will be much bigger than you will want to display on your site, and of a much higher resolution than is visible on a screen anyway. Therefore, by reducing the physical size and the resolution, your file size will be very much smaller, while looking just as good on the web. This will significantly improve the speed at which your pages load.

To resize images (and much more) without needing an expensive graphics package you can use IrfanView (http://www.irfanview.com/).

IrfanView is a very fast, small, compact and legally FREE graphic viewer for Windows 9x/ME/NT/2000/XP/2003.

Download it here (http://www.irfanview.com/)

If you have something like Photoshop you can do the same thing with that (plus a lot more of course). In Photoshop resize the image then select the 'File' -> 'Save for web' option and the image will be saved in the most suitable resolution for the web.

[paul_r]

An example: the original of this photopraph was uploaded at 460KB - it was actually much bigger but had been compressed by the sitebuilder to fit on the page, and was at full resolution.

I resized it to the actual size you see and changed it to the default resolution setting (80%) in IrfanView and it is now 75KB. Looks exactly the same on screen.

http://www.fonacabfalcons.co.uk/_mgxroot/img_1155578416_14858_1155578976_mod_329_205.jpg

[bfaststorm]

Paul,

was messing around with that IrfanView thingy but anytime i select the resize/resample option under Image, the photograph make look smaller on screen but has increased in terms of kb?


Thanks

[paul_r]

Can you send me the original image that you are working with, and possibly the resized/resampled version? I'll have a go the way I use Irfanview and see if I get the same result - I maybe just need to explain it better but it'll help if I can use the same images as you.

email them to websites@ visport.co.uk (take out the space i left in the middle there - I put that in to break the link as robots scan the site for email addresses then spam them to death :1 (43): )

[paul_r]

ok, got that and I can get it down from 114 KB to 30 KB at the same dimensions, without any significant difference to image quality. Here's what I did ...

Open Irfanview
File -> Batch conversion/ Rename
In the top-right 'Look in:' box navigate to the original image
Drag it across to the left panel (Input files)

There are now 3 changes you can make to that file:

rename it
dimensions
qualityBefore making any changes to the files set the location you want to save them to. Do this in the middle of the Irfanview screen where it says 'Output Directory'.

Rename:

To rename it go to the bottom part of the Irfanview screen:
Tick the 'Batch rename' button if you just want to rename files, or 'Batch conversion - Rename result files' if you want to change dimensions and/or quality and rename the changed files.
Go to the 'Set rename options' box
If it's a single file you can just give it a new name there, but the biggest benefit or the rename function is multiple renaming. i.e. if you take a load of pictures on a digital camera at an event for example, those images will all have horrible file names such as 122345677.jpg. You can rename a batch to say 'october_1', 'october_2' etc. - something more meaningful and sequentially numbered. In that example you'd drag all the files you wanted to rename into the Input files box, then set the 'Set rename options' box to october_# - the '#' symbol tells it to put the sequential numbers in.Dimensions:

Tick the 'Batch conversion' or 'Batch conversion - Rename result files' button (I always uses the latter because I think it's best to rename the files to distinguish them from the originals).
Click the 'Set advanced options' button (enable the button with the tick box above it if necessary)
In this window there's a load of options. For now we're just interested in resizing, which is the second panel down on the left side.
If you DON'T want the dimensions to change make sure the 'RESIZE' box is unticked.
If you do want to change dimensions tick the 'RESIZE' box and set the dimension you want using the various fields below - you have choices to set long side, short side, height and width, or % of original side. You will almost always want to make sure the 'Preserve aspect ratio' box is ticked to make sure the image doesn't get distorted during resize.
Click 'OK' at the bottom of that screen.Quality (affects file size):

For images to be displayed on a website the quality does not have to be nearly as good as it does for printing. Not that lower quality (lower resolution) won't look as well on screen - it's just that the eye can't see the difference on screen so there's no benefit in higher resolution. However, there's good a very reason to reduce the resolution, which is that the website page will load much faster than with a high-res image.
Towards the bottom of the screen you'll see an 'Output format:' box. For photographs that is normally best left at 'JPG - JPEG Format'.
Click the 'Options' button beside that.
The slider bar at the top of the next window sets the image quality. Try different setting yourself but I generally use 50% and can see no significant difference on screen between the original and this.With the image you sent me I kept the dimensions the same but saved it at 50%. The file size dropped from 114 KB to 30 KB. The two images are below so you can judge for yourself if there is a visible difference.

Original ... 114 KB
http://www.visport.co.uk/forums/images/posts/storm_original.jpg

50% quality setting ... 30KB

http://www.visport.co.uk/forums/images/posts/storm_for_web.jpg

[bfaststorm]

thanks buddy

[masif]

Some people may find the resizing thing easier but what I done is set up a Photobucket.com account, created a slideshow and just added it to the gallery page.

Sorted :)