Editing Images for use on the Web.
The following article describes the criteria for using images on websites and in particular Messagepac™. It descibes the file formats and issues that need to be considered when uploading images, and makes suggestions on possible software you can use.
Web Image Formats
There are various image formats found on the Web, for messagepac we currently suggest using GIF or JPEG file formats:
GIF
GIF (Graphics Interchange Format) is a bitmap format developed for CompuServe by a company, which has since become a part of UNISYS. GIF is a variable 8-bit format that compresses bitmap files into small sizes; it supports transparency and can have multiple frames allowing very basic animation. GIF is a lossless format, which means that no image quality is lost when the image is compressed. GIF is best for graphics that use 256 colours or less and are graphics rather than photos.
JPEG
JPEG (Joint Photographic Experts Group) is developed specifically for photographic images. JPEG supports millions of colours (24-bit). It is a lossy format, which means that some image data is lost when the image is compressed, reducing the quality of the image. The JPEG format is best for scanned photographs or images that require more than 256 colours. JPEG Does not support transparency.
PNG
PNG (Portable Network Graphics) is a newer, more versatile. However, only newer web browsers can take full advantage of PNG features such as 32-bit colour and transparency. PNG compression is a lossless format and can compress more than a GIF or JPEG of the same colour depth and quality, resulting in smaller file size. The PNG format is best suited for creating colour accurate graphics or heavily compressed low-colour graphics; it also produces much cleaner edges with transparency than GIF.
SVG
SVG (Scalable Vector Graphics) is a new image format created by the W3C web standards organisation. SVG is based on XML (Extensible Markup Language). SVG allows high-resolution vector graphics to view by web browsers, meaning that images can be resized without losing any details - and are expected to have file sizes even smaller than JPEGs, GIFs, or PNGs. In addition to faster download speeds, SVG will make possible high-resolution printing, high-performance zooming and panning. This advanced format is not however widely used or supported yet!
Image Resolution
Understanding Image resolution is fundamental in creating images for the web. Because browsers only support screen resolution e.g. 72 dots per inch (dpi) using higher resolution images will cause longer load times and possible issues with page layout.
Images for print usually are at 150 to 300 dpi or higher and a web browser will literally resize images (unless constrained by the size tags) to 72dpi. This means that an image an inch wide at 150 dpi will appear to double in size when viewed through a browser.
It is essential that an image is 72dpi when used for the web.
Physical Size.
Once we have made sure the image resolution is 72dpi, we also need to consider the physical size, For messagepac we generally suggest making images no more that 200 pixels wide or high, this will allow them to load quickly and be manageable on the site. Images can be resized in the editor, but depending on the compression and file format this can affect the quality of the end result.
How do I edit my images?
There are a number of free and pay for image editing packages of varying complexity. We suggest you try:
Serif PhotoPlus: http://www.freeserifsoftware.com/software/PhotoPlus/
Ulead PhotoImpact: http://www.ulead.com/pi/runme.htm
Adobe Photoshop elements: http://www.adobe.com/products/psprelements/
If you are still struggling, then upgrade to a managed messagepac service and we will take care of everything for you!
Article Date: 13th October 2006 |
