Avoiding Large Graphics
This technique gives a possible implementation for CategoryBpLargeGraphics and CategoryBpImagesResizing using various technologies.
Given that the default minimal capability is 20kb, unless you know (e.g. via having implemented CategoryContentAdaptation), that provides an upper bound of less than 20kb for image size.
If a large image is necessary (for example to make the smallest useful part of a map legible) link to it in a page of its own either from a thumbnail or from a plain text link. See also CategoryBpLimited and CategoryBpSuitable
It is important to choose an appropriate format for images.
- PNG
- Useful bitmap format for a small number of colors. Supports transparency, and optimises the colour table
- JPEG
- Useful bitmap format for images with many colours, such as photographs. Its compression is "lossy" - roughly, it blurs things. It is therefore not a good choice for simple graphics such as logos with a few colours, where clear definitions are desired. JPEG images of logos will often look dirty, as well as being less efficient than equivalent PNG images.
- SVG
- A vector format relatively better supported on mobile devices than on the desktop. It provides animation capability, and in some implementations also allows for scripting.
Oh. GIF. Well, this is a wiki.
Implementation Steps:
- Select appropriate formats for each image.
Select an appropriate size. If necessary see CssMediaQueries for a technique allowing different sized images to be sent according to device capability.
- Crop and/or scale the image to the required size.
- Optimise it (to the lowest number that gives acceptable image quality)
- for PNG, optimise the number of colors in the color table
- for JPEG optimise the quality.
- for SVG, optimise the XML coding.
These optimisations should be available as seperate resources from the server, rather than attempting to squeeze them into different sizes through implementing CategoryBpImagesSpecifySize.