Bushcraft Website Owners Read! - Resampling Images.

[Nightwalker]

Are you a website owner / editor? Read on....
Its becoming annoying to see an increasing amount of Bushcraft/Survival-School websites with resized images not resampled. Ever wondered why a page takes so bloomin long to load? By not resampling images you can make your website take ages to load and effectively block dialup/56K users from even being able to load your site!

If you run a website and don't know what 'resampling' images is all about please watch this video guide I have made for you, its important!

Download Video - 27MB - 7mins 49seconds.



I hope that helps.

Apologies for the poor audio quality, I spent ages trying to tweak it but couldn't improve it. The video is used with the Xvid MPEG-4 Codec, so if the video dosent work download and install the free xvid/divx codec.

 

[Nightwalker]

The Macromedia Dreamweaver Image Resample button will look either like this

or like this

 

[bosknurft]

Excellent idea, Nightwalker. This kind of thing isn't as obvious as it used to be a few years ago, when most people were still on dial-up, and everybody noticed when their website was slow.

The video is great, very good picture quality, and clearly explained.

 

[Wayne]

Interesting is there a way of resampling in adobe?

 

[Nightwalker]

Thanks bosknurft.

Interesting is there a way of resampling in adobe?

Adobe-Photoshop? Its not the same deal within photoshop, you dont have to worry about the file-size of images when in photoshops, its only after you have exported that image from photoshop to a file (ie. .JPG or .GIF) & then are at the stage of importing it into web-authoring software that you have to worry. Resampling an image should be done at the last stage in dealing with the image/photo. Fit it on your webpage, resize it and locate how you want it, then resample.

 

[bosknurft]

Nightwalker, not everyone will use web authoring software to make a website, or perhaps they'll use web authoring software that doesn't offer the facility to resample on the spot.

Wayne, almost all graphics software should allow you to resample images, although the terminology used may vary. I have used graphics software that made no distinction between resampling and resizing, for instance. I've never used Adobe Photoshop myself, but I found a guide here, and it seems very straightforward.

 

[Martyn]

Great video Ashley, hopefully people will take note. One thing though, you refer to the file size as kilobits (kb), which is not technically correct. Kilobits are generally used as an expression of data transfer speeds. File sizes are generally expressed as kilobytes (kB).

1 kilobyte = 8 kilobits.
1 kilobit = 0.125 kilobytes.

So if you have a 2Mbps broadband connection (2 meg), that is 2 megabits, not megabytes.

A fast broadband connection that transfers 8 megabits per second, actually transfers 1 megabyte per second.

 

[Martyn]

Interesting is there a way of resampling in adobe?

Yes there is. In the file menu, there is a "save for the web" option which does the same thing that Ashley is talking about. It brings up a menu which allows you to specify how much compression to apply to a file. If you are saving your files as jpegs, then 50% or 60% compression will result in a much smaller filesize without any noticeable loss of detail in the picture. Below 50% compression and you will start to notice some grain and detail loss.

 

[Wayne]

Cheers for the replies. I guess i was OK then as I save for web with Adobe. Although my website images are slow to load. Need to play with this some more.

 

[Nightwalker]

Great video Ashley, hopefully people will take note. One thing though, you refer to the file size as kilobits (kb), which is not technically correct. Kilobits are generally used as an expression of data transfer speeds. File sizes are generally expressed as kilobytes (kB).

Thanks for pointing that out! I do know that; but I always get them mixed up when saying them, my bad, doh!

Regards photoshop; Worrying about resampling images at this stage is pointless (resizing maybe!.. but not resampling). When you rezise an image and then click off the function or move to another function it will prompt you with a dialogue saying "Apply the Transformation?" By default it has "Apply" highlighted, when you click Apply it essentially resamples the image to the correct resolution for the new dimensions. If you click 'Dont Apply' it wont resize or resample the image, so therefore as far as im aware if you do resize an image in photoshop it resamples it right after, not that you should worry at that point anyway because when you finally save/export the image for the web, it resamples it anyway.

If you resize & then resample your images when in your web-editing software (ie. Frontpage or Dreamweaver) your all fine, you needn't worry about any other steps to the image.

Sometimes if a image is huge (in resolution & size) it can be tricky to resize it in Frontpage etc. You can choose to resize the image before you put it into your web-editing software, there is a free and very easy tool to resize images quickly in XP. Its called a 'XP Powertoy Image Resizer' you can download here:
http://download.microsoft.com/download/whistler/Install/2/WXP/EN-US/ImageResizerPowertoySetup.exe

This tiny application adds a extra option to your right-click menu, so when you are browsing about your files on XP you can simply select a image file (or even a group of them) right click on the file(s) and click the new menu option 'Resize Pictures'. This is a very powerful tool that I use regularly in my web-design work. It allows you to easily resize many photos in mere seconds! It resizes the images (so lowers its resolution/dimensions) but keeps quality and lowers the file-size greatly! Take this for an example:

I have an image:
Name:Canis_lupus_laying.jpg
File size:6.2MB
Dimensions: Width: 3,914 pixels | Height: 4,886 pixels
The image is too large to post in here; it would stop the thread from loading, however I right click on the image, resize it using the above mentioned tool (you can specify rough sizes using the tool) and it then becomes:
Name:Canis_lupus_laying (Large).jpg
File size:54.3KB
Dimensions: Width: 615 pixels | Height: 768 pixels
From 6.2MB (6,348KB) too 54KB thats an amazing difference and allows me to post the beautiful image here which loads easily in a second or two:

Im sure you'll agree a beautiful photo and impressive quality for a tiny 54KB.

 

[Nightwalker]

http://www.greenmanbushcraft.co.uk/ - A partnering site of BCUK recently popped up, I liked the site at first, very professional and looked great, however their new Christmas theme has yet again highlighted the need for proper image resampling, even professional's get it wrong!

I've contacted 2Dmedia the company who designed http://www.greenmanbushcraft.co.uk/ to let them know that their frontpage alone is 2MB to load, thats too big and bad design.

Their current background image:
http://www.greenmanbushcraft.co.uk/images/back.jpg - is 1MB in size and needs resizing and resampling, its 1,500 pixels wide and dosent need to be.