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:
|
Re: Image Optimisation Guide
Thanks s1lv3r,I found it very usefull,shame I did not see it before I posted a picture today :blush: it was too small :cry: but now next time it will be bigger :wavey:
Does anyone know of a Tutorial for Photoshop 7,I have it but dont know how to use it :banghead: Who said size does not count |
Re: Image Optimisation Guide
Quote:
http://tiemdesign.com/HOWTO/Photoshop.htm |
Re: Image Optimisation Guide
Quote:
|
Re: Image Optimisation Guide
** Updated 19/01/04 **
- Added small section on image hosting Hope this helps some of you. Don't forget that the free image hosting can be used anywhere.. not just here ;) |
Re: Image Optimisation Guide
Great, I should do one on Irfanview - www.irfanview.com
For simple image preparation tasks, this piece of freeware does it all, and with less bloat. One neat trick in Irfanview is to select an area, and then apply the pixelize effect (it applies ONLY to the selection) - great for masking personal info from screenshots. In Irfanview, the CROP function is on the EDIT menu, but the resize and effects are on the IMAGE menu. It can also serve as a screengrabber as well. Sure, Photoshop and Paintshop Pro can do a lot of things that this can't, including cost REAL MONEY, but I've never felt the need for anything else in screenshot preparation - the only thing missing is a compression size/quality preview. |
Re: Image Optimisation Guide
Do you still need the PSP screenshots?
|
Re: Image Optimisation Guide
No, I updated those a while back. Thanks anyway :tu: :)
|
Re: Image Optimisation Guide
slightly :notopic: but am i right in thinking that the GIF image format is actually owned by somebody (AOL springs to mind) and is thus you should not really be using it without permission, even though most imaging software has the ability to create GIFs?
|
Re: Image Optimisation Guide
Quote:
http://www.libpng.org/pub/png/#history |
Re: Image Optimisation Guide
Quote:
|
Re: Image Optimisation Guide
You forgot to mention the wonderful Save for Web facility in Photoshop which gives you three options for jpgs,gifs and their possible download times and resizing.Look under File.
It's a very useful tool and itââ‚ ¬ÃƒÂ¢Ã¢â‚¬Å¾Ã‚¢s quicker because you donââ‚Âà ‚¬ÃƒÂ¢Ã¢â‚¬Å¾Ã‚¢t have to open Image Ready. Incog.;) |
Re: Image Optimisation Guide
http://burnallgifs.org/ - the best site on the GIF issue, why software ptents are a bad idea (you may have noticed another website protest recently).
|
Re: Image Optimisation Guide
Hi Ho s1lv3r
If I view this thread using Opera I never see any pictures in post #1. Also Opera keeps tying itself in knots alternately 'sending request to s1lv3r.com' and 'connecting to s1lv3r.com'. What's more, it keeps doing this, even if I move away to another thread or even a completely different web site. I can only stop it by closing Opera and starting it up again. Something similar happens in Firefox but not if I use IE. |
Re: Image Optimisation Guide
i'll have a look into that, i've got firefox and opera so testing will only take a minute or two.
|
Re: Image Optimisation Guide
fixed. I forgot to update my hotlink protection since the site changed to cableforum from nthw.
|
Re: Image Optimisation Guide
Bit of a big bump, but I've just found an excellent source of information about images. It's a site created by TASI (Technical Advisory Service for Images) which is a support unit for the UK academic community. The information is well written and easy to read. Recommended.
http://www.tasi.ac.uk/advice/advice.html |
Re: Image Optimisation Guide
Quote:
:nono: |
Re: Image Optimisation Guide
Quote:
|
Re: Image Optimisation Guide
Mmmm.
Oh, you mean the previous last reply lol. Yeah. Guess so huh. :D |
Re: Image Optimisation Guide
Thats some great information that is worthy of 5 rep points
share more ... |
Re: Image Optimisation Guide
Old thread, but seeing as image optimisation never dies...
Enter smush.it! It's a ridiculously simple image optimiser, 1 click optimisation, it works as a firefox plugin and gives completely lossless compression. You just go to a page, click the smush.it button and it takes you to a page where you can download the optimised page images in a zip file. They even have an API if you're that way inclined! Regards, Darryl |
Re: Image Optimisation Guide
Why cant i access that Smush.it link?
It just says the page isnt redirecting properly. |
Re: Image Optimisation Guide
Quote:
That link is 9 years old maybe the site doesn't exist now? |
Re: Image Optimisation Guide
|
Re: Image Optimisation Guide
Quote:
|
All times are GMT +1. The time now is 09:13. |
Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.