Image formats naturally play a major role in web application development. In this blog post, we’ll briefly introduce you to the most important image formats.
To include photographs or images with high color depth or dynamics (i.e., images with many different colors), a best practice is to use the JPG format (also JPEG for Joint Photographic Experts Group). This format can display up to 16 million colors and also supports different compression levels between the following two extremes, which affect the file size of the image as well as its quality:
The GIF format (meaning Graphics Interchange Format) is particularly suitable for images with a few colors or large monochrome areas, as it can only represent 256 colors (8 bits are available per pixel, or 28 possible values). For such images, the GIF format compresses the data more effectively than the JPG format.
Compared to other formats, GIF can also do something special: You have probably heard or read the term animated GIF. These small animations are saved frame by frame in a single GIF. Animated GIFs have gained massive importance in recent years, especially through platforms like Giphy (https://giphy.com) and social media in general.
The Portable Network Graphics (PNG) is a mixture of the GIF and JPG formats and attempts to combine the strengths of these two formats. A distinction is made between the PNG-8 method, which is similar to the GIF format, and the PNG-24 method, which is more like the JPG format. You can already guess: The PNG-8 method can display 28 (256) colors, while the PNG-24 method can display 224 (approx. 16.8 million) colors. For this reason, you should use the PNG-8 process only if an image contains few colors or consists of very large monochrome areas (for example, for diagrams, drawings, logos, and pictograms). For photographs, on the other hand, the PNG-24 method is more suitable.
In addition, with the PNG-32 method, another 8 bits are available, used for the alpha channel. Through this channel, 256 transparency levels become possible. In this way it is possible to create images where, depending on the transparency level, the background of the image is more or less visible, which isn’t possible, for example, with the JPG format.
JPG, GIF, and PNG are bitmap formats. Bitmaps consist of small rectangles (pixels), each of which has a color value. All bitmap formats depend on the resolution, so they cannot be scaled arbitrarily without the individual pixels becoming larger and thus visible. You can test this property by opening an image in one of the formats mentioned earlier in a browser and then enlarging the display (and thus the image).
However, another format can provide graphical representations not based on pixels, but on image lines instead. Vector graphics are graphics composed of primitive graphic objects such as lines, circles, polygons, and curves. What sounds like relatively boring graphics at first glance is, of course, quite different in practice: By stitching together such primitive graphic objects, the most complex graphics can be represented. Do an image search for “vector graphic design,” and you’ll see what’s possible with vector graphics.
A vector format that can be displayed by all modern browsers is the Scalable Vector Graphics (SVG) format, an XML-based format for describing vector graphics. The name says it all: SVG graphics are scalable. Thus, once you create a vector graphic, you can scale it to any size without any loss of quality in the rendering. The code listing shows the SVG code for the graphic shown afterwards.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<g style="fill-opacity:0.8;">
<circle
cx="8cm"
cy="2cm"
r="100"
style="fill:red; stroke:black; stroke-width:0.2cm"
transform="translate(0,50)"
/>
<circle
cx="8cm"
cy="2cm"
r="100"
style="fill:blue; stroke:black; stroke-width:0.2cm"
transform="translate(70,150)"
/>
<circle
cx="8cm"
cy="2cm"
r="100"
style="fill:green; stroke:black; stroke-width:0.2cm"
transform="translate(-70,150)"
/>
</g>
</svg>
Note: Of course, since SVG is an XML-based format, you can create, modify, and even animate it dynamically using programming languages (because animation is also supported by the format). In addition, the appearance and layout of SVG graphics can be modified using CSS.
The WebP format, created by Google, has the primary goal of minimizing images to the smallest possible file size for the web. According to Google, images and graphics in this format are about 30% smaller than PNG or JPEG files with the same image quality. WebP also allows you to select the compression method used. So, you can distinguish between lossless (like PNG) and lossy (like JPEG). Because of this freedom of choice, the WebP format is suitable for both photos and graphics. In addition, the format supports transparency (like PNG) and animations (like GIF and SVG).
Browser Support: Incidentally, a good place to find out whether a particular image format is supported by a browser is the “Can I Use” website (https://caniuse.com/#feat=webp).
The table below summarizes the different image formats and their variants, providing an overview of which formats have lossy and lossless compression, how many colors can be represented by each format, and whether the format supports transparency and animation. Based on these criteria, you can quickly decide which image format is suitable depending for any given requirement.
Note: In addition to the image formats mentioned earlier, several others exist but in practice are used comparatively rarely (at least in the context of web applications). You can find an overview at https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types.
Including Images in HTML: All of the image formats we’ve mentioned can be added to a web page using the <img> element. As a parameter for the src attribute, simply specify the URL to the image file. And while we’re at it: The src attribute can be passed not only a URL to an image file, but also a data Uniform Resource Identifier (URI), which can contain the image data as Base64-encoded text. For more information on this type of image data integration, refer to https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs.
Various programs for processing images are available, and depending on how many images you want to edit or what techniques and filters you want to use, paying for a solid program may make sense. One of the most professional image processing programs is certainly Adobe Photoshop (https://www.adobe.com/products/photoshop.html), which is now only available via a monthly payment model. A somewhat stripped-down version, but still great for image processing, is Adobe Photoshop Elements (https://www.adobe.com/products/photoshop-elements.html). Unlike the original Photoshop, you don’t have to pay a monthly fee for Adobe Photoshop Elements, just a one-time purchase price of currently about $100. Another great program is Affinity Photo (https://affinity.serif.com/photo), which currently costs around $50 and has become a serious competitor in recent years. If, on the other hand, you don’t want to spend any money at all on an image processing program, you can also use the free Gimp (https://www.gimp.org).
6
Various programs are also available for editing vector graphics. Among the more professional and popular ones with graphic designers is Adobe Illustrator (https://www.adobe.com/products/illustrator.html), which, however, like Photoshop, requires a monthly fee for use. Affinity Designer (https://affinity.serif.com/designer), in a similar price range to Affinity Photo, represents a more affordable solution in this regard.
If you’re looking for a completely free tool for processing vector graphics, consider Inkscape (https://inkscape.org), which is not as extensive as the other programs in terms of functionality but is quite sufficient for starting out.
Editor’s note: This post has been adapted from a section of the book Full Stack Web Development: The Comprehensive Guide by Philip Ackermann.