Working with Images

Working with Images

Images in an Ajax based application may not be as important as the actual data. However, there are situations wherein images in JavaScript become a very powerful tool for users. With smart use of images, the application made with Ajax and JavaScript will provide the expected functions.

But integrating any image format in JavaScript is not a good idea. Even though JavaScript can handle various image formats, there are image formats that can drag the process of an Ajax or JavaScript application. Developers have to remember that certain formats are perfect in limited usage in order to maintain an optimized online application.

Using PNG Format

The most popular image format in JavaScript and Ajax based application is PNG. This image format should be able to work well with various versions of browsers. Transparency is no problem with PNG and the response of transparent image is still the same.

The clarity of image when using PNG is also noticeable. Compared to GIF, users have to edit PNG as-is while GIF has to go through RGB editing. Because of the wide range of acceptance of PNG, using the image format is very ideal for background images.

Considering GIF

A good option for PNG is GIF simply because it can offer impressive animations. With a single file, developers can add animations without getting concerned over compatibility with browsers. But GIF is often the second option for developers simply because animation in some sites is not necessary.

The file size of GIF is also higher compared to PNG. As already indicated, editing GIF might be a little bit challenging if not impossible (for images).  The best implementation of GIF in JavaScript and Ajax based websites is when the image size is very small. GIF provides clarity on small files especially when they are rendered as animation.

Using JPG

When you are building an Ajax based application that display images from photography, the best image format is JPG. The best resolution, clarity and editing options for JPG are very impressive. The large file size of JPG is always a downside but it's a "necessary downside" especially if you want to display very clear images.

If you are really keen in implementing JPG but you can compromise a little bit about quality, you can use image compressors for JPG to shave off KBs on the image.

No BMP and TIFF

BMP and TIFF (Bitmap and Tagged Image File Format) are two image formats that should never be used in JavaScript or an Ajax based application. These formats are highly unstable which means the image quality is not known until they are implemented in the application and can unexpectedly change. Another disadvantage of these formats is the difficulty in compression. BMP and TIFF are basically wrapper formats wherein their original compression cannot be easily determined.

These are the major formats that you can and cannot use in an Ajax based application if you're concerned about optimization. Be wise on implementing these formats because they can easily slow down your Ajax based applications.