Website Advisor: reduce image size for websites • important image formats • optimize photos for the web • free image editing software

Graphics programs for professional image editing

Just as important as a good code editor is a good graphics program to edit or resize images and photos.

When it comes to professional image editing, Adobe Photoshop and gimp (GNU Image Manipulating Program) are the top choices for creating and editing images. Graphics and photos for use on webpages must usually be edited. The most common tasks are:

  • Crop images

  • add additional image elements to the image

  • Resize images

  • Sharpen images

  • Optimize images for web purposes, e.g. compress images at optimal quality

It is necessary to know the most common image formats.

Advertisement

.gif
GIF (Graphics Interchange Format) was widely used for logos and animations in the 2000s. Due to the Unisys und IBM patents for the LZW Algorithm used in GIF files, GIF is virtually unused today.

Even though there is no longer any particular patent threat for GIF (the patents used to attack GIF have expired), it is better to use the PNG (Portable Network Graphics) or APNG (Animated Portable Network Graphics) image formats. With APNG a free image format exists for animations, which even makes a better quality of the created image animation possible.

.png
The PNG (Portable Network Graphics) image format has almost completely replaced the formerly widely used GIF format. PNG supports a color depth of 24 bits, i.e. over 16 million colors.

GIF is limited to a very poor 256 colors with an 8-bit color depth.

PNG supports not only full transparency like GIF, but also partial (graduated) transparency. This means that GIF is not the only option for creating animated images. With the format APNG (Animated Portable Network Graphics) exists an image format with similar animation options as GIF. APNG even has a better quality than GIF.

However, a better quality of the animated images always means an increasing file size. Since APNG uses a better compression than GIF, the quality advantage of APNG can definitely be used.

Note, that APNG is not an official extension of PNG. However, APNG is backwards compatible with PNG. The APNG assembler tool is a powerful GIF alternative from Mozilla. The MIT- and zlib-licensed software can be downloaded for free from the official project site. Download from sourceforge.net APNG Assembler

With it, you can create your own PNG animations for free on any platform. Of course, to create your own APNGs, you need suitable images in PNG format.

.jpg
JPG or more correctly JPEG (Joint Photographic Experts Group) is probably the best known image format. Almost all common Image Editing or Image Processing programs can open, display and convert JPG files.

The JPEG format is free from third party rights (e.g. patents). The compression methods used are freely available to everyone.

Due to its large color spectrum of up to 16 million colors, JPG is especially suitable for photos and complex image files with varying color depth. The biggest advantage of JPG is its variable compression rate. JPG files can be reduced in size by a factor of many times. However, this is always associated with a loss of quality.

Smaller files have the advantage of using less disk space and not slowing down the loading speed of the webpage.

To avoid the annoying effect of pixelation, you should always choose a compromise between quality and file size.

The websites GIMP.org and GIMPUsers.com have excellent step-by-step tutorials for many commonly used applications to help you get started with GIMP.

Advertisement