One of the most frustrating things to a person browsing the web is waiting for a site to load...make sure that your site is relatively quick to load, no matter what you put on it. There are obviously a number of factors that can affect how quickly a web site loads, but try to make sure that excessive file sizes isn't one of them.
As a rule of thumb, a main page shouldn't be a whole lot more than 50K or so. This, under normal conditions, will load the page in a few seconds, but still allow some fairly good use of graphics. If you have significantly more text than that, consider separating it onto separate pages.
Also, remember that most browsers keep images stored in a cache, so if you use the same images on different pages in your site, the browser will likely use the file from the cache, and it won't need to download it again.
One way of keeping the file sizes down, but retaining the freedom to use graphics to create a good design, is to be aware of the different kinds of graphic formats, and knowing how to use that to your advantage.
Graphics of a photographic nature can be stored in a JPEG format with a higher compression ratio, as the quality loss due to compression will be less noticeable. The JPEG format uses what's known as 'lossy' compression, meaning that there is a tradeoff between file size and quality...some of the detail is lost when the file is stored, and you can decide how much based on how big of a file you want to end up with (although you often can't tell the difference).
If you want to make part of the image transparent, or you want to ensure that it displays exactly the same all the time, then use GIF images...although there are a few tricks to making the files smaller, while maintaining the image quality. Try to use graphics software that allows control over the image palette (the colours that are used to make up the image). Most packages will allow you to save a file with an 'adaptive' palette, which picks the most common colours from the image to put in the palette, instead of using a standard palette. The higher quality software packages will allow even better optimization, such as rearranging the palette automatically so that the more common colours have early palette entries, or allowing you to adapt the palette for a smaller number of colours, so you can see how the image will look with 256 colours, or 128 colours, etc. This allows you to make similar tradeoffs between image quality and file size with GIF images.
As a rule of thumb, a main page shouldn't be a whole lot more than 50K or so. This, under normal conditions, will load the page in a few seconds, but still allow some fairly good use of graphics. If you have significantly more text than that, consider separating it onto separate pages.
Also, remember that most browsers keep images stored in a cache, so if you use the same images on different pages in your site, the browser will likely use the file from the cache, and it won't need to download it again.
One way of keeping the file sizes down, but retaining the freedom to use graphics to create a good design, is to be aware of the different kinds of graphic formats, and knowing how to use that to your advantage.
Graphics of a photographic nature can be stored in a JPEG format with a higher compression ratio, as the quality loss due to compression will be less noticeable. The JPEG format uses what's known as 'lossy' compression, meaning that there is a tradeoff between file size and quality...some of the detail is lost when the file is stored, and you can decide how much based on how big of a file you want to end up with (although you often can't tell the difference).
If you want to make part of the image transparent, or you want to ensure that it displays exactly the same all the time, then use GIF images...although there are a few tricks to making the files smaller, while maintaining the image quality. Try to use graphics software that allows control over the image palette (the colours that are used to make up the image). Most packages will allow you to save a file with an 'adaptive' palette, which picks the most common colours from the image to put in the palette, instead of using a standard palette. The higher quality software packages will allow even better optimization, such as rearranging the palette automatically so that the more common colours have early palette entries, or allowing you to adapt the palette for a smaller number of colours, so you can see how the image will look with 256 colours, or 128 colours, etc. This allows you to make similar tradeoffs between image quality and file size with GIF images.
No comments:
Post a Comment