Different Methods To Serve Image Files

Image files have traditionally been static GIF, PNG or JPEG files stored on a web server and served to a browser when requested by the client. Requirements, browser technologies and standards have moved on and it is now common for the web server to generate image files on-the-fly and there are various ways to serve these depending upon the user's requirements.

1 - Create Stand-Alone Files For Subsequent Use

This method is shown below and shows a CGI program creating image files and then referencing them in the HTML webpage that it then goes on to create. This is a practical solution but can generate more work for the web server, browser and intervening network.

Generally, more HTTP requests are sent because each document (webpage and images) is classed as a separate webpage and is requested with its own HTTP request. The server must also have local storage available to store the image files and then some form of cleanup process to delete the image files after they have been served. You can implement a cleanup process in a number of ways, including running a scheduled task to delete all image files that were created the previous day. However, I found a more successful method that used a bespoke CGI program references in the <img> tag to serve the image file just created and then to delete it immediately.

2 - Create SVG Images Embedded in HTML

This method is shown below and has the advantage that only one HTML file is requested. It contains all the HTML plus the SVG code for the images. Another advantage is that no cleanup process is required because no files are created on the server; the HTML is created on-the-fly and written to stdout

This method works with the latest versions of all browsers (only from IE9 onwards).

For more information on the advantages of SVG, have a look here.

3 - Create PNG Images On-The-Fly

This method applies equally to GIF (subject to patent restrictions) and JPEG images and references a CGI program using an <img> tag. Unlike using an <img> tag to reference a static image, the web server executes the CGI program and that sends the image file directly to the browser; no disk file is created.

Summary

The number of HTTP requests, CGI executions and local files are summarised for each method in the table. Subject to the browser's capabilities, embedding images in the HTML would appear to be the most efficient method.