Through CSS, any block element can be styled with background images and colours. Areas like the Search Bar and Promo Code section can accommodate both colours and images. Use discretion when making changes to these containers, as the areas can grow due to dynamic content. Image size can also have a material impact on the performance of the system.
Images should be saved at 72 dpi. This will result in the best balance of on screen visibility and print resolution. The following sections of this guide outline the image requirements for specific portions of the Online branding, including the recommended image formats.
When choosing an image format, a series of factors should be taken into consideration such as image quality, file size and compatibility.
•.GIF: Best suited to images that contain line art with minimal gradients. For most logos or images that use areas of solid colour, GIF will be your best choice, as it will result in a clean image with no artifacts and a smaller file size. .GIFs also feature transparency which may be useful in some cases.
•.JPG: Best used for photographic images, and should be avoided for most logos and line art. They can be made smaller by using compression, but too much compression can cause image quality to decrease.
•.PNG: Very flexible format and has two options: 8-bit and 24-bit.
▪8-bit .PNG: Can be used in place of .GIFs.
▪24-bit .PNG: Can create true transparency, but this transparency is not supported by Internet Explorer 6.
The best way to judge an appropriate format is by using your eyes. Try a few options out – there is no secret formula.
All images should be optimized for online use. The best way to optimize images is by using the Save for Web option available in most image editing software such as Adobe Photoshop. Optimizing an image can save valuable bytes which will result in a faster loading time for your users. Programs like Adobe Photoshop also provide previews that can be used when saving images optimized for the Internet. These previews can give you an indication of how heavy your image is in relation to its quality.
|
Information Refer to the knowledge base for Image Tips & Tricks. |
The following sections describe area-specific image guidelines:
•Primary Feature Article Images
•Secondary and Tertiary Feature Article Images
•Report and Business Intelligence Logo Images
|
Information For information about venue background images, refer to Creating a Venue Background Image. |
