Cable Forum

Cable Forum (https://www.cableforum.uk/board/index.php)
-   Internet Discussion (https://www.cableforum.uk/board/forumdisplay.php?f=25)
-   -   Image Optimisation Guide (https://www.cableforum.uk/board/showthread.php?t=6064)

Jon M 07-01-2004 23:41

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
http://s1lv3r.com/gfx/image_guide/imageready_menu.gif http://s1lv3r.com/gfx/image_guide/imageready_resize.gif

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

http://s1lv3r.com/gfx/image_guide/psp_resize.gif

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

http://s1lv3r.com/gfx/image_guide/im...y_optimise.gif

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

http://s1lv3r.com/gfx/image_guide/psp_menu.gif http://s1lv3r.com/gfx/image_guide/psp_optimise_jpg.gif http://s1lv3r.com/gfx/image_guide/psp_optimise_gif.gif

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 ;))

http://s1lv3r.com/gfx/image_guide/app_16.gif http://s1lv3r.com/gfx/image_guide/app_low.jpg http://s1lv3r.com/gfx/image_guide/app.bmp

http://s1lv3r.com/gfx/image_guide/ducky_web_32.gif http://s1lv3r.com/gfx/image_guide/ducky_low.jpg http://s1lv3r.com/gfx/image_guide/ducky_med.jpg


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.

homealone 08-01-2004 00:01

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:)

keithwalton 08-01-2004 00:08

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

Jon M 08-01-2004 00:18

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 ;)

Nemesis 08-01-2004 12:43

Re: Image Optimisation Guide
 
Well done S1lv3r ... cracking post ... can't rep you again yet tho' :D

Do you want PSP ?? PM Me

Sociable 08-01-2004 13:11

Re: Image Optimisation Guide
 
Way to go s1lv3r excelant post will rep too after I have spread some more about bro.

Jon M 08-01-2004 13:17

Re: Image Optimisation Guide
 
Thanks guys :blush:
I'm most interested in if (hopefully) someone comes back to say that they've used it though. That will have made it worthwhile.

Xaccers 08-01-2004 13:33

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.

Mick 08-01-2004 13:34

Re: Image Optimisation Guide
 
I'm sure somebody will s1lv3r and I have repped you. Thank you once again. :)

Bifta 08-01-2004 13:39

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.

Jon M 08-01-2004 13:46

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.

:rofl:
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.. :spin:

Ben 08-01-2004 17:10

Re: Image Optimisation Guide
 
Thats some great information that is worthy of 5 rep points from an admin :)

Thanks :tu:

keithwalton 08-01-2004 17:35

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

altis 08-01-2004 17:59

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!
http://homepage.ntlworld.com/altisuk/temp/app_16.png

PS. Why is your BMP image showing compression artefacts?

Jon M 08-01-2004 18:19

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 ;)


All times are GMT +1. The time now is 17:16.

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.