The first thing that we should know about the two most popular Internet Browsers,
Netscape Navigator and Internet Explorer, is that they don't display web pages in
the same way.
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.
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
