Optimization of images for the web

The preparation of images for the Web demands some caution when you start from a scanned image or any other type of image with high resolution. We must remind that the usual screen resolution is approximately 72 - 96 dpi (dots per inch). If we scan at 300 dpi, we are acquiring images that will be unnecessarily big, and that certainly will not look better that the acquired image at a lower resolution. A huge image file can take forever to download, will occupy unnecessary space in your server and probably the visitors won’t have the patience to wait. Optimization is the process of fine-tuning the display quality and file size of an image for use on the Web or other online media. The resulting images are usually saved in any of the three major graphic file formats used on the Web: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), and PNG-8 or PNG-24 (Portable Network Graphics, with 8-bit or 24-bit color).

One of the most common errors of beginners, when including images, is taking them directly from the scanner and simply scale them down to the size that they want to show in the web page, in the web editor. This is a false scaling: the image is shown in a smaller screen size, but the file is still the original. The solution is very simple; in your favourite program of image edition, look for the option that allows to change the resolution and size of the image, or a resampling, in order to fit the size to the screen resolution.

The techniques to trim an image in several fragments are very useful by several reasons, among them, the possibility of adapting the images to the structure of the page with more flexibility; for example an image with the text canbe pseudo-surrounded by a shape, something clearly impossible with the HTML alone.

After preparing the files for the web pages, you must always keep an original image with the necessary size, resolution and number of colours for further editing, with no limitations. If you want to recover all this information after altering the image to optimize it for screen display, you may find every kind of imperfections and artifacts, for example pixelation or missing colours. Briefly, the originals must be saved in a format that does not lose quality, and conserves full information about the colours. For the bitmap files, you can use TIFF and BMP, and the native formats of Photoshop, PaintShop Pro, Photopaint or any other program you might use. For the vectorial files, there is no problem: it’s enough with saving in the original format of the program (AI - EPS, FH-, CDR, XAR...)

How ot optimize the image size

Since the size of a graphic file depends on the number of colours and its resolution, everything that trims down these parameters will imply some reduction in the file size and therefore, of the necessary download time. On the other hand, we must choose the suitable file format, with the compression systems available in GIF, PNG and JPG formats. All these formats admit different options, and depending on what we choose, we can reach a satisfactory solution: an image of good quality with acceptable file size. This is what optimization is all about.

The resolution, like we already mentioned, can be as low as 72 dpi. The size of the image will depend, evidently, of its size and the details that we want to show. We must consider that in an image of big size (for example, full screen photos), the size can be huge and it becomes essential to adopt optimization strategies. Sometimes it’s better to divide the image in parts, to optimize them separately to the maximum, and then stich it all together in a layout that shows, apparently, a unique image. In the past this involved the use of tables, but now it is possible to use CSS-based layout.

The number of colors for JPEG is almost irrelevant: these images always have millions of colours in their definition. The key point in a JPEG graphic is its compression degree, which you can choose in the graphics program. Trying a bit, you can reach a good compromise between visual quality and file size, with insignificant quality loss. If you save in PNG-24 format there is a bonus advantage: lossless compression, at the price of a bigger file size (in some cases just slightly so.) GIF and PNG-8 files behave in a rather different way: in these graphics the number of colours is important; the maximum of different colours is 256, but you can use less colours if you can get away with it: the resulting file size will be even smaller. In a typical save dialog, when you choose the GIF or PNG-8 format (attached illustration) we have diverse options: to choose the number of colours, the type of palette, what to do with the nonpresent colours, transparency...

The way in which the colours not contained in the palette are simulated in a GIF or a PNG-8 file can be:

a)convert them to the next available colour the palette;
b) simulate a pattern that visually approximates the colour.

These two parameters allow us to test different alternatives to reach the best solution in terms of quality and file size.

This task of optimization, anyway, also can be automated. Different programs have the option to batch process image files, or you can record a macro, a script or an action carrying out all the optimization process, and later to apply it to a set of graphs simultaneously.

Web prototypes in a graphics program

Using the programs of graphics, you can create simulations for the design of a Website with graphics and try out easily alternatives in colour, design, typography...

The drawing and painting programs allow us to create different simulations of the design of our Web project, without the effort to write the necessary markup. In a graphic mockup you can freely place the text elements and graphics, and then remake everything as many times as necessary. This method is very common among the professionals, and very useful: the model which we create and see on our computer screen can be very close to the definitive desgn, and in addition it can be used for the phase of creation of the real page, as a template. Some graphic parts can be used as single graphics after the necessary optimization. Another article deals with the graphic website development in some more detail.

At the beginning, one usually works with paper and pencils; begin defining the look and feel that we want for the Web; write down take notes, make lists of subjects to consider, wished graphical style, more appropriate typefaces... these basic outlines, perhaps with some note of color, or accompanied by clippings from some reference material, can be the starting point to continue developing ideas in the computer. Then, in our favorite graphics program, continue creating a rectangular form with the dimensions proportional to the screen and create all the tests that we can. Now the computer is better, because we can make thousand versions, completely reversible and fast, and save as many alternatives as we want, and see the real effect in the screen.

The vectorial drawing programs have additional advantages in the web graphic development: elements can be rearranged and their size changed with no limitations and very easily; those elements can be aligned accurately... and in addition we can place all the necessary photographic images or bitmaps and integrate them in the total design.

When we reach a satisfactory design, the following step is to recreate it in a web page. It is not easy task... at least with some programs. Which is the equivalence between the image and the web page? It is necessary to decide which parts are solved with the text and backgrounds in the page elements; which parts will be reproduced finally as images (with the IMG tag.) Be aware that some easy ideas in the design program have unsuspected difficulties to translate as a web page... or they can demand very complicated structures of tables and graphics, or convoluted markup. And it might be necessary to trim the image model in pieces, to optimize them separately, place them in the page web in a table or in a complex DIV structure. Programs like Fireworks or Imageready are specialised in this task, but there are also some freeware program which do the same task.

In the web publishing program we will go on to the last phase of the project: to place each thing in its site. The simplest way is to use the image model like a template for the whole page, then place the parts that build up the layout in their place. Finally, we will have to erase this template image, or place the correct background images for the definitive design. Some programs like Dreamweaver facilitate this task: you just place an image as it is like a tracing background image; it will not be included in the page, but it lets you accurately place all the elements of the design, like tables and layers, images, texts... you can read more about graphic web development in a separate article.