The main best practices consideration as regards graphics is that they may be overly large or you might have too many of them, resulting in poor performance. But it also makes sense to pay attention to the quality of the images themselves.
Avoid having multiple copies of the same image; use an image resource design element or other common resource area so that the user's browser or Notes client can take maximum advantage of caching.
Try to use PNG files wherever possible. Modern browsers now offer full support to PNG format which not only supports most of the palette options offered by GIF but is also much smaller in size. In addition, PNG graphics support use of an "alpha layer," by which you can make pixels partially transparent. This lets you use the same image on different backgrounds without worrying about edge effects where the border of your graphic is jagged, or where there's a "halo" of wrong-color edge pixels.
Always use 100% size of your image. There is no need to scale your images because even if you do, the browser or client will still download the full image. Therefore, in the end, your code ends up doing more work rather then less.
NOTE: Because there is such a wide variety of screen sizes and resolutions these days, in some cases it might make sense to scale graphics down somewhat so that they can be zoomed in a little without getting jagged or blurry. But be sensitive to the fact that the browser/client will cache the entire image, and don't use a higher resolution than you actually need. Don't for instance, make a thumbnail by scaling down a full-screen image. Have a separate thumbnail file.
Use freely available tools to optimize and analyze image palettes and size, and try and filter out the unwanted components. This will help you, especially, in low-bandwidth environments. Some of the tools that you can use are imagemagick
, and pngcrush
In the Notes Client
When placing graphics on forms and subforms, use image resources rather than pasted or imported graphics, if there's any chance that the image might be reused.
If not using an image resource, use imported graphics in preference to copy/paste. Pasting uses a proprietary Notes bitmap format encoding, which is not very efficient. Importing preserves the original format, so that your efforts to minimize image file size beforehand aren't wasted.
In Web Applications
For graphics-heavy applications, consider using image sprites which contain a collection of several images combined into a single image file. You can then use these sprites through a combination of tags and CSS properties.
Move your more often used resources to the server’s html
directory. Loading your files from the server file system is faster then loading from the individual database, and takes maximum advantage of browser caching (since all the applications on the server can share those files). You also have the option of compressing your files using GZip and then upload them to the server [note: need detail here].
Parent topic: 5.0 User interface considerations