Picture formats - atauenis/webone GitHub Wiki

Currently a lot of graphics on websites is a norm. But initial Tim Bernes-Lee's HTML wasn't support any graphics. It was added a few months later by developers of browsers. Different browsers used different image formats, and in time the amount of formats was enlarged from single GIF in early 90's to approx. 15 formats in 2020ths.

WebOne can convert image files between most of formats, so any old browser now can display graphics in all modern formats.

GIF

Graphics Interchange Format (*.gif, image/gif). The current version, GIF89a, was introduced in 1989 year and was widely used on MS-DOS machines. It can store pictures with up to 256-colours and with 1-bit alpha channel (transparency). Few pictures with same size can be merged to a single GIF file to make animations.

This format is known by most of web browsers since introduction of inline pictures (<IMG> tag).

XBM

X10 BitMap (*.xbm, image/x‑xbitmap). It is format of pictures in UNIX X Window System since mid-1980s. This format is text-based (exactly, it's a dialect of C) and can contain black&white graphics. Because most of first web browsers were developed for UNIX-class systems, XBM was first graphics format used in the WWW.

This format is also known by most of web browsers, but even on UNIX it was marked as legacy in 1989 and support for XBM was dropped in most of modern browsers.

JPEG

Joint Photographic Experts Group File Interchange Format (.jpg or .jpeg or .jpe or .jif or .jfif or .jfi, image/jpeg or image/pjpeg). The format for professional-quality photos and pictures with lossy compression. Introduced in 1992 and shortly became de-facto standard for digital photos. Initially it wasn't widely used in networks due to large file size, too big resolution and color depth. Most of personal computers at that time was not capable to work with such files with adequate performance. However, later it was adopted in WWW too.

Most of JPEG files are baseline, meaning that the file is loading as is from the top scan line to the bottom. After JPEG FIF became used in Internet, an extension for JFIF was introduced. Especially for WWW some files can be made progressive, to begin displayed in browsers after downloading of first bytes of the file (not waiting for entire file). But first browsers (like Netscape 1.0) cannot display progressive files.

PNG

Portable Network Graphics (.png, image/png). In mid-90s GIF became "default" format for images on websites and its flaws became noticeable. They are limit to 8+1 bit color and large file size. At the end of 1996 new graphics format that intended to solve GIF flaws had been introduced - it was, of course, PNG. The format supports animations like GIF, but most of browsers cannot correctly display animated PNG (APNG) images.

Support for PNG was first appear in first betas of Microsoft Internet Explorer 4.0 and Netscape 4.04. But until middle of 2000s support for PNG was buggy in most of software. Full list of browsers with PNG support can be found here.

WebP

Web Picture (.webp, image/webp). In 2010 Google developed a replacement for PNG, which the "Corporation of goodness" seemed obsolete (and not sufficiently unified with Google's WebM/VP8 video codec). Google Chrome and Opera got support for WebP almost immediately after introduction of the format. Android OS included this format support since Android 4.0. But support of WebP in Firefox was added only in version 65. Safari, MS IE and older versions of Edge cannot display anything in WebP. Support in Edge still remains limited.

SVG

Scalable Vector Graphics (.svg, image/svg+xml). This format differs from all other in the kind of which it stores. SVG is a format of vector pictures, using real graphic elements instead of pixels. These pictures can be easily scaled or displayed on any device or even printed without quality loss. The SVG format was introduced in 1999, however initially was supported only by third-party plugins like Adobe SVG Viewer (included in Adobe Acrobat Reader 5). Mozilla has added support for displaying SVG in <object>/<embed> tags in Gecko 1.8 / Firefox 1.5 (however custom builds of Mozilla Suite with SVG support became available earlier). Later released Firefox 4.0 got support for SVG pictures in <img> tag and CSS styles. There also is SVG support in Opera 8.0+, Apple Safari 3.1+, Android 3.0+, Microsoft Internet Explorer 9.0+.

Convertion

WebOne includes image file converter based on ImageMagick. On any attempt to download a "modern" image file WebOne converts it on fly to a correct format.

Conversion of particular file type can be added via a new edit set of WebOne.conf:

[Edit:.*]
IgnoreUrl=webdav
OnContentType=ORIGINAL TYPE
AddConvert=convert
AddConvertDest=EXTENSION
AddResponseHeader=Content-Type: TYPE

Where:

  • ORIGINAL TYPE is MIME content type of original image (e.g. image/webp);
  • EXTENSION is extension of destination type (e.g. jpg);
  • TYPE is MIME content type of destination type (e.g. image/jpeg);
  • IgnoreUrl = RegExp mask for URLs where original file should be delivered (e.g. webdav means not touching images in all WebDAV traffic). Optional.

Hint: if converting doesn't work, try to open http://proxyhost:port/!img-test/. It will test possibility to run ImageMagick. On systems that can run convert utility from that package a wizard image should appear in the diagnostical web page. If test page displaying correctly, check your configuration file for mistakes and typos.

⚠️ **GitHub.com Fallback** ⚠️