Web Graphics Manipulations, Size & Compression

· XLink/XPointer for inclusion in XML

Each and every web graphic creation packet have the support for these W3 standard formats. Java is also a major part of this. Java Applets or Servlets also capable of handling images and Java is also following above standards.

(*Following description will be based on Adobe Photoshop 07)

Some graphic designing software provide special support for web graphic designing. Such a tool is also embedded in Adobe Photoshop which enables you to create and save images specially for web.

Even though W3 recommends both raster types and vector types, vector types are more suitable for web as they are smaller in size, easy to transfer through data lines and can be present on any sized screen without pixilation. Therefore many web graphics packages support raster to vector and vector to raster converting facility i.e. exporting path selections from Photoshop to Illustrator (Info).

If you carefully read the settings section in above diagram you will see a option called “Interlaced”. Enabling this facility to a image will allow it to download in multiple passes which is more quick.

Another special facility is transparency. You can control the transparency of the image by the designing software which is beneficial when it is layered with CSS.

Raster Effects?

Web graphics applications present its user with different kinds of effects. Traditional medium effects, Photorealistic effects and Hyper-realistic effects are major multimedia effects (Info). Raster effects not like vector effects. Raster effects generate pixels rather than vector data. SVG filters, Drop Shadow, Inner Glow, Outer Glow are some of the most popular raster effects used in designing packages.

Adobe Illustrator raster effects tool pallet is a very good collection of raster effects.

See the tutorial here. (Info)

Sizing Images

One meaning refers to the physical dimensions and resolution of an image. This is a little like saying that a photo is an 8 x 10. However, measuring the physical dimensions of a computer image is a bit more complicated because it has both dimensions (always expressed in pixels wide by pixels high) and resolution (pixels per inch, also referred to as dpi: dots per inch). For example:

A 10" x 8" photo is 1800 pixels x 1440 pixels at 180 pixels/inch

A 10" x 8" photo is 720 pixels x 576 pixels at 72 pixels/inch

The other meaning of the word "size" is the file size. The file size is measured in kilobytes (KB, or K) or megabytes (MB). A megabyte is about one thousand times the size of a kilobyte (1,024 times larger, to be exact). A typical digital camera produces images in the 5-8 MB range. Web images should ideally be in the under 100 K range.

How to size web images correctly

There are basically two ways to size an image to fit a space on a web page. One way is to shrink the image size to fit the page using an html editor or CMS. That's the wrong way, because the file size is inevitably much larger than it should be, and the image will load slowly.

There are three steps to correctly sizing a web image:

· Make sure the resolution is 72 dpi.

· Adjust the pixel dimensions (width and height) to the correct size to fit your page.

· Optimizing the file size.

Step 01: First, select the cropping tool (on the left-hand toolbar below). Next, set the width, height and resolution (72 pixels/inch).

Step 02: just drag across the photo to the desired cropping. When you have the desired cropping, hit enter or select Image > Crop. In one simultaneous operation you have set the resolution and cropped to the correct pixel dimensions.