Home News Forum Articles
  Welcome back Join CF
You are here You are here: Home | Forum | Image Optimisation Guide


You are currently viewing our boards as a guest which gives you limited access to view most of the discussions, articles and other free features. By joining our Virgin Media community you will have full access to all discussions, be able to view and post threads, communicate privately with other members (PM), respond to polls, upload your own images/photos, and access many other special features. Registration is fast, simple and absolutely free so please join our community today.


Welcome to Cable Forum
Go Back   Cable Forum > Computers & IT > Internet Discussion

Image Optimisation Guide
Reply
 
Thread Tools
Old 07-01-2004, 22:41   #1
Jon M
Inactive
 
Jon M's Avatar
 
Join Date: Oct 2003
Location: Bracknell
Age: 36
Services: Freeview, NTL phone, NTL 4mbit BB SACM
Posts: 3,281
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Send a message via MSN to Jon M
Post Image Optimisation Guide

Image Optimisation Guide

Introduction:

The aim of this article is to not only provide a straightforward guide to effectively manage your images, but also to give you an idea of how different image types can be very important and how to use those different types to their potential.

For the sake of simplicity and my typing finger, I'm going to include just two popular applications for manipulating and optimising images.
Adobe Photoshop and Paint Shop Pro (PSP)


1) File Formats (File Types)

File extensions are the (normally) three digits after the dot in a filename. (myCV.doc or autoexec.bat for example)
The extension will dictate what format the file is, and therefore what programs are associated with it.

When working with images, the file extension is very important.
You will most likely be working with the extensions ".bmp, .jpg, .gif, .png and .tif(f)".

There are no clear cut rules, as there are many situations where the type of file you use is down to your own judgement. So, the following is a rough "best practice" guide..

.jpg (jpeg)
This type is best suited to high colour images like photos and artwork.
This is probably the most common format you'll come across, especially as most digital cameras will generate them.

.gif (gif)
This type is used more for low colour images, like application screenshots. It also supports animation through frames, so you'll be using a .gif if you want one of those flashy animated avatars

.bmp, .png and .tif(f)
These formats are useful in their appropriate fields, but for the purposes of web-based optimisation i'm going to ignore them for now. (.png's are actually a web optimised format.. but for now I'm sticking with the two formats above)

Worth pointing out too, is that if you use the "printscreen" button on your keyboard and paste the resulting image into an image program you will get a .bmp.
You'll see later on in the guide whether you want it to stay as a .bmp file though.


2) Size

The physical dimensions of your image are as important as using the correct format (type).
The golden rule here is: know your audience.

You don't want people to have to scroll around their screen to view your image.
The lowest (i hope) common resolution that people will be using to view your image will be 800(width) x 600(height) These units are measured in pixels. Look out for where pixels are mentioned in the next section to see why that measurement is important.

The size also relates to the amount of data someone must download before they can see the image.
Obviously, the smaller the better.
But, you don't want to compromise on the quality of your image.
This, again, is a judgement you'll have to make on your own, which hopefully will be much easier once you've read the next section.


3) Playing with your picture

(Just in case you get confused by the screenshots, the web specific component of Adobe Photoshop is called Imageready)

Once you have opened your image, the first job is to make it a manageable size.


Resizing Imageready


The important bit here is to remember the point made earlier about pixels and the measurement 800 x 600.
You want to keep your images at or below the 600 pixel mark.
This is the easy bit as you can see in the screenshots.
Just key in a value to one of the boxes marked "width" and "height" and it will automatically change the second value (that is if you've got a tick in the box marked constrain proportions, otherwise you can change each value independantly)


Resizing Paint Shop Pro



In PSP it's very similar to Imageready.
From the main menu select Image then Resize which should give you the window above.
Marking the radio button under Pixel size will allow you to adjust your image in pixels.
Next, type in the width or height you want for your resized image.
If you make sure to check the Maintain aspect ratio box, the other dimension will automatically adjust.


Optimising General

-> So, which file format should I choose, jpeg or gif??
As I've described in the file format section above, the general rule of thumb will be: high number of colours = jpeg, low number of colours = gif.
But for a practical example you can skip to the final section for an image comparison, which should give you a good idea.


Optimising Imageready



The Imageready settings can seem a bit complicated. The only ones you'll need to worry about for now are Quality for jpeg settings and Colors for gif settings.
The optimisation settings are found at the top right of the workspace if you're using the default palette locations.
Above are the settings I use most often for .jpg (left) and .gif (right).
Duplicate what you see in the boxes in my example if you wish, but it's good to experiment.
You'll soon see which settings give you better results.

To get the best image quality to filesize ratio you will need to decrease the quality (jpeg) and colors (gif) until you notice the image quality degrading. Once you've settled on the quality you're happy with, you can sit back and relax.. because thats it. (!don't forget to save it File menu --> Save optimized!)


Optimising Paint Shop Pro



Again, very similar to Imageready, apart from some of the terms used. Instead of decreasing the jpeg quality setting, we want to increase the compression value.
The same tactic as Imageready applies for PSP in the gif color settings.. bring it down until you see the image quality degrade.
(!save your work!)


Final Comments

The best advice of all is to go and play.
Get stuck in, find all the settings and tweaks and test them out... thats what an undo option is for .
You will find that every image will have its own sweet spot as far as optimisation is concerned, so you'll be learning all the time just like me and everyone else.
Don't feel shy if you want help, there are lots of willing and mostly able people lurking around the forum who you can email or PM.

If you want some more advanced tutorials, there are hundreds out there, just google it!!
Email me here if you have any questions about this tutorial or any subjects raised within it.

Happy Optimising .. (or whatever it is you guys do for fun)


Image Comparison

I added this section to give you a chance to see the theory in action:
(Have a look at which images you think are the best quality, then right click the images, select properties and compare the filesizes. You might be surprised at some of them )






Hosting your creation

The NTHW forums allow attachments, however, this feature although convenient is a big bandwidth hog for the forum hosts and therefore you should try to arrange hosting for your image elsewhere first.
If you have space on your own webspace you can upload your image using your preferred FTP client.
Alternatively, you can use an image hosting service such as this one: link which is free.
Jon M is offline   Reply With Quote
Advertisement
Old 07-01-2004, 23:01   #2
homealone
Guest
 
Posts: n/a
Re: Image Optimisation Guide

for some reason, I couldn't get the file properties for the graphics comparisons, however, that is a really helpful post, thanks s1lv3r.

I have to spread before giving again, but thanks for yours - appreciated and back at ya
  Reply With Quote
Old 07-01-2004, 23:08   #3
keithwalton
Inactive
 
keithwalton's Avatar
 
Join Date: Jul 2003
Location: Southampton
Age: 30
Posts: 1,089
keithwalton has reached the bronze age
keithwalton has reached the bronze agekeithwalton has reached the bronze agekeithwalton has reached the bronze agekeithwalton has reached the bronze agekeithwalton has reached the bronze agekeithwalton has reached the bronze age
Re: Image Optimisation Guide

Just a quickie on those image things, the gif's stick out like a saw thumb for there lack of colour's.
But on the webbie images the last one although it claims to be a bmp, its quite noticable that its been a jpg / other compressed format at some point in time because of the artifacts around the lettering.

Remember compression is cumulative each time you hit the same button the routine is run again so stay uncompressed / lossless till the last possible moment.

Gif's will be small because there 8bit not 24bit though the compression isnt as good so often you can get jpegs with a lower filesize than gif's :-)

K
keithwalton is offline   Reply With Quote
Old 07-01-2004, 23:18   #4
Jon M
Inactive
 
Jon M's Avatar
 
Join Date: Oct 2003
Location: Bracknell
Age: 36
Services: Freeview, NTL phone, NTL 4mbit BB SACM
Posts: 3,281
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Send a message via MSN to Jon M
Re: Image Optimisation Guide

Quote:
Originally Posted by keithwalton
Just a quickie on those image things, the gif's stick out like a saw thumb for there lack of colour's.
But on the webbie images the last one although it claims to be a bmp, its quite noticable that its been a jpg / other compressed format at some point in time because of the artifacts around the lettering.

Remember compression is cumulative each time you hit the same button the routine is run again so stay uncompressed / lossless till the last possible moment.

Gif's will be small because there 8bit not 24bit though the compression isnt as good so often you can get jpegs with a lower filesize than gif's :-)

K
thanks for the comments, but they're not things I'm too worried about..

I don't have Paint Shop Pro installed so I had to work with the images I could find on google.
Sorry for the quality, if you have PSP can you do some screenshots for me? I'd appreciate it.

The bitmap was a last minute inclusion.. it was taken directly from the jpeg version.. so I'm not surprised by the artifacts
Jon M is offline   Reply With Quote
Old 08-01-2004, 11:43   #5
Nemesis
cf.mega poster
 
Join Date: Jun 2003
Location: Surrey
Age: 47
Services: Virgin stuff
Posts: 6,629
Nemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny star
Nemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny starNemesis has a nice shiny star
Send a message via MSN to Nemesis
Re: Image Optimisation Guide

Well done S1lv3r ... cracking post ... can't rep you again yet tho'

Do you want PSP ?? PM Me
Nemesis is offline   Reply With Quote
Old 08-01-2004, 12:11   #6
Sociable
Inactive
 
Sociable's Avatar
 
Join Date: Jun 2003
Location: Knebworth
Age: 61
Posts: 1,816
Sociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation eraSociable has entered a golden reputation era
Re: Image Optimisation Guide

Way to go s1lv3r excelant post will rep too after I have spread some more about bro.
Sociable is offline   Reply With Quote
Old 08-01-2004, 12:17   #7
Jon M
Inactive
 
Jon M's Avatar
 
Join Date: Oct 2003
Location: Bracknell
Age: 36
Services: Freeview, NTL phone, NTL 4mbit BB SACM
Posts: 3,281
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Send a message via MSN to Jon M
Re: Image Optimisation Guide

Thanks guys
I'm most interested in if (hopefully) someone comes back to say that they've used it though. That will have made it worthwhile.
Jon M is offline   Reply With Quote
Old 08-01-2004, 12:33   #8
Xaccers
Inactive
 
Xaccers's Avatar
 
Join Date: Jun 2003
Location: Milling around Milton Keynes
Age: 37
Posts: 12,969
Xaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny stars
Xaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny starsXaccers has a pair of shiny stars
Re: Image Optimisation Guide

Can you believe that according to the IT teacher at my ex's school "bitmaps are the industry standard"
Now matter how much she was told hardly anyone uses bitmaps due to their size, she wouldn't have it.
Xaccers is offline   Reply With Quote
Old 08-01-2004, 12:34   #9
Mick
Ten
Cable Forum Team
 
Mick's Avatar
 
Join Date: Jun 2003
Posts: 8,596
Mick has disabled reputation
Re: Image Optimisation Guide

I'm sure somebody will s1lv3r and I have repped you. Thank you once again.
Mick is offline   Reply With Quote
Old 08-01-2004, 12:39   #10
Bifta
Inactive
 
Join Date: Jul 2003
Location: Eglinton, Co. Derry
Posts: 7,640
Bifta has a nice shiny starBifta has a nice shiny star
Bifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny starBifta has a nice shiny star
Re: Image Optimisation Guide

Quote:
Originally Posted by Xaccers
Can you believe that according to the IT teacher at my ex's school "bitmaps are the industry standard"
Now matter how much she was told hardly anyone uses bitmaps due to their size, she wouldn't have it.
In a way she's correct, jpg = bitmap, gif = bitmap, bmp = bitmap, png = bitmap, tiff = bitmap. Unless she was of course referring specifically to .bmp's which are the windows bitmap format, which apparently is the only format that actually gives larger file sizes when compressed, and which would mean she was talking out of her bottom.
Bifta is offline   Reply With Quote
Old 08-01-2004, 12:46   #11
Jon M
Inactive
 
Jon M's Avatar
 
Join Date: Oct 2003
Location: Bracknell
Age: 36
Services: Freeview, NTL phone, NTL 4mbit BB SACM
Posts: 3,281
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Send a message via MSN to Jon M
Re: Image Optimisation Guide

Quote:
Originally Posted by Xaccers
Can you believe that according to the IT teacher at my ex's school "bitmaps are the industry standard"
Now matter how much she was told hardly anyone uses bitmaps due to their size, she wouldn't have it.

maybe i should do an ultra beginner version with single syllables so you can email it to her

to all: thanks for the copious amount of reps.. my points have almost doubled overnight..
Jon M is offline   Reply With Quote
Old 08-01-2004, 16:10   #12
Ben
Inactive
 
Join Date: Jun 2003
Location: Hertfordshire
Age: 31
Posts: 602
Ben will become famous soon enoughBen will become famous soon enoughBen will become famous soon enough
Send a message via MSN to Ben
Re: Image Optimisation Guide

Thats some great information that is worthy of 5 rep points from an admin

Thanks
Ben is offline   Reply With Quote
Old 08-01-2004, 16:35   #13
keithwalton
Inactive
 
keithwalton's Avatar
 
Join Date: Jul 2003
Location: Southampton
Age: 30
Posts: 1,089
keithwalton has reached the bronze age
keithwalton has reached the bronze agekeithwalton has reached the bronze agekeithwalton has reached the bronze agekeithwalton has reached the bronze agekeithwalton has reached the bronze agekeithwalton has reached the bronze age
Re: Image Optimisation Guide

I forgot to say well done in my post as well :-) I'm also glad to hear that my eyesite isnt decieving me and that those artifacts do indeed exist ;-)

I was rather shocked when i first installed xp to find the version of mspaint that is bundled with it actually supports jpegs :-) bitmaps will allways be hughe as they contain no compression whatsoever, if you rar / zip it you'll usually get a rather large decrease in size where as jpegs and such you'll get little to none and sometimes it'll be bigger (headers for the rar file etc)

K
keithwalton is offline   Reply With Quote
Old 08-01-2004, 16:59   #14
altis
Inactive
 
altis's Avatar
 
Join Date: Jun 2003
Location: Warrington ntl:81304 Altitude: 12m (and falling)
Posts: 4,495
altis has a nice shiny staraltis has a nice shiny star
altis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny staraltis has a nice shiny star
Re: Image Optimisation Guide

Well done s1lv3r - a lot of effort has gone into that.

Just to add my pennyworth. I would suggest it's best to use the JPG format for photographs and GIF or PNG for computer generated images (bit like what you said really). Please don't dismiss the PNG format - it offers many advantages over GIF. The compression is lossless, the files are smaller, there are more colours and it is not subject to a patent claim by Compuserve! More details available here:
http://www.libpng.org/pub/png/

Here's your screenshot as a PNG - only 4334 bytes!


PS. Why is your BMP image showing compression artefacts?
altis is offline   Reply With Quote
Old 08-01-2004, 17:19   #15
Jon M
Inactive
 
Jon M's Avatar
 
Join Date: Oct 2003
Location: Bracknell
Age: 36
Services: Freeview, NTL phone, NTL 4mbit BB SACM
Posts: 3,281
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Send a message via MSN to Jon M
Re: Image Optimisation Guide

Quote:
Originally Posted by altis
Please don't dismiss the PNG format - it offers many advantages over GIF. The compression is lossless, the files are smaller, there are more colours and it is not subject to a patent claim by Compuserve!
Yes, I'm aware I missed out some valuable information, hence my comment in the guide specifically about PNG's. But I had to make some trade off's to leave it semi-readable and understandable to the beginner audience it's intended for.

But thanks to your post.. I no longer have to
Quote:
PS. Why is your BMP image showing compression artefacts?
see post #4
Jon M is offline   Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Google Search




All times are GMT +1. The time now is 05:00.


Server: titan.cableforum.co.uk
Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2014, vBulletin Solutions, Inc.


SEO by vBSEO 3.3.2