Images have been an import component of websites since the internet began. Whether it’s a photo or a graphic, visual elements are used to attract visitors’ attention. In many cases, images provide users with clear added value and improve the web project by backing up the text content. They also offer additional information (e.g. infographics) or can be thought-provoking. While it’s obvious why images are used, there have been inconsistencies as to which image file format should be used. The abundance of options can make it difficult for website managers to find the right format, which is even more important when it comes to mobile devices.
$1 Domain Names
Register great TLDs for less than $1 for the first year.
Why wait? Grab your favorite domain name today!
Matching emailSSL certificate24/7/365 supportThere is a large number of image file formats for two-dimensional computer graphics and photographs, although the intended purposes differ for both. The traditionally used pixel art and raster graphics, as well as the less frequently used vector graphics, can be clearly distinguished from one another. When it comes to the former, the overall image consists of many individual dots: the pixels. The smaller the pixel and the more numerous, the higher the resolution/quality of the image file - and the bigger the file size. If such files are enlarged or reduced, however, this will result in a loss of quality since the pixel dots will start to look more like small, square shapes.
This hindrance is simultaneously the greatest distinguishing feature of the vector-based graphics, which can be minimized or maximized in any way, maintaining the same quality. The reason for this is that vector images are not composed of individual pixels but of different shapes that are represented using vectors. In the case of scaling, these shapes, which have an exact size and length specification, automatically adapt to the new overall dimensions. The more complex the image content, the less suitable vector formats are: a photo, for example, can be imitated with vectors, but the countless facets, light effects, and detailed shading really only come into full effect with pixel graphics. You can get a deeper insight into the differences and similarities of both types of graphics in our comparative guide.
Raster graphics are used much more frequently as vector graphics, despite being disadvantaged when it comes to scaling, which is particularly due to the fact that they can be generated quickly and are suitable for almost all scenarios. Therefore, graphic website elements can also be saved in pixel formats such as PNG format or JPG format like complex graphics. However, the greatest strength of the pixel display is clearly the presentation of photographs, which plays an important role in modern web design. This means that any photo can be easily scanned and digitized as a pixel graphic – and edited if need be. In addition to the graphic file formats already mentioned, there are a number of other free and fee-based formats, although only a few of them are in general use.
The format known as JPG or JPEG is actually a 1992 published standard (ISO/IEC 10918-1), which describes different methods for image compression. Since the standard itself does not contain any provisions on how the image should be saved, an additional format is necessary, with the JPEG File Interchange Format (JFIF) established as a cross-browser standard. Alternatives that are rarely used are the Still Picture Interchange File Format (SPIFF) and the JPEG Network Graphics (JNG) graphic file format.
Compressing JPG format changes the usual structure of pixel graphics by combining 8 x 8 pixels into one block and converting them into a single layer. For example, a color conversion between the RGB color space, YCbCr color model, and a low-pass filter (where high frequencies are filtered out in order to reduce the file size). Depending on the chosen compression level, this process is associated with a certain loss of quality since not all image information is retained. According to W3Tech statistics, around three-quarters of all websites are based on images in JPG format, which is due mainly to the efficiency associated with compression.
Recommended application scenario: storage and publication of photos.
PNG (Portable Network Graphics), a universally recognized graphic file format developed by the World Wide Web Consortium (W3C), appeared for the first time in 1996. As a patent-free and modern alternative to GIF (Graphic Interchange Format), it is characterized by the possibility of lossless compression as well as a maximum color depth of up to 24 bits per pixel (16.7 million colors) – or as many as 32 bits with alpha channel. In contrast to GIF, however, animations can’t be generated with PNG.
The PNG format supports both transparency and semi-transparency (thanks to the integrated alpha channel), which makes it suitable for all types of images, as well as interlacing, allowing for an accelerated build-up of the image file during the loading process. The color and brightness correction mechanisms ensure that PNG image files look the same on different systems. In order to compress a graphic in PNG format, you can use tools such as the pngcrush. Due to the loss-free compression process, the files are still comparatively large, which is why the format is less suitable for displaying photographs than JPG, for example. It also offers the possibility of reducing the color space (to 1 to 32 bits per pixel).
Recommended application scenario: storing and publishing small images and graphics (logos, icons, bar charts, etc.), graphics with transparency, loss-free photos.
The online portal, CompuServe, introduced the Graphics Interchange Format, GIF for short, in 1987 as a color alternative to X BitMap (XBM)’s black and white format. In contrast to other solutions such as PCX or MacPaint, the GIF files needed significantly less space thanks to the efficient LZW compression (data compression with the Lempel-Ziv-Welch algorithm), which made the format very popular when the internet first took shape. As a format for photos and graphics, JPG and PNG are now clearly ahead but since version GIF89a (1989), the format has been able to combine several individual images in a single file, which is why it is still used to create small animations.
All color information is stored in GIF in a table, the color palette. The table can contain up to 256 colors (8 bit), which is why the image format is not suitable for displaying photographs. The information can also be defined as transparent – however, unlike the more modern PNG, partial transparency is not possible, meaning that a pixel can be either visible or invisible.
Recommended application scenario: creating animations; clip art, logos, essentially things where a low color depth isn’t problematic.
TIFF (Tagged Image File Format) is a graphic file format that is especially used for transmitting print data and high-resolution images. It was developed as early on as 1986 by Microsoft in cooperation with Aldus (now belongs to Adobe) and is specially optimized for embedding color separation and color profiles (ICC profiles) of scanned images. Furthermore, TIFF supports the CMYK color model and allows a color depth of up to 16 bits for each color channel (the total color depth is 48 bits). Since 1992, the format has been able to be compressed loss-free using LZW compressions, which is also used in GIF format.
Thanks to these features, TIFF has become the standard for images where quality plays a more important role than file size. This is how publishers and print media work with the image format. The archiving of monochrome graphics e.g. technical drawings, counts as one of the most versatile applications. GeoTIFF was established with additional tags for saving and presenting raster-based Geo-information (maps, aerial images, etc.)
Recommended application scenario: transferring high-quality images with high resolution for printing.
When saving graphic projects created with the best-known Photoshop software, the manufacturer Adobe offers its own PSD format (Photoshop Document). This is characterized by the fact that it secures all information about layers, channels, or vectors, which makes subsequent editing possible. For example, layers can be added, duplicated, scaled, moved, removed, and customized. In a single PSD file, several layers, as well as the respective image data can be stored loss-free. The Adobe image file format is especially practical when it comes to graphics with a high recognition value such as logos, banners, etc., which are to be adapted quickly across different platforms and display sizes.
By default, images in PSD format can only be opened with Adobe Photoshop without restrictions, although exchanging files between applications on different operating systems (such as Windows or macOS) works without problems. The graphic file format can, therefore, be described as system-wide, in a sense. PSD primarily acts as a storage format during the processing procedure. However, for output to the web, the file should be converted to the PNG format or alternatively to JPG before being uploaded to the server, since the loss-free saving of the image data and all the layers enable effective post editing, but also bring a large amount of data along with it. In order to convert a PSD graphic, you can use a simple web tool like Zamzar.
Recommended application scenario: caching and editing of frequently used graphics, design templates.
BMP (Windows Bitmap) was developed for Microsoft and IBM operating systems and was first released in 1990 with Windows 3.0 as a memory format for pixel graphics with a color depth of up to 24 bits per pixel. The uncompressed image format assigns exactly one color value to each pixel, which is why BMP files are very large by default. For this reason, the format is not suitable for use on the web.
Recommended application scenario: saving photos/graphics for offline use.
Vector graphics are very suitable for use on the web because they often require much less space than comparable pixel graphics. The corresponding formats do not describe which color components a pixel has in the respective image, but rather the objects that make up the image – round and angled surfaces, text, straight and curved lines, etc. as well as their position, dimensions, colors, and other properties. In combination with the aforementioned aspect of loss-free scaling, realizing responsive and barrier-free web elements becomes child’s play. In addition, you can make changes to files in vector graphics at any time and without encountering any problems, but the difficulty increases disproportionately with the increasing complexity of the image file. Another advantage over pixel graphics is the possibility of creating animations with JavaScript.
In cooperation with software manufacturers, Aldus and Altsys, Adobe developed and published the vector graphics file format EPS (Encapsulated PostScript) in 1987. The name of the format is due to the fact that the respective files are stored in the page description language PostScript, which enables the output of complex pages on laser printers and imagesetters. To this end, PostScript describes the elements of the print page, such as lines, circles, images, etc., and provides information on where they are positioned. EPS expands this image information with precise statements about the output size, the so-called Bounding Box. EPS files optionally contain a preview image in low resolution, which can serve as a placeholder. The Adobe’s graphic file format describes the individual objects independently of the output device later on, which enables the exchange between different output media.
EPS was used especially in the print sector but it has now also been replaced by the well-known successor format PDF (Portable Document Format), which is also suitable for sending e-mails because of the much smaller file size. However, neither the old-fashioned EPS nor the modern PDF are suitable as image formats for web projects. They are much better suited to the exchange or presentation of text documents.
Recommended application scenario: description of complex print pages (format no longer current).
While many other vector graphic formats such as the AI (Adobe Illustrator Artwork) format are also unsuitable for use on the web, the SVG (Scalable Vector Graphics) recommended by W3C impressively offers the aforementioned advantages of vector-based image files. Specifying the description of two-dimensional vector graphics (which are based on the XML language) has been an impressive alternative to the traditional raster graphics, especially with regard to mobile and responsive websites, since the comprehensive HTML5 support of popular browsers. In addition to a loss-free scalability and a very small amount of data, SVG files offer various other advantages such as the following:
The SVG format is an excellent choice, especially for graphics that contain symbols (e.g. logos) or those that react to the input of website visitors (dynamic diagrams). The modern vector image format is also virtually predestined for technical graphics. A look into the aforementioned statistics of W3Techs shows, however, that SVG is not yet used in most web projects (in contrast to the raster graphics). In the following guide, you will find detailed information as well as guidelines for how to integrate it.
Recommended application scenario: technical or interactive graphics (logos, buttons, icons, etc.).
| JPG | PNG | GIF | SVG | |
|---|---|---|---|---|
| Color model | RGB, grey scale, CMYK | RGB, gray scale, indexed colors | indexed colors | RGB, SVG name colors |
| No. of colors | up to 16.7 million | up to 18 trillion | up to 256 | up to 16.7 million |
| Color channels | three | three (plus an alpha channel) | one | three (plus an alpha channel) |
| Bit depth | 8 bit per channel | 1–16 bit per channel | 1–8 bit | 8 bit per channel |
| Compression | high, lossy | high, loss-free | Minimal | none |
| File size | very small | small | big | individual |
| Animations | no | no | yes | yes |
| Suitable for | photos | small images and graphics (e.g. logos), loss-free photos | animations | graphics of all types (logos, icons, charts, etc.) |
Computer storage volume is increasing by the year. But while we have access to more gigabytes and terabytes, it’s best to keep the file sizes down to a minimum–especially if you operate a website. This is because compressed data leads to quicker loading times, happy visitors, and a good Google ranking. Pictures bound for the internet in particular should be compressed. We’ve compiled some of the...
Apple has replaced JPEG as the standard image format on iOS 11 and macOS High Sierra. The successor HEIF (High Efficiency Image File Format) enables users to save photos in a more space-saving and higher quality format. Since other platforms such as Windows or Linux do not yet support the new format, the MPEG standard’s possibilities are still limited.
GIFs are extremely popular for spicing up your own posts and news on social media. It seems difficult to imagine an online world without the expressive animations in the format of the same name – but APNG (Animated Portable Network Graphics) is an alternative that in some respects even stands out from GIFs. What exactly is behind this animated PNG? How can you create animations in this format?
Many types of video file formats are used online, each with their own pros and cons. That’s a good thing because different users have different requirements. We’re going to take a look at which platforms accept which video formats, and compare the advantages and disadvantages of each one. That way you’ll be able to decide on the best video format for your project, and learn how to save bandwidth...
JPG vs. PNG: In this article, we’ll compare the advantages and disadvantages of the two most popular formats for image files. Which format should you use for your application and what are the differences between JPG and PNG? How do different compression rates affect the image quality and file size? Which format is best for retaining specific properties of your image?
Provide powerful and reliable service to your clients with a web hosting package from IONOS.
View packages
