To make matters even more confusing, neither do PC or Mac computers display images the same way. In short, images created on a Mac appear much darker on a PC, and images created on a PC appear much lighter on a Mac. Pixel size differences (72 pixels per inch on a Mac and 96 pixels per inch on a PC at 640x480) make font sizes vastly different.
So, there has got to be ways around these differences, right?
Right.... To an extent. What we'll cover in this article are a couple of tips to make sure that your pages are displaying nicely regardless of the system or browser, and to help your pages download as quickly as possible no matter what they're being viewed on.
Step One: Compress the Graphics
Before we do anything else, we have to make sure that our graphics have been optimized for the web.
Most graphic programs have an option under file called "Save for Web". Once you have created the graphic you need, made sure you like it exactly as it is, and are ready to upload it for your website take a minute to open this original, great graphic in your software and click this option.
When you click Save for Web, you should be able to preview the end result before actually saving. In Photoshop, you will be given this option and a "slider" that lets you move from maximum to low quality when saving as a JPEG. As you move between qualities, you will notice that the file size drops or increases. Look even closer, and you will see a spot that shows approximately how much time it will take to download that graphic on various connection speeds.
The actual method for optimizing your graphics will vary according to the graphics software you are using. The end result is the same - you NEED NEED NEED to take a minute and create the highest-quality vs. lowest file size image that you can.
The two main Internet graphic formats, JPEG and GIF, have some compression built in. There are major differences between the two formats, as we'll see, and there are always ways of compressing that image down just a bit more to squeeze as much time out of it as you can.
JPEG
Is a loose compression method. In other words, to save space it just throws away parts of an image. The JPEG algorithm first divides the image into squares (you can see these squares on badly compressed JPEGs - commonly called "pixellating"). Then it uses a math equation called Discrete Cosine Transformation to turn the square of data into a set of curves that go together to make up the image. Depending on how much you want to compress the image the algorithm throws away the less significant part of the data (the smaller curves) which adds less to the overall "shape" of the image. This means that, unlike a GIF, you get a say in how much you want to compress an image by. However, the loose compression method can generate unwanted effects such as false color and blockiness.
Here are two examples of JPG's using different compressions.
GIF
Stands for Graphics Interchange Format. It's a loss-less method of compression. This means when the program that creates a GIF squashes the original image down, it takes care not to lose any data. It uses a simple substitution method of compression.
The maximum compression available with a GIF depends on the amount of repetition there is in an image. A flat colour will compress well sometimes even down to one tenth of the original file size while a complex, non-repetitive image will fare worse, perhaps only saving 20% or so.
One problem with GIFs is that they are limited to a palette of 256 colors or less. Also, because you have no control on the compression amount, download speeds will greatly vary when using a GIF. Personally, I recommend using GIFs only when you need them for animation and relying on the flexibility of a JPEG for anything else.
ANTI-ALIASING
Anti-aliasing is a technique used to make curved edges appear smooth on a computer screen.
It's mostly used with large font lettering but can be used with graphics also. The effect is achieved by using intermediary colors at the borders, which obscure the hard edges.
Anti-aliasing is a clever way of getting around the low resolution of computer screens and making your text appear as smooth as if they'd just come from a glossy magazine.
When using text in a graphic or using a graphic to replace text always anti-alias the text. In Photoshop, you are given this option right in your toolbar - just tick the checkbox.
More information on Anti-Aliasing will be available in a separate tutorial.
Step Two: Take a look or Two
Since there is such a big difference between platforms and browsers, make sure that you "test-drive" your graphics - and layout in general, for that matter - before you decide that you're "done". Try to view your site in as many different browsers as you can get your hands on, and then take a look at it on a different platform - If you use a PC, see how the other half surfs on a Mac, and visa versa.
Another step you should take to help reduce download speeds on your page is to use the Height and Width tags on your images. WYSIWYG Editors will usually do this for you. If you do your html by hand, make sure that there is a height and width specified for every image on your page.
Finally, the more that you recycle the images you use throughout your site, the better the visitor's experience will be. Once an image is in the browser cache, the
browser will not download it again. This means that if you use the exact same navigation bar image for ten separate pages, the browser will only download it once.
For Website Designing and Development
Website Designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705
Source : http://www.webdesign.org/web-design-basics/website-usability/design-usability-and-graphics-compression.6072.html
