Creating Small, Fast Loading Graphics
for Web Pages
© 2002 by Walt Howe
(last revised 23 January 2010)
Uses of GIF, JPEG, and PNG
Ways to reduce file size
How to speed loading
Some opinionated recommendations
Introduction.. While catchy graphics make your web page attractive and get the viewer's interest, many graphics have the opposite effect. For every 10 seconds it takes for your graphics to load before your page contents can be seen, you risk losing 20% of your remaining viewers. This page tells you how to minimize your graphics files and achieve fast loading pages.
There are only two types of graphic files that are supported by older graphical web browsers: GIF and JPEG. A third type, PNG, is also supported by most current browsers, but not browsers released before mid-1997. Netscape and MSIE support PNG beginning with version 4.0. You can create graphics in other formats, but before posting them, they must be converted to one of these three types. Simple, readily available low-cost shareware like LView Pro and Paint Shop Pro will do all the conversions and resizing you need. If you are doing professional work, you can get better performance with the expensive Adobe PhotoShop.
This short guide will often tell you what to do, but not how to do it. The "how to" is a function of the specific software you are using, and we can't try to cover it all here. Learn to use your software, and you can always ask for help in the Publishing on the Web Forum if you are a Delphi member.
Uses of GIF, JPEG, and PNG. The most important thing to understand is when to use each type. GIF and JPEG use very different forms of encoding and compression of the data that give them quite different uses. GIF and PNG files work best on solid colors and sharp-edged transitions from one color to another along a line, such as text does. GIF is limited in the total number of colors to 256 or less. PNG can use a larger palette, but doing so significantly increases file size. JPEG works best on continuous gradations of many colors or grey tones, such as color or black and white photographs. JPEG does not handle sharp edges as well, tending to blur them a little. When in doubt, try both ways and see which looks better and which is smaller. In summary, here is when to use each type:
GIF and PNG
- text and text art
- poster art
- line drawings
- any art which needs transparent backgrounds
- color photographs
- black and white photographs, unless very high contrast
- 3D renderings from VRML or ray tracing software
- art with many blends and gradients
Ways to reduce file size. The first step in reducing file size is to use the correct format, as explained above. There are a number of other things you can do.
- If using GIF or PNG, your final artwork should have no higher resolution than 72 dots (pixels) per inch. Work in higher resolution if you prefer while creating artwork, but the final art should be saved at 72 dpi. Most computer screens only show 72 dpi or 96 dpi, and higher resolutions enlarge the files without affecting the quality seen on screen.
- The next consideration is an obvious one. Don't make the graphic any larger on screen than it needs to be. Older PCs with VGA screens only encompass an area of 640 x 480 pixels and some of the 480 is taken up by the browser's controls and menus. Old Mac screens may be narrower than 640. These days you can design for 800 x 600 and all but the oldest computers will handle it. In any case, don't try to fill the screen. The smaller the image size, the quicker it loads. You can reduce screen size by cropping or by shrinking. Once you reduce size, NEVER try to increase it again. Save the full size files in case you have to re-edit them.
- GIF and PNG files can often be reduced in size by selecting less than the standard 256 colors (referred to in some software as 8-bit). If you don't use that many different colors, change to a lower number. Some software lets you type in the number of colors. Other software asks you to select how many bits to use in encoding the colors. Here is how many colors can be used with 8-bit encoding on down:
There are many more colors than the 256 colors that the typical basic computer can display, of course. To represent other colors, dithering is used to combine dots of the available colors close together to emulate the desired color. Dithering, viewed closely, can be unattractive. This is compounded by the fact that different browsers and different platforms use different color palettes. Web page designers can avoid this by selecting colors from a browser-safe palette of 216 colors. Software like Photoshop and Paint Shop Pro will let you set up the browser-safe palette and work with only those colors. You can learn more about dithering, browser safe colors, and a technique called anti-aliasing to avoid jagged edges.
- JPEGs use a form of coding that is called lossy. A JPEG file can easily be saved with less detail and still maintain all the attractiveness and information that you need, while reducing the size of the file. When you convert a file from another format and first save it as a JPEG, select "low quality" or a low percentage for your save and see what it looks like on a computer screen. In most cases, you won't be able to see the difference.
- If you need help reducing pictures, particularly in signatures, visit the Resizr Site site for some free help, and if you are a Delphi Forums member, visit the Downsize Your Sig Forum.
How to speed loading. There are several things you can do to make screen loading faster--or at least seem faster.
Quality Control. When you have finished your graphics, it may look great on your computer, but that doesn't mean you are through. What do your screens look like on other computers?
- Always use height and width parameters in your IMG tags to tell the browser the exact size in pixels of the graphic. You can tell the size from your graphics software. The browser cannot load text on screen until it has figured out the exact size of the graphics so it can lay out the text on the screen. If you do not specify the size, it must download the graphics before it can lay out the screen, and that leaves a long delay with nothing appearing on screen. But if you specify the sizes of the graphics, it computes the layout immediately and loads the text before the graphics. Even with large, slow loading graphics, readable text will help hold the audience that would otherwise leave if nothing visible was happening. Be sure to do it for all graphics, even the smallest ones, like bullets.
- Try to keep total page size under 30K, if possible. Try to keep individual graphics under 10K. You will not always be able to reach these goals, but it is worth the effort. If you have a large, beautiful picture that you absolutely cannot reduce in size, don't put it on a main page. Create a small icon of it that people can click on to link to the larger main picture, and warn them how large it is.
- Another technique you can use to minimize loading times is to make use of browser caches. Graphics and other files are stored for a period of time by browsers in a cache on the browser's hard drive. When the same file is called again, it will load immediately from cache, if available, instead of transferring over the nets. To take advantage of this, never put identical graphics in more than one folder (directory) on your server. If you reuse the same buttons or icons or separators repeatedly, always call them from the same place.
- A technique you can use to give the appearance of faster loading is to use progressive GIF, PNG, and JPEG files. GIF type 89, PNG with layering, and progressive JPEG files will load in at a very low resolution in a first pass and layer in progressively more detail in subsequent passes. It may take slightly longer overall, but since you can see the picture forming, time passes quicker.
- Macs generally look brighter than PCs. On SVGA, screens may look wonderful, but on VGA or notebook screens look terrible. A screen may look perfect in Firefox, but look terrible in Microsoft Internet Explorer. The answer is to view your pages as many ways as you can. If you are serious about web page construction, at least set up both Firefox and MSIE on your system and look at your pages with both. If you can, check it out with Safari and Opera and Chrome, too. If you only use PCs or Macs, ask someone you trust with the other type of system to look at your pages. If you really want to be thorough, look at your pages from AOL, too. There are about millions of people using AOL as a base, and even with their very latest software, there are differences in what they see.
- A site called BrowserShots.org. is designed to show you how your screen looks from different browsers.
Some opinionated recommendations.
- Unless the purpose of your site is to show the latest, the coolest, and the newest things, don't fill your pages with them. Always use graphics and multimedia for a purpose--not just because you can do it.
- Minimize the use of endlessly looping animated graphics and text scrolling across a screen. They are attention getters at first, but they soon become irritants instead. Limit your animations to a set number of repetitions, not an endless loop.
- Personally, I hate all scrolling text. It doesn't match my reading speed, and waiting for it increases my irritation rapidly. I find it particularly obnoxious if text is set to scroll across the status bar at the bottom. I may be trying to read a URL from a link or other information that normally appears there, and the scrolling text prevents it. If you must scroll text, put it anywhere but on the status bar.