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. |
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:) |
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 |
Re: Image Optimisation Guide
Quote:
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 ;) |
Re: Image Optimisation Guide
Well done S1lv3r ... cracking post ... can't rep you again yet tho' :D
Do you want PSP ?? PM Me |
Re: Image Optimisation Guide
Way to go s1lv3r excelant post will rep too after I have spread some more about bro.
|
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. |
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. |
Re: Image Optimisation Guide
I'm sure somebody will s1lv3r and I have repped you. Thank you once again. :)
|
Re: Image Optimisation Guide
Quote:
|
Re: Image Optimisation Guide
Quote:
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: |
Re: Image Optimisation Guide
Thats some great information that is worthy of 5 rep points from an admin :)
Thanks :tu: |
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 |
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? |
Re: Image Optimisation Guide
Quote:
But thanks to your post.. I no longer have to ;) Quote:
|
All times are GMT +1. The time now is 03:12. |
Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.